DEV Community

Fazly Fathhy
Fazly Fathhy

Posted on

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.

Image description

Image description

*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.

Image description

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:

Image description

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay