Question

在以下存储库上：

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在浏览器上访问的原因：

http://app1.example.com:4201

以同样的方式，可以通过URL在浏览器上访问app2：

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秒（不知道为什么，不知道如何解决）。

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

http://app1.example.com:4201

http://app2.example.com:4202

不过，它们加载速度很快。

关于如何使两个应用程序像原始网址一样快速地加载Nginx的想法？

编辑1

处理 Nasiruddin 中的建议（也欢迎其他建议）。
为此创建了一个新分支，所以请进行git检出：

$ git checkout nasiruddin-suggestions

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

试图找到能解决问题的配置

谢谢！

Answer 1

如果您想将其加载到一个域中，则可以使用而不是使用端口来访问同一域中的多个位置。您无需每次都开始 ng服务。

解决方案是使用“ 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设置的这种结合具有以下优点：

您可以通过配置的URL访问您的应用

如果您沿Angular路线行驶，则无需刷新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;
    }
}

通过Nginx加载Angular应用非常慢-耗时60秒

1 个答案: