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

Question

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 ht

Answer 1

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.

Answer 2

the problem is: 8080 and 8081 containers can open resources like localhost:8080/styles.css or localhost:8080/bundle.js. but with current configuration they get localhost:8080/app1/styles.css requests instead. try adding rewrite /?app1/(.*)$ /$1 break; rule to reverse proxy, so they would get right requests