Question

我目前正在尝试为两个Angular应用创建反向代理。我希望都可以通过启用SSL的docker主机的443端口访问应用程序（例如https://192.168.x.x/app1和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

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

我花了很长时间试图找出解决这个问题的方法，但是还没有走运。我希望这里有人可以帮助我。

Answer 1

首先，我更喜欢这种方法一种服务，一个容器通过nginx提供重定向。它还使用带有证书的dockerized nginx reverse proxy几乎自动涵盖了https。如果需要，您也可以使用letsencrypt certificates。您可以将Angular应用程序部署到容器behind the reverse proxy中。

以下，我描述了您的docker部署的步骤。我还包括portainer，这是用于容器部署的GUI：

使用选项-v $ HOME / certs：/ etc / nginx / certs在端口443中运行nginx，共享为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 = true ：

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时，它会自动重定向到有角度的容器应用（由appX.yourdomain引用）。最好的事情是，当其他容器启动时，jwilder / nginx-proxy会自动更新nginx.conf。我们的微服务架构是在Spring（自动部署）中实现的，因此我在这里介绍了如何使用angular and nginx构建容器，但是我想您已经解决了这个问题。我也会考虑使用docker-compose。

Answer 2

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

在Nginx上以及其他Nginx反向代理后面运行的Angular App

2 个答案: