NGINX, Docker setup in project folder local

 

Complete Full Flow

---

1. Folder Structure

main-folder/
├── react/
│   ├── Dockerfile
│   ├── package.json
│   └── src/
├── nodejs/
│   ├── Dockerfile
│   ├── package.json
│   └── server.js
└── docker-compose.yml

---

2. What You Write Locally (One Time Setup)

react/Dockerfile

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]

nodejs/Dockerfile

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["node", "server.js"]

docker-compose.yml

services:
  frontend:
    build: ./react
    ports:
      - "3000:3000"

  backend:
    build: ./nodejs
    ports:
      - "5000:5000"
    environment:
      - DATABASE_URL=postgres://user:pass@db:5432/mydb
    depends_on:
      - db

  db:
    image: postgres:15
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: mydb
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

---

3. Push to Git

# On your local machine
git init
git add .
git commit -m "initial commit"
git push origin main

---

4. SSH Into Production Server

ssh user@your-server-ip

---

5. On Production Server — One Time Setup

Install Docker

sudo apt update
sudo apt install docker.io docker-compose -y

Install Nginx

sudo apt install nginx -y

Clone Your Project

cd /home/user
git clone https://github.com/yourname/your-repo.git
cd your-repo

---

6. Start Docker Containers

docker-compose up --build -d

What happens here:

Docker reads docker-compose.yml
       ↓
Builds React image  →  runs on port 3000
Builds Node image   →  runs on port 5000
Pulls Postgres image → runs internally
       ↓
All 3 containers running on Docker internal network
       ↓
Node connects to Postgres using hostname "db"
React connects to Node using /api/ routes

Verify containers are running

docker ps

You should see 3 containers — frontend, backend, db

---

7. Configure Nginx on Production

Create config file

sudo nano /etc/nginx/sites-available/myproject

Paste this config

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # React frontend
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Node backend API
    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Enable the config

# Symlink to sites-enabled
sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled/

# Test config for errors
sudo nginx -t

# Reload nginx
sudo systemctl reload nginx

---

8. Point Your Domain to Server

Go to your domain registrar / DNS provider and add:

A Record    @     →   your-server-ip
A Record    www   →   your-server-ip

DNS takes 5–30 minutes to propagate.

---

9. Full Request Flow When User Types Domain

User types yourdomain.com in browser
       ↓
DNS resolves yourdomain.com → your server IP
       ↓
Request hits server on port 80
       ↓
Nginx receives the request
       ↓
Nginx checks /etc/nginx/sites-enabled/myproject
— matches server_name yourdomain.com
       ↓
       ↓— request is /          → proxy_pass → React container port 3000
       ↓— request is /api/...   → proxy_pass → Node container port 5000
       ↓
React container serves the frontend
       ↓
Browser renders the page
       ↓
User clicks something (login, fetch data)
       ↓
React sends API call to yourdomain.com/api/users
       ↓
Nginx forwards to Node on port 5000
       ↓
Node processes request → queries Postgres container
       ↓
Postgres returns data → Node sends response
       ↓
React receives response → updates UI

---

10. When You Push Code Updates

# On production server
cd /home/user/your-repo
git pull origin main
docker-compose up --build -d

That's it — Docker rebuilds the containers with new code.

---

Complete Picture in One Diagram

INTERNET
    ↓
yourdomain.com
    ↓
DNS → Server IP
    ↓
PORT 80/443
    ↓
NGINX (reverse proxy)
    ↓              ↓
location /      location /api/
    ↓              ↓
REACT           NODE JS
port 3000       port 5000
                    ↓
              POSTGRES DB
              (internal Docker network)
              port 5432

---

What Lives Where

Thing	Location
Your code	Local machine → Git → /home/user/your-repo on server
Dockerfiles	Inside your git repo
docker-compose.yml	Inside your git repo
Nginx config	/etc/nginx/sites-available/ on server (NOT in git)
Postgres data	Docker volume pgdata on server (persists across restarts)
Running containers	Docker on production server