Master Nginx: From Basic Config to Advanced Optimizations

Introduction

For front‑end developers, understanding Nginx is essential; this article reorganizes the core concepts and guides you from the original nginx.conf to a practical, annotated version.

1. Original nginx.conf and Explanation

Shows the default configuration (118 lines) and then a cleaned version (22 lines) without comments.

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;
        }
    }
}

Annotated version

Provides comments explaining each directive, such as worker_processes, events block, http block, server block, and location blocks.

# Nginx worker processes, usually set to the number of CPU cores
worker_processes  1;
# events block start
events {
    # maximum connections per worker
    worker_connections  1024;
}
# HTTP server block for reverse‑proxy and load‑balancing
http {
    # import mime types
    include       mime.types;
    # default MIME type
    default_type  application/octet-stream;
    # enable efficient file transfer
    sendfile      on;
    # keep‑alive timeout in seconds
    keepalive_timeout  65;
    server {
        # listening port
        listen       80;
        # server name
        server_name  localhost;
        location / {
            root   html;  # document root
            index  index.html index.htm;  # default index files
        }
        # error page routing
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

2. Overall Understanding

The configuration is divided into three parts: global block, events block, and http block.

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

Events block – network connection settings (worker_connections, event model).

Http block – most frequent part, containing directives for proxy, cache, logging, and third‑party modules.

3. Quick Deployment

To launch a simple site, modify only two directives: set server_name and root, then point Nginx to the directory containing index.html.

4. Nginx Optimizations

1. Front‑end history mode 404 handling

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

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

2. Reverse proxy

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

Forwards requests beginning with /police/ to the backend service.

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;

Compresses responses to reduce bandwidth and improve load speed.

4. Maintenance page

# Uncomment to enable maintenance mode and restart Nginx
# rewrite ^(.*)$ /maintainace.html break;

5. Multiple sites on one IP

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

6. Static‑dynamic separation

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 ports: netstat -ntlp Start: nginx Reload: nginx -s reload Stop quickly: nginx -s stop Graceful quit: nginx -s quit Test config:

nginx -t

Note: After modifying nginx.conf you must reload Nginx; changing only static files does not require a restart.