“You’ve optimized your NGINX setup — now let’s deploy it to production, the same way real companies do.”
🧭 Quick Recap
In the previous parts, we:
- Learned what NGINX is (Part 1)
- Served React + API locally (Part 2)
- Optimized with caching, gzip, and load balancing (Part 3)
Now it’s time to go end-to-end — from your local machine to a production deployment.
🧩 1. Real-World Architecture Overview
Here’s what a modern production setup looks like 👇
Browser
│
▼
+---------------------+
| CloudFront / |
| CDN Layer |
+---------------------+
│
▼
+---------------------+
| NGINX |
| - Serves React app |
| - Proxies /api |
| - Handles SSL |
| - Caches assets |
+---------------------+
│
▼
+---------------------+
| Backend (Node) |
+---------------------+
│
▼
+---------------------+
| Database Layer |
+---------------------+
NGINX here is your gateway — the single entry point for users worldwide.
⚙️ 2. Folder Structure (Production Layout)
/etc/nginx/
├── nginx.conf
├── sites-available/
│ └── react-app.conf
├── sites-enabled/
│ └── react-app.conf → ../sites-available/react-app.conf
├── conf.d/
│ ├── gzip.conf
│ ├── caching.conf
├── ssl/
│ ├── yourdomain.crt
│ ├── yourdomain.key
└── logs/
├── access.log
└── error.log
This modular layout keeps your config clean and reusable.
🧱 3. Example Production Config
File: /etc/nginx/sites-available/react-app.conf
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
# Redirect HTTP → HTTPS
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name yourdomain.com www.yourdomain.com;
ssl_certificate /etc/nginx/ssl/yourdomain.crt;
ssl_certificate_key /etc/nginx/ssl/yourdomain.key;
root /var/www/html;
index index.html;
# React SPA routing
location / {
try_files $uri /index.html;
}
# API proxy (to backend cluster)
location /api/ {
proxy_pass http://backend_cluster;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# Include gzip + caching configs
include /etc/nginx/conf.d/gzip.conf;
include /etc/nginx/conf.d/caching.conf;
# Security headers
add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options "SAMEORIGIN";
add_header Referrer-Policy "strict-origin-when-cross-origin";
}
🔐 4. Enabling SSL (Free via Let’s Encrypt)
You can get a free SSL certificate using Certbot:
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
This automatically:
- Obtains SSL certificates
- Updates your NGINX config
- Sets up auto-renewal
✅ After setup, visit https://yourdomain.com and check the 🔒 lock icon.
🐳 5. Dockerizing React + NGINX
If you prefer container deployments (e.g., AWS ECS, Render, Vercel custom), use a multi-stage Dockerfile.
🧩 Dockerfile
# Stage 1: Build React app
FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Stage 2: Serve with NGINX
FROM nginx:1.25-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
🏃 Run it locally:
docker build -t react-nginx .
docker run -p 8080:80 react-nginx
✅ Your app is now live at http://localhost:8080
☁️ 6. Cloud Deployment Options
| Platform | Setup | Notes |
|---|---|---|
| AWS EC2 | Install NGINX manually | Full control; good for small-scale apps |
| AWS ECS / Fargate | Use Docker image | Scalable, container-based |
| DigitalOcean Droplet | Manual setup or Docker | Simple and cost-effective |
| CloudFront + S3 | For static React-only sites | No backend proxying |
| NGINX + API Gateway | Serverless APIs | Works with AWS Lambda backends |
🔁 7. CI/CD Deployment Workflow
Example GitHub Actions workflow:
name: Deploy React + NGINX
on:
push:
branches: [ main ]
jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install deps
run: npm ci
- name: Build app
run: npm run build
- name: Copy files to server
uses: appleboy/scp-action@v0.1.3
with:
host: ${{ secrets.SERVER_IP }}
username: ubuntu
key: ${{ secrets.SSH_KEY }}
source: "build/*"
target: "/var/www/html/"
- name: Reload NGINX
run: ssh -i ~/.ssh/id_rsa ubuntu@${{ secrets.SERVER_IP }} "sudo nginx -s reload"
💡 Bonus: Invalidate CDN cache (like CloudFront) post-deployment for instant updates.
🧩 8. Deployment Checklist
| Category | ✅ Best Practice |
|---|---|
| Routing | Use try_files $uri /index.html for React |
| SSL | Use Let’s Encrypt / Certbot |
| Gzip | Enable compression |
| Caching | 30 days for hashed assets |
| Security | Add standard headers |
| Testing | Run nginx -t before reload |
| Reload |
sudo nginx -s reload (zero downtime) |
| Monitoring | Check logs in /var/log/nginx/
|
🧠 9. Troubleshooting Tips
| Symptom | Possible Fix |
|---|---|
403 Forbidden |
Check file permissions in /var/www/html
|
502 Bad Gateway |
Backend not running or wrong proxy port |
nginx: [emerg] |
Syntax error — run sudo nginx -t
|
| SSL expired | sudo certbot renew --dry-run |
🧩 10. Full Production Diagram
Browser (HTTPS)
│
▼
+----------------------+
| CloudFront / CDN |
| - Global edge cache |
+----------------------+
│
▼
+----------------------+
| NGINX (EC2 / Docker) |
| - Serves React app |
| - Proxies API calls |
| - Handles SSL, gzip |
+----------------------+
│
▼
+----------------------+
| Backend (Node) |
| Database / Cache |
+----------------------+
🏁 Summary
| Topic | What You Learned |
|---|---|
| Architecture | Real-world NGINX + React setup |
| SSL | Free HTTPS with Let’s Encrypt |
| Docker | Deploy React + NGINX in a container |
| Cloud | Where and how to host |
| CI/CD | Automate deployment & reload |
| Checklist | Production-ready best practices |
✨ Series Wrap-Up
🎉 You’ve completed the full series:
- Understand NGINX — how it works and why it matters
- Host React + API with proper routing
- Optimize with caching and load balancing
- Deploy confidently to production
🧠 “Once you can deploy your frontend with NGINX,
you’ve crossed from developer to engineer —
someone who ships fast, secure, and scalable web apps.”
If you enjoyed this series: ❤️ Leave a reaction or comment
Top comments (0)