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

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

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.

enter image description here

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.