When deploying a Node.js or Next.js project in a production environment, using Nginx as a reverse proxy ensures better performance, security, and scalability. In this guide, I’ll share Nginx configuration files for handling an API, a frontend UI, and an admin panel.
Why Use Nginx?
Nginx is widely used as a reverse proxy, handling incoming requests and forwarding them to the appropriate services. This setup helps with:
- Load balancing
- Caching static assets
- SSL termination
- Improved security
Nginx Configuration for a Node.js API
For the API service, we’ll configure Nginx to proxy requests to a Node.js backend running on port 1821:
server {
listen 80;
server_name api.onestoptech.co.in;
location / {
proxy_pass http://localhost:1821; # Forward requests to your API
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# WebSocket support (if needed)
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
This configuration ensures that all API requests to api.ytub.online are forwarded to localhost:1821.
Nginx Configuration for Next.js UI
For the frontend Next.js UI, we set up another proxy pass for handling requests to localhost:14165:
server {
listen 80;
server_name onestoptech.co.in;
location / {
proxy_pass http://localhost:14165;
proxy_cache_bypass $http_upgrade;
# Proxy headers
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
# CORS headers
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Expose-Headers Content-Length;
add_header Access-Control-Allow-Headers Range;
proxy_headers_hash_max_size 512;
proxy_headers_hash_bucket_size 128;
# Proxy timeouts
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
try_files $uri $uri/ =404;
}
This ensures that UI requests are handled properly, with CORS headers, timeouts, and necessary proxy headers.
Nginx Configuration for the Admin Panel
The admin panel is configured similarly, forwarding requests to the appropriate service:
server {
listen 80;
server_name admin.onestoptech.co.in;
location / {
proxy_pass http://localhost:14200;
proxy_cache_bypass $http_upgrade;
# Proxy headers
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
# CORS headers
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Expose-Headers Content-Length;
add_header Access-Control-Allow-Headers Range;
proxy_headers_hash_max_size 512;
proxy_headers_hash_bucket_size 128;
# Proxy timeouts
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
try_files $uri $uri/ =404;
}
Using Nginx as a reverse proxy makes your Node.js and Next.js applications more secure and efficient. It helps you scale your project while ensuring smooth request handling.
Would you like me to refine this further or add details on SSL setup, load balancing, or performance optimizations?
