angular - 如何正确配置 nginx 以与 NG Serve 和 Angular CLI 一起使用？

Question

我一直在尝试研究 Nginx 以在 localhost:4200 上配置带有 Angular 5 ng 服务的代理，但是只得出为已构建的项目提供服务的结果。我从这项研究中发现的配置“有点”有效，但会产生一个未加载任何数据的白页:

dev:12 GET http://192.168.1.84/inline.bundle.js net::ERR_ABORTED
dev:12 GET http://192.168.1.84/polyfills.bundle.js net::ERR_ABORTED
dev:12 GET http://192.168.1.84/styles.bundle.js net::ERR_ABORTED
dev:12 GET http://192.168.1.84/vendor.bundle.js net::ERR_ABORTED
dev:12 GET http://192.168.1.84/main.bundle.js net::ERR_ABORTED

看起来它看不到 ng serve 提供的文件，但至少到达了项目的 index.html 页面。这是我目前使用的配置:

location /dev {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        rewrite ^/(.*)$ /$1 break;
        proxy_set_header Host localhost;
        proxy_pass http://localhost:4200;
}

我应该在/dev 配置中添加什么？

Answer 1

首先，检查您的 Angular 应用程序的 <base> 标签 - 它需要匹配应用程序的新位置。因此，例如，如果您通过 nginx 在 https://localhost/dev/ 托管您的应用程序，则您的 <base> 标签将需要是:

<base href="/dev/">

您可以在应用的 index.html 中找到此标签。

其次，nginx 不会自动代理 ng serve 用于实时重新加载功能的所有流量。您可以通过将其添加到您的 nginx.conf 来代理此额外流量:

location ^~ /sockjs-node/ {

    proxy_pass http://127.0.0.1:4200;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

这假设 ng serve 在端口 4200(这是默认值)上托管您的应用程序。