Comprehensive Nginx Configuration Guide: Basics, Optimization, and Deployment

For front‑end developers who need to work with Nginx, this guide reorganizes the often‑overwhelming default nginx.conf file and explains each part in clear detail.

The original configuration (with many commented lines) is shown first, followed by a cleaned‑up version containing only 22 essential lines:

worker_processes  1;
 events {
     worker_connections  1024;
 }
 http {
     include       mime.types;
     default_type  application/octet-stream;
     sendfile        on;
     keepalive_timeout  65;
     server {
         listen       80;
         server_name  localhost;
         location / {
             root   html;
             index  index.html index.htm;
         }
         error_page   500 502 503 504  /50x.html;
         location = /50x.html {
             root   html;
         }
     }
 }

An annotated version adds explanations for each directive, such as the purpose of worker_processes , the events block, and the http block.

Overall Structure

The configuration can be divided into three logical sections:

Global block – settings that affect the whole Nginx server (user, PID, log paths, etc.).

Events block – controls network connection handling, e.g., worker_connections 1024; .

Http block – contains most functional directives, including include mime.types , sendfile , keepalive_timeout , and one or more server blocks.

Simple Deployment

To get a basic site up quickly, modify only two places: set server_name and root to point to your static files. Nginx will then serve index.html from that directory.

Optimization Tips

1. Front‑end history‑mode 404 handling

location / {
    try_files $uri $uri/ /index.html;
}

This ensures that a page refresh falls back to index.html when the requested URL does not exist.

2. Reverse proxy configuration

location /police/ {
    proxy_pass   http://192.168.1.182:8852/police/;
    proxy_redirect default;
    proxy_http_version 1.1;
    proxy_connect_timeout   60;
    proxy_send_timeout      60;
    proxy_read_timeout      90;
}

Requests starting with /police/ are forwarded to the backend service at the specified IP and port.

3. Enable gzip compression

gzip on;
 gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
 gzip_static on;
 gzip_proxied any;
 gzip_vary on;
 gzip_comp_level 6;
 gzip_buffers 16 8k;
 gzip_http_version 1.1;

Gzip reduces the size of transferred assets, often cutting bandwidth by about 50%.

4. Maintenance page

# rewrite ^(.*)$ /maintainace.html break;

Uncomment this line during scheduled maintenance to serve a static maintenance page.

5. Host multiple sites on one IP

# First site (blog)
server {
    listen 8080;
    root   /data/www/hexo;
    index  index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}
# Second site (live stream)
server {
    listen 8081;
    root   /data/www/geov;
    index  index.html;
    location / {}
}

Each server block represents a virtual host with its own port and document root.

6. Static‑dynamic separation

location /image/ {
    root   /var/filecenter/;
}
location /static/ {
    root   /var/filecenter/;
}
location ~ .*(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
    root   /Users/dalaoyang/Downloads/static;
}

Static assets are served directly by Nginx, while dynamic requests are proxied to the application server, improving performance.

Basic Nginx Commands

Installation and management commands:

yum install nginx          # install
netstat -anput | grep nginx   # check process
netstat -ntlp                # view port usage
nginx                         # start
nginx -s reload               # reload configuration
nginx -s stop                # fast stop
nginx -s quit                # graceful stop
nginx -t                     # test configuration file

The article also contains promotional material unrelated to the technical content, which can be ignored for the purpose of this guide.