使用 Nginx 反向代理多个 Angular 应用程序答案

【问题标题】：Reverse proxy multiple angular applications using Nginx使用 Nginx 反向代理多个 Angular 应用程序
【发布时间】：2020-09-05 21:18:39
【问题描述】：

我有两个不同的 Angular 应用程序（比如说 alpha 和 beta），它们在两个基于 docker nginx 的容器中运行，我需要根据子域路由到 Angular 应用程序。我在 docker 中使用了另一个 nginx 实例，它用作反向代理。我也想使用 SSL。初始路由工作正常。但是当我刷新浏览器时，它给出了 404。我尝试了try_files $uri $uri/ /index.html;，但它没有用。有人可以在这里帮助我吗？

基本上有 3 个容器在运行。两个用于角度应用程序，一个用于代理。全部在单个 docker 主机中运行。

上述 Angular 应用程序在 nginx 容器中运行，它们使用以下 nginx 配置。

Alpha 版本使用：

server {
    listen  5100;
    server_name  localhost;

    location / {
        root    /usr/share/nginx/html;
    }
}

测试版使用：

server {
    listen  5200;
    server_name  localhost;

    location / {
        root    /usr/share/nginx/html;
    }
}

它们都运行在除 80 端口之外的两个不同端口；

下面是我写的nginx反向代理配置。

upstream valpha {
    server alpha:5100;
}

upstream vbeta {
    server beta:5200;
}

server {
    listen       80;
    server_name  *.mydomain.com;
    return       301 https://$host$request_uri;
}

server {
    listen  443 ssl;
    server_name  subdomainalpha.mydomain.com;

    ssl_certificate /etc/ssl/mydomain.com.crt;
    ssl_certificate_key /etc/ssl/mydomain.com.key;

    location / {
        proxy_pass http://valpha;
    }
}

server {
    listen  443 ssl;
    server_name  subdomainbeta.mydomain.com;

    ssl_certificate /etc/ssl/mydomain.com.crt;
    ssl_certificate_key /etc/ssl/mydomain.com.key;

    location / {
        proxy_pass http://vbeta;
    }
}

提前致谢。

【问题讨论】：

你让它工作了吗？我目前面临着与您非常相似的任务。我会对您的解决方案非常感兴趣。
@Spookysister 是的。我解决了。我在下面发布了我的解决方案。请检查。

标签： angular docker nginx reverse-proxy

【解决方案1】：

您对他们两个都使用相同的root。您应该执行以下操作

location / {
  alias /var/www/html/app_one/dist/;
  try_files $uri$args $uri$args/ /app_one/index.html;
}

另一台服务器应该使用一些不同的文件夹，例如alias /var/www/html/app_two/dist/；

【讨论】：

【解决方案2】：

我通过覆盖 angular docker 镜像（不是反向代理）的 nginx 配置实现了我想要做的事情。

文件 - Dockerfile

FROM nginx:alpine
COPY /www /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d

文件 - default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

我通过使用默认端口 80 运行每个 Angular 容器并使用里面的容器名称作为 proxy_pass 来实现它。由于同一桥接网络中的所有容器我都可以通过名称访问它们。通过上述配置，我实现了重新加载问题。

【讨论】：