将 Angular 8 配置为在代理后面运行答案

【问题标题】：Configure angular 8 to run behind proxy将 Angular 8 配置为在代理后面运行
【发布时间】：2020-03-28 05:43:57
【问题描述】：

我正在尝试配置 livereload angular 8 开发应用程序（以 ng serve... 开头）以在 nginx 代理后面运行。例如 mydomain.com/app1

我正在本地运行这个 stackblitz 示例：

https://stackblitz.com/edit/angular-nested-routing-with-modules-with-bootstrap?embed=1&file=src/index.html

这是我的本地版本：

https://angular.syntapse.co.uk/nested-module/

我已经在 angular.json 中设置了 baseHref 和 deployUrl 并在 index.html 中添加了

我的 nginx 配置：

server {
    listen 80;
    server_name angular.syntapse.co.uk;
     location /nested-module/ {
        proxy_pass http://0.0.0.0:3601/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }

我的 index.html 包括

  <head>
    <base href="/nested-modules">
    <title>Angular Router</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

我的根 angular.json 配置包括 baseHref 和 deployUrls。

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/demo",
        "baseHref": "/nested-modules/",
        "deployUrl": "/nested-modules/",

在将应用加载到 chrome 时，资产 URL 看起来正确，但它们没有被加载 - 404 错误。服务器上没有错误。

我不确定除了 deployUrl 和 baseHref 之外，我还需要进行哪些其他更改才能为 nginx 代理 Angular 应用加载资产。

任何帮助表示赞赏。

谢谢

【问题讨论】：

标签： angular routing

【解决方案1】：

这个简单的解决方案可以为从单个域运行的一个或多个应用程序实时热模块重新加载。 --public-host需要指向webpack默认sockjs url（这里默认使用的是/sockjs-node）

nginx配置：

server {
    listen 80;
    server_name yourdomain.com;
    location /first-app/ {
        proxy_pass http://0.0.0.0:3601/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
     location ^~ /first-app/sockjs-node/ {
        proxy_pass http://0.0.0.0:3601/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
     location /second-app/ {
        proxy_pass http://0.0.0.0:3602/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
    location ^~ /second-app/sockjs-node/ {
        proxy_pass http://0.0.0.0:3602/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
}

Angular package.json conf（每个 Angular 应用重复）：

  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 3601 --disable-host-check --public-host https://yourdomain.com/first-module/sockjs-node/",

【讨论】：