Setup a nginx reverse proxy with docker.

A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server. A reverse proxy provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers.

Why do we need to do this?

• Assume you are running multiple servers on different ports on your localhost.
• So every time when you wanna make a call to the server it's localhost:3000/api, localhost:3001/api, and so on.
• We can see this can be difficult when you have multiple endpoints from different servers.
• When a reverse proxy server is set up. It’s just a single entry URL with different paths for different servers. Something like localhost/api, localhost/logs.

Here’s a visualization of what we are trying to do.

Flow Diagram

Prerequisites.

• Docker installed.
• Docker Compose installed.
• Basic understanding of writing a docker-compose file.

So let’s get started.

1. Project Structure

Folder Structure

2. Docker Compose file

• At first, we are naming our docker process with the name web:.
• In the next line, we are just using the nginx image: from the docker hub.
• volumes: This is the part from where we really start configuring things. Here we’re telling the nginx to use our own configuration file and also to render the custom HTML file we created instead of the default one.
• ports: is where we map the docker container port to the external machine, which our system(laptop).

3. Nginx Configuration file

• We define the hostname which is localhost and the default HTTP port 80.
• location / is the root path where we display our custom HTML. It might be confusing to see root /usr/share/nginx/html . This is the default location from where the HTML file will be fetched (this location is from inside of the docker container). As we want to render our custom HTML file we’ll override this location in docker-compose.yml file under volumes key with the value ./html:/usr/share/nginx/html
• location /server1 is where we point our local server running on port 3001 and so on with other servers
• So we’re pretty much done here. Run this setup with command docker-compose up and you are good to go. I’ll attach a link to this GitHub project below.

custom index.html

imdhanush/nginx-local