我目前正在尝试为两个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暴露给端口Port上的主机) 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;
}
}
如果我尝试在网址'https://192.168.x.x/app1'上打开应用程序,则会到达应用程序,但是我收到所有静态文件的错误消息'Uncaught SyntaxError:Unexpected token Errormessages from chrome
看起来,不是静态的js和css文件,而是返回应用程序的index.html。我相信这是应用程序本身的nginx配置问题。
我花了很长时间试图弄清楚如何解决这个问题,但还没有运气。我希望有人可以帮助我。
首先,我更喜欢方法一个服务,一个容器提供与nginx的重定向。它还使用带有证书的dockerized nginx reverse proxy几乎自动覆盖https。如果需要,您也可以使用letsencrypt certificates。您可以将Angular应用程序部署到容器behind the reverse proxy中。
下面我将介绍Docker部署的步骤。我还包括portainer,它是容器部署的GUI:
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
docker run --name app1 --restart=always -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_HOST=app1.yourdomain yourcontainer
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。
问题是:8080和8081容器可以打开像localhost:8080 / styles.css或localhost:8080 / bundle.js这样的资源。但是使用当前配置,它们会获得localhost:8080 / app1 / styles.css请求。尝试添加rewrite /?app1/(.*)$ /$1 break;
规则来反向代理,这样他们就可以获得正确的请求