通过Nginx加载Angular应用程序非常慢 – 需要60秒
作者：互联网
在以下存储库中：
https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions
我有3个元素
> nginx服务器
> vanilla Angular app1
> vanilla Angular app2
app2是app1的克隆
我正在使用带有Cygwin的Windows 10操作系统.
要试用该系统,请打开3个终端窗口并执行以下操作：
$mkdir lab-nginx-angular
$cd lab-nginx-angular
$git clone https://github.com/napolev/lab-nginx-angular .
$git checkout nasiruddin-suggestions
---
$cd nginx
$./nginx.exe
---
$cd app1
$ng serve
---
$cd app2
$ng serve
内部文件：.angular-cli.json我有以下内容(例如：app1)：
{
...
"defaults": {
"styleExt": "css",
"component": {},
"serve": {
"host": "app1.example.com",
"port": 4201
}
}
...
}
这导致app1可以通过网址在浏览器上访问：
以同样的方式,可以通过URL在浏览器上访问app2：
(请相应地修改hosts文件)
然后,使用Nginx(反向代理),我可以使用url访问这两个应用程序：
使用相同的端口,在这种情况下：80.
在Nginx内部,对于app1,我使用了以下配置：
server {
listen 80;
server_name app1.example.com;
location ~ ^/sockjs-node
{
proxy_pass http://localhost:4201;
include "../proxy_params.conf";
}
location /
{
proxy_pass http://localhost:4201;
include "../proxy_params.conf";
}
}
我的问题是,当通过Nginx加载这两个应用程序时,加载需要60秒(不知道为什么,不知道如何解决它).
如果我通过以下方式访问这两个
但他们加载速度很快.
有关如何使两个应用程序加载Nginx与其原始网址一样快的任何想法？
编辑1
根据纳西鲁丁的建议(其他建议也欢迎).
为它创建了一个新的分支,所以请做一个git checkout：
$git checkout nasiruddin-suggestions
https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions
试图找到完成这个技巧的配置
谢谢！
解决方法:
如果要在一个域上加载端口,则可以在同一域上访问多个位置,而不是使用端口.您不需要每次都开始服务.
解决方案是使用“base-href”选项构建应用程序.
例如,使用base-href构建多个app：
cd app_one && ng build --base-href=/app_one/
cd app_two && ng build --base-href=/app_two/
cd app_three && ng build --base-href=/app_three/
此构建选项将导致应用程序的index.html具有相应于命令中定义的路径定义的BASE href的情况.
<base href=”/app_one/” />
对于NGINX设置,您必须使用以下配置覆盖默认的NGINX设置：
server {
listen 80;
server_name apps.example.com;
location /app_one/ {
alias /var/www/html/app_one/dist/;
try_files $uri$args $uri$args/ /app_one/index.html;
}
location /app_two/ {
alias /var/www/html/app_two/dist/;
try_files $uri$args $uri$args/ /app_two/index.html;
}
location /app_three/ {
alias /var/www/html/app_three/dist/;
try_files $uri$args $uri$args/ /app_three/index.html;
}
}
ng build命令和NGINX设置的这种组合具有以下优点：
- you can access your apps through the configured URLs
- if you get on a Angular route, you can refresh pages without getting a 404
要访问应用程序,您可以使用URL作为
www.apps.example.com/app_one
www.apps.example.com/app_two
有关更多示例,请参阅this
编辑
如果您想要多个服务器,您可以在多个端口上使用,您可以将NGINX配置为
这是我的代理传递给localport的配置,
server {
listen 80;
server_name app1.example.com;
location / {
proxy_pass http://localhost:4200;
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;
}
}
server {
listen 80;
server_name app2.example.com;
location / {
proxy_pass http://localhost:8080;
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;
}
}
或者您可以配置的构建应用程序,
server {
listen 80 ;
root /PATH/TO/APP_ONE/DIST/;
index index.html index.htm;
server_name app1.example.com;
proxy_buffering on;
proxy_buffer_size 1k;
proxy_buffers 24 4k;
proxy_busy_buffers_size 8k;
proxy_max_temp_file_size 2048m;
proxy_temp_file_write_size 32k;
location / {
try_files $uri $uri/ /index.html;
}
}
server {
listen 80 ;
root /PATH/TO/APP_TWO/DIST/;
index index.html index.htm;
server_name app2.example.com;
proxy_buffering on;
proxy_buffer_size 1k;
proxy_buffers 24 4k;
proxy_busy_buffers_size 8k;
proxy_max_temp_file_size 2048m;
proxy_temp_file_write_size 32k;
location / {
try_files $uri $uri/ /index.html;
}
}
标签：nginx,reverse-proxy,angular,angular5 来源： https://codeday.me/bug/20190710/1425226.html