Recently, I found myself needing a reverse proxy for my local development environment. I had two applications running on different ports, and I wanted them to appear to be served from a single top level domain. This can be useful when you want cookies shared across sub-domains.
For example, I had a single Django application running on port 8000, and a React frontend running on Webpack dev server on 8080. I wanted them both to be accessible from api-app.localhost and web-app.localhost respectively.
Naturally, I turned to Docker for a solution and this is what I came up with. Here is the Docker compose file that uses the Alpine Nginx image to set up the reverse proxy.
It references two Nginx configuration files.
Here's web.conf. You'll notice that there are headers defined that are related to the http version and connection upgrade. This enables Websockets to work that Webpack dev server uses for hot reloading.
And here is the api.conf.
What makes Nginx proxy to your host machine is the use of host.docker.internal in the upstream.
Before starting the containers, there is one thing left to do. Add the two hosts entries to your host file on your host machine. If that's a Linux machine (including macOS) then edit /etc/hosts, and if you are on Windows, edit C:\Windows\System32\drivers\etc\hosts.
127.0.0.1 api-app.localhost web-app.localhost
And now start the containers!
docker-compose up -d