Angular 应用程序运行在 nginx 上和附加的 nginx 反向代理后面

Question

我目前正在尝试为两个 Angular 应用程序创建反向代理。我希望这些应用程序都可以通过启用 SSL 的 docker 主机的 443 端口访问（如 https://192.168.x.x/app1 and https://192.168.x.x/app2），这样用户就不必为每个应用程序键入端口号。

我的设置是，应用程序的每个部分都在其自己的 Docker 容器中运行： - 容器 1：Angular App 1（端口 80 暴露给端口 8080 上的主机） - 容器 2：Angular App 2（端口 80 暴露给端口 8081 上的主机） - 容器 3：反向代理（端口 443 暴露）

Angular 应用程序和反向代理都在 nginx 上运行。这些应用程序是这样构建的：ng build --prod --base-href /app1/ --deploy-url /app1/

应用程序的nginx设置是这样的：

server {
  listen 80;
  sendfile on;

  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

反向代理的nginx配置是这样的：

server {
  listen 443;
  ssl on;
  ssl_certificate /etc/nginx/certs/domaincertificate.cer;
  ssl_certificate_key /etc/nginx/certs/domain.key;

  location /app1/ {
    proxy_pass http://192.168.x.x:8080;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;

  }
  location /app2/ {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
     proxy_pass http://192.168.x.x:8081;
  }
}

如果我尝试在 url 'https://192.168.x.x/app1' 上打开应用程序，可以访问该应用程序，但我收到所有静态文件的错误消息 'Uncaught SyntaxError: Unexpected token <'： Errormessages from chrome

看来，返回的不是静态 js 和 css 文件，而是应用程序的 index.html。我相信这是应用程序本身的 nginx 配置问题。

我花了很长时间试图弄清楚如何解决这个问题，但还没有成功。我希望这里有人可以帮助我。

Answer 1

问题是：8080和8081容器可以打开localhost:8080/styles.css或localhost:8080/bundle.js等资源。但在当前配置下，他们会收到 localhost:8080/app1/styles.css 请求。尝试将 rewrite /?app1/(.*)$ / break; 规则添加到反向代理，这样他们就会得到正确的请求

Answer 2

首先，我更喜欢一种服务的方法，一种使用 nginx 提供重定向的容器。它还使用 dockerized nginx reverse proxy with certificates. You can also use letsencrypt certificates if you want. You can deploy your Angular applications into containers behind the reverse proxy 几乎自动覆盖 https。

下面我将描述您的 docker 部署步骤。我还包括 portainer，它是容器部署的 GUI：

运行端口 443 中的 nginx 使用选项 -v $HOME/certs:/etc/nginx/certs 共享为 your.domain 生成的证书。将证书放在主机上的某个位置，例如 /etc/nginx/certs。选项 --restart=always 需要在服务器重启时自动运行容器：

docker run -d --name nginx-proxy --restart=always -p 443:443 -v /root/certs:/etc/nginx/certs -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy

您的应用程序 1 和 2 应部署在 appX.yourdomain 并且必须重定向到 docker IP（这样 nginx 可以将子域重定向到你的容器）。
Dockerfile 必须在不同的端口（8080 和 8081）公开 Web 服务。该组件也应该部署在该端口上
最重要的是应用程序1和2容器必须包含选项-e VIRTUAL_HOST=appX.yourdomain和PROXY_ADDRESS_FORWARDING=真:

docker run --name app1 --restart=always -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_HOST=app1.yourdomain yourcontainer

还启动了 Portainer，为 docker 个容器提供仪表板：

docker run --name portainer --restart=always -v ~/portainer:/data -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_HOST=portainer.yourdomain portainer/portainer -H tcp://yourdockerip:2376

所以基本上当一些请求（子域）到达 nginx 时，它会自动重定向到 angular 容器应用程序（由 appX.yourdomain 引用）。最好的是 jwilder/nginx-proxy 在不同的容器启动时自动更新 nginx.conf。我们的微服务架构是在 Spring（自动部署）中实现的，所以我在这里介绍了如何使用 angular and nginx 构建容器，但我想你已经解决了这个问题。我也会考虑使用 docker-compose.

Angular 应用程序运行在 nginx 上和附加的 nginx 反向代理后面

Angular App running on nginx and behind an additional nginx reverse proxy

reverse-proxy

nginx

docker

angular

nginx-reverse-proxy

Angular 应用程序 运行 在 nginx 上和附加的 nginx 反向代理后面

Angular App running on nginx and behind an additional nginx reverse proxy

reverse-proxy

nginx

docker

angular

nginx-reverse-proxy

Angular 应用程序运行在 nginx 上和附加的 nginx 反向代理后面