在Nginx上以及其他Nginx反向代理后面运行的Angular App [英] Angular App running on nginx and behind an additional nginx reverse proxy
问题描述
我目前正在尝试为两个Angular应用创建反向代理. 我希望应用程序都可以通过启用SSL的docker主机的443端口访问(例如 https://192.168.xx /app1 和 https://192.168.xx/app2 )，这样用户就不会不必键入每个应用程序的端口号.
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.
我的设置是，应用程序的每个部分都在其自己的Docker容器中运行: -容器1:Angular App 1(端口80暴露给端口8080上的主机) -容器2:Angular App 2(端口80暴露给端口8081上的主机) -容器3:反向代理(端口443暴露)
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)
Angular应用程序和反向代理都在nginx上运行.这些应用程序的构建方式如下:ng build --prod --base-href /app1/ --deploy-url /app1/
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/
应用程序的nginx设置如下:
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;
}
}
反向代理的nginx配置如下:
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;
}
}
如果我尝试在网址" https://192.168.xx/app1 "上打开应用， ，应用已到达，但我收到所有静态文件未捕获的SyntaxError:意外令牌<"的错误消息: 来自Chrome的错误消息
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
似乎，返回的不是应用程序的index.html，而是静态的js和css文件.我认为这是应用程序本身的nginx配置的问题.
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.
推荐答案
首先，我更喜欢一种服务方法，即一个使用nginx提供重定向的容器.它还使用 Docker化的Nginx反向代理几乎自动覆盖了https (带有证书).如果需要，您还可以使用解密证书.您可以将Angular应用程序部署到
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.
以下，我描述了您的docker部署的步骤.我还包括 portainer ，它是用于容器部署的GUI:
Below I describe the steps for your docker deployment. I also include portainer which is a GUI for your container deployment:
- 使用选项-v $ HOME/certs:/etc/nginx/certs在共享端口为您的.domain生成的证书的端口443中运行nginx.将证书放在主机上的某个位置，例如/etc/nginx/certs .服务器重新引导时，需要选项-restart = always 自动运行容器:
- 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
- 您的应用程序1和2应该部署在 appX.yourdomain 中，并且必须重定向到Docker IP(通过这种方式，nginx可以将子域重定向到您的容器).
- Dockerfile必须在不同的端口(8080和8081)中公开Web服务.该组件也应部署在该端口上
- 最重要的是，应用程序1和2容器必须包含选项 -e VIRTUAL_HOST = appX.yourdomain 和 PROXY_ADDRESS_FORWARDING = true :
- 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，以为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(autodeployment)中实现，因此我在这里包括如何使用
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上以及其他Nginx反向代理后面运行的Angular App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
