在代理后面配置 angular 8 到运行

Question

我正在尝试将 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 应用程序加载资产。

感谢任何帮助。

谢谢

Answer 1

这个简单的解决方案支持从单个域为一个或多个应用程序运行实时热模块重新加载。 --public-host需要指向webpack默认的sockjsurl（这里默认使用的是/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/",

在代理后面配置 angular 8 到 运行

Configure angular 8 to run behind proxy

routing

angular

在代理后面配置 angular 8 到运行