Question

我一直在尝试研究Nginx，以便在localhost：4200上使用Angular 5 ng服务器配置代理，但是只提供服务已经构建的项目的结果。我从这项研究中发现的配置有点＆＃34;有效，但会导致白页无法加载任何数据：

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服务所提供的文件，但至少会到达项目的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应用的$data代码 - 它需要与应用的新位置相匹配。因此，例如，如果您通过<base>的nginx托管您的应用，则您的https://localhost/dev/代码必须为：

<base>

您可以在自己的应用<base href="/dev/">中找到此标记。

其次，nginx不会自动代理index.html用于实时重新加载功能的所有流量。您可以将此额外流量添加到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; }在端口4200上托管您的应用程序（这是默认设置）。

如何正确配置nginx以使用NG Serve和Angular CLI？

1 个答案: