Comprehensive Nginx Configuration Guide: From Basics to Optimization

In the preface the author, a senior architect, explains that understanding Nginx is essential for front‑end developers and that many articles lack a clear overall picture, so this guide re‑organizes the concepts.

1. Original nginx.conf and Explanation

The full default configuration (about 118 lines) is shown, then a cleaned‑up version without comments (22 lines) is presented.

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #               '$status $body_bytes_sent "$http_referer" '
    #               '"$http_user_agent" "$http_x_forwarded_for"';
    
    #access_log  logs/access.log  main;
    
    sendfile        on;
    #tcp_nopush     on;
    
    #keepalive_timeout  0;
    keepalive_timeout  65;
    
    #gzip  on;
    
    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;
        }
    }
}

After removing comments the configuration is reduced to 22 lines, making it easier to read.

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 Chinese comments explaining each directive, such as the meaning of worker_processes , the purpose of the events block, and the role of the http block.

2. Overall Understanding

The configuration is divided into three logical parts:

Global block – settings that affect the whole Nginx server (user, worker processes, PID, logs, includes).

Events block – network‑level settings like worker_connections and the event‑driven model.

Http block – the most frequently used section, containing global http settings, server blocks, and location blocks for routing, proxying, and static file handling.

Each part is illustrated with a diagram (images omitted in this summary).

3. Simple Deployment

To get a website online you only need to modify two places: set server_name and root to point to your site’s directory. Nginx will then serve index.html from that directory.

4. Common Optimizations

4.1 Front‑end history mode 404 issue

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

This ensures that when a user refreshes a SPA page, Nginx falls back to index.html if the requested URL does not exist.

4.2 Reverse proxy

Example for forwarding API requests:

# API endpoint
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;
}

This forwards any request that starts with /police/ to the backend service at 192.168.1.182:8852 .

4.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;

Enabling gzip can roughly halve the size of transferred assets, improving load speed.

4.4 Maintenance page

# Uncomment the following line during maintenance and restart Nginx
# rewrite ^(.*)$ /maintainace.html break;

4.5 Multiple sites on one IP

# Site 1 – personal blog
server {
    listen       8080;
    root        /data/www/hexo;
    index       index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

# Site 2 – live streaming
server {
    listen       8081;
    root        /data/www/geov;
    index       index.html;
    location / {}
}

4.6 Static‑dynamic separation

Static resources (HTML, JS, CSS, images) are served directly by Nginx, while dynamic requests are proxied to backend services. Example location blocks illustrate how to map different URL prefixes to filesystem paths.

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

5. Basic Nginx Commands

Install: yum install nginx

Check process: netstat -anput | grep nginx

View port usage: netstat -ntlp

Start: nginx

Reload (restart): nginx -s reload

Stop quickly: nginx -s stop

Graceful quit: nginx -s quit

Test configuration: nginx -t

Note: Changes to nginx.conf require a reload; changes to static files do not.

The article ends with a call for discussion, a promotion of a ChatGPT‑related community, and several marketing links for other resources.