My First Full-Stack Deployment with Docker and NGINX as Load Balancer

Introduction:

In this post, I’ll walk through my experience creating a full-stack application with a simple frontend and backend. The frontend is a basic HTML file, while the backend is built with Node.js. After containerizing both with Docker, I set up NGINX as a reverse proxy and load balancer to manage traffic across multiple backend instances. This project was an important step in learning about Docker, NGINX, and full-stack deployment.

**Step 1: Building the Frontend and Backend
Frontend:

**
The frontend is a simple HTML page that interacts with the backend. It could be a webpage that makes requests to the backend or displays data dynamically.

Frontend Code: I created a basic index.html file that is served via Docker. It could be as simple as displaying a simple frontend and making API requests to the Node.js backend.

Backend:
The backend is a Node.js application that listens on specific ports (3001, 3002, 3003). It serves data or processes requests sent from the frontend.

*Step 2: Containerizing with Docker
*
Docker Image:
I wrote a Dockerfile to containerize the HTML file and serve it with a simple web server like nginx.

Step 3: Setting Up NGINX

Now that the frontend and backend are containerized and running, I set up NGINX as a reverse proxy and load balancer. NGINX will forward incoming traffic to the appropriate backend service.

NGINX Configuration:
I created an NGINX configuration file (nginx.conf) to manage multiple backend instances. Here's the configuration I used: