在 nginx 上运行的 Angular 应用程序，并在额外的 nginx 反向代理后面 [英] Angular App running on nginx and behind an additional nginx reverse proxy

问题描述

我目前正在尝试为两个 Angular 应用程序创建反向代理.我希望这些应用程序都可以通过启用 SSL 的 docker 主机的 443 端口访问(例如

下面我将描述您的 docker 部署步骤.我还包括 portiner，它是容器部署的 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=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 时，它会自动重定向到 angular 容器应用程序(由 appX.yourdomain 引用).最好的事情是，当不同的容器启动时，jwilder/nginx-proxy 会自动更新 nginx.conf.我们的微服务架构是在 Spring(自动部署)中实现的，所以我在这里介绍了如何使用 angular 和 nginx，但我想你已经解决了这个问题.我也会考虑使用 docker-compose.

I'm currently trying to create a reverse proxy for two Angular apps. I want the apps to be both accessible through the 443 port of the docker host with SSL enabled (like https://192.168.x.x/app1 and https://192.168.x.x/app2), so that the users don't have to type in the port numbers for each app.

My setting is, that every part of the application runs within its own Docker container: - Container 1: Angular App 1 (Port 80 exposed to host on port 8080) - Container 2: Angular App 2 (Port 80 exposed to host on port Port 8081) - Container 3: Reverse Proxy (Port 443 exposed)

Both Angular apps and the reverse proxy are running on nginx. The apps are build like that: ng build --prod --base-href /app1/ --deploy-url /app1/

The nginx setting of the apps is like that:

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

The nginx configuration of the reverse proxy is like that:

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

If I try to open the app on the url 'https://192.168.x.x/app1', the app is reached, but I get error messages for all static files 'Uncaught SyntaxError: Unexpected token <': Errormessages from chrome

It seems, that instead of the static js and css files, the index.html of the app is returned. I believe that this is a problem of the nginx config of the apps themselves.

I have spent quite a time trying to figure out how to solve that problem, but no luck yet. I hope that someone here can help me with that.

解决方案

Firstly I prefer the approach one service, one container providing redirection with nginx. It also covers almost automatically https using a 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.

Below I describe the steps for your docker deployment. I also include portainer which is a GUI for your container deployment:

• Run the nginx in the port 443 sharing the certificates generated for your.domain using the option -v $HOME/certs:/etc/nginx/certs. Put the certificates somewhere on the host for instance /etc/nginx/certs. Option --restart=always is needed to automatically run the container when the server reboot:

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

• Your app 1 and 2 should be deployed in appX.yourdomain and must be redirected to the docker IP (this way nginx can redirect the subdomain to your container).
• Dockerfile MUST expose the web service in different ports (8080 and 8081). The component should be also deployed on that port
• The most important thing is that application 1 and 2 containers must include the option -e VIRTUAL_HOST=appX.yourdomain and PROXY_ADDRESS_FORWARDING=true:

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

• Portainer is also launched to provide the dashboard for the docker containers:

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

So basically when some request (subdomain) arrives to nginx, it automatically redirects to the angular container app (referenced by appX.yourdomain). The best thing is that jwilder/nginx-proxy automatically update the nginx.conf when the different containers start. Our microservices architecture are implemented in Spring (autodeployment) so I include here how you can build the container with angular and nginx, but I guess you already solved this. I would also consider to use docker-compose.

这篇关于在 nginx 上运行的 Angular 应用程序，并在额外的 nginx 反向代理后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！