带有自定义 --base-href 和 Nginx 路由的 Angular SPA

Posted 2023-03-15

【中文标题】带有自定义 --base-href 和 Nginx 路由的 Angular SPA

【英文标题】：Angular SPA with Custom --base-href and Nginx Routing

【发布时间】：2020-02-12 13:24:39

【问题描述】：

我们有一个 Angular SPA 应用程序，我们需要从

更改基本路径

www.site.com 到 www.site.com/app

我们在 ng build 命令中添加了 --base-href=/app

运行 ng build --output-path=dist --base-href=/app/ --prod

我们的 nginx 配置中有这个：

location / 
 try_files $uri $uri/ /index.html;

我们把它改成

location /app/ 
 root /usr/share/nginx/html/app;
 try_files $uri $uri/ /app/index.html;

访问站点 localhost/consumerhub 会引发 500 错误。这是我在日志中看到的：

2019/10/15 19:53:51 [错误] 7#7: *1 重写或内部重定向周期，同时内部重定向到“/app/index.html”，客户端：172.17.0.1，服务器：，请求：“GET /app/ HTTP/1.1”，主机：“localhost:9182” 172.17.0.1 - - [15/Oct/2019:19:53:51 +0000] "GET /app/ HTTP/1.1" 500 572 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 （KHTML，如 Gecko）Chrome/77.0.3865.90 Safari/537.36" "-"

应该是什么？提前致谢！

【问题讨论】：

从错误来看，似乎是内部重定向。这很正常，因为您的try_files 声明说：试试这个、这个或/app/index.html，它会再次开始一个新位置。我不确定您为什么需要在您的位置内使用root。不用那个你可以试试吗？

【参考方案1】：

使用ng build --prod --base-href /app/ --deploy-url /app/（更改为应用运行的端口号（80））

  location /app/ 
      rewrite ^/app/(.*) /$1 break;
      proxy_pass         http://localhost:80/app/;
      proxy_set_header   Host $http_host;
      proxy_set_header   X-Real-IP $remote_addr;
  

【参考方案2】：

实际上，您可以在 angular.json 配置中为任何环境或所有环境添加这些参数（--baseHref 和--deployURL）。