在nginx服务器中为Angular 5应用配置子文件夹 [英] Configure subfolder in nginx server for Angular 5 app

问题描述

我有两个角度应用程序发布到两个不同的子文件夹"testapp1"和"testapp2".

I have two angular app's published to two different subfolders "testapp1" and "testapp2".

url's - 
    https://dev.testurl.org/foo -- For testapp1
    https://dev.testurl.org/bar -- For testapp2

所以我用basehref建立了角度

So i build angular with basehref

For testapp1:
 ng build --prod --base-href /foo/ 

For testapp2:
  ng build --prod --base-href /bar/

我的nginx配置，

server {
  listen 80 default_server;
  listen [::]:80 default_server;

  client_max_body_size 1000M;
  server_name dev.testurl.org localhost;

  location /testapp1/ {
            autoindex on;
    root /testapp1/dist;
    try_files $uri $uri/ /foo/index.html;    
  }
  location /testapp2/ {
            autoindex on;
    root /testapp2/dist;
    try_files $uri $uri/ /bar/index.html;    
  }

当我尝试点击时， https://dev.testurl.org/foo 或/栏-它具有控制台错误，提示意外的语法错误"，基本上是没有加载正确的源.任何的想法?我是在正确构建应用程序还是在做一些错误的Nginx配置?

When i try to hit, https://dev.testurl.org/foo or /bar - it has console error says "Unexpected Syntax Error" basically it's not loading the correct sources. Any idea? whether i am building app correctly or doing something wrong nginx configuration?

推荐答案

您的配置有两个问题:

当可以通过将文档根目录与所请求的URI连接起来来计算文件的路径时，使用root伪指令.否则，请使用alias.有关详细信息，请参见本文档.

The root directive is used when the path to the file can be calculated by concatenating the document root with the requested URI. Otherwise, use alias. See this document for details.

location指令用于匹配全部或部分URI.有关详细信息，请参见本文档.

The location directive is used to match all or part of the URI. See this document for details.

例如:

location /foo {
    autoindex on;
    alias /testapp1/dist;
    try_files $uri $uri/ /foo/index.html;    
}
location /bar {
    autoindex on;
    alias /testapp2/dist;
    try_files $uri $uri/ /bar/index.html;    
}

location和alias值都应以/结尾或都不以/结尾，以获得正确的字符串替换.

The location and alias values should either both end with / or neither end with / in order to get the correct string substitution.

这篇关于在nginx服务器中为Angular 5应用配置子文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！