gpt4 book ai didi

angular - 通过 Nginx 加载 Angular 应用程序非常慢——需要 60 秒

转载 作者:太空狗 更新时间:2023-10-29 18:00:43 26 4
gpt4 key购买 nike

在以下存储库中:

https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions

我有 3 个元素

  1. nginx 服务器
  2. 普通 Angular app1
  3. 普通 Angular app2

app2app1

的克隆

我正在使用 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 在浏览器上访问:

http://app1.example.com:4201

同理,app2在浏览器上可以通过url访问:

http://app2.example.com:4202

(请相应地修改hosts文件)

然后,使用 Nginx(反向代理)我可以使用 url 访问这两个应用程序:

http://app1.example.com

http://app2.example.com

使用相同的端口,在本例中为: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 秒(不知道为什么,不知道如何解决) ).

enter image description here

如果我通过以下方式访问这两个应用程序:

http://app1.example.com:4201

http://app2.example.com:4202

不过它们加载速度很快。

关于如何使用 Nginx 使这两个应用加载速度与其原始 url 一样快,有什么想法吗?

编辑 1

正在处理 Nasiruddin 的建议(也欢迎其他建议)。
为它创建了一个新分支,所以请执行 git checkout:

$ git checkout nasiruddin-suggestions

https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions

尝试找到可以解决问题的配置

谢谢!

最佳答案

如果您想将其加载到一个域,您可以不使用端口,而是访问同一域中的多个位置。您不需要每次都启动 ng serve

解决方案是使用“base-href”选项构建应用。

例如使用base-href构建多个应用:

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 配置为

这是我的代理传递到本地端口的配置,

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;
}
}

关于angular - 通过 Nginx 加载 Angular 应用程序非常慢——需要 60 秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51513372/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com