通过 Nginx 加载 Angular 应用程序非常慢 - 需要 60 秒
dav*_*esp 5 reverse-proxy nginx angular angular5
在以下存储库中：
https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions
我有3个元素
nginx服务器- 香草角
app1 - 香草角
app2
app2是一个克隆app1
我正在使用Windows 10操作系统与Cygwin.
要试用该系统，请打开 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可以在浏览器上通过 url 访问：
（请hosts相应修改文件）
然后，通过Nginx（反向代理）我可以使用 url 访问这两个应用程序：
使用相同的端口，在本例中：80。
在Nginx, for内部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：
$ git checkout nasiruddin-suggestions
https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions
试图找到能解决问题的配置
谢谢！
如果您想将其加载到一个域上，您可以访问同一域上的多个位置，而不是使用端口。您不需要每次都 启动服务。
\n\n解决方案是使用 \xe2\x80\x9cbase-href\xe2\x80\x9d 选项构建应用程序。
\n\n例如使用base-href构建多个应用程序：
\n\ncd app_one && ng build --base-href=/app_one/\ncd app_two && ng build --base-href=/app_two/\ncd app_three && ng build --base-href=/app_three/\n此构建选项将导致应用程序的 index.html 将根据命令中定义的路径定义 BASE href。
\n\n<base href=\xe2\x80\x9d/app_one/\xe2\x80\x9d />\n对于 NGINX 设置，您\xe2\x80\x99 必须使用以下配置覆盖默认 NGINX 设置：
\n\nserver {\n listen 80;\n server_name apps.example.com;\n location /app_one/ {\n alias /var/www/html/app_one/dist/;\n try_files $uri$args $uri$args/ /app_one/index.html;\n }\n location /app_two/ {\n alias /var/www/html/app_two/dist/;\n try_files $uri$args $uri$args/ /app_two/index.html;\n }\n location /app_three/ {\n alias /var/www/html/app_three/dist/;\n try_files $uri$args $uri$args/ /app_three/index.html;\n }\n}\nng build 命令和 NGINX 设置的这种组合具有以下优点：
\n\n\n\n\n\n
\n- 您可以通过配置的 URL 访问您的应用程序
\n- 如果你走的是 Angular 路线，你可以刷新页面而不会出现 404
\n
要访问应用程序，您可以使用 url 作为
\n\nwww.apps.example.com/app_one\nwww.apps.example.com/app_two\n有关更多示例，请参阅此
\n\n编辑
\n\n如果你想服务多个，你可以在多个端口上使用，你可以将 NGINX 配置为
\n\n这是我的代理传递到本地端口的配置，
\n\nserver {\n listen 80;\n server_name app1.example.com;\n location / {\n proxy_pass http://localhost:4200;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \'upgrade\';\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n}\n\nserver {\n listen 80;\n server_name app2.example.com;\n location / {\n proxy_pass http://localhost:8080;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \'upgrade\';\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n}\n或者对于构建应用程序，您可以配置为，
\n\nserver {\n listen 80 ;\n root /PATH/TO/APP_ONE/DIST/;\n index index.html index.htm;\n server_name app1.example.com;\n proxy_buffering on;\n proxy_buffer_size 1k;\n proxy_buffers 24 4k;\n proxy_busy_buffers_size 8k;\n proxy_max_temp_file_size 2048m;\n proxy_temp_file_write_size 32k;\n location / {\n try_files $uri $uri/ /index.html;\n }\n}\n\nserver {\n listen 80 ;\n root /PATH/TO/APP_TWO/DIST/;\n index index.html index.htm;\n server_name app2.example.com;\n proxy_buffering on;\n proxy_buffer_size 1k;\n proxy_buffers 24 4k;\n proxy_busy_buffers_size 8k;\n proxy_max_temp_file_size 2048m;\n proxy_temp_file_write_size 32k;\n location / {\n try_files $uri $uri/ /index.html;\n }\n}\n| 归档时间： |
|
| 查看次数： |
2348 次 |
| 最近记录： |