Nginx 核心配置详解与性能优化最佳实践

1.什么是 Nginx？

Nginx 是一个高性能的 Web 服务器和反向代理服务器。它轻量、高效，被广泛用于现代 Web 开发中。

2.为什么前端需要了解 Nginx？ ★ 了解

1. 本地开发：可以模拟生产环境

2. 部署前端项目：作为静态文件服务器

3. 解决跨域问题：配置代理

4. 性能优化：启用压缩、缓存等

3.基本使用场景  ★ 基础

1. 作为静态文件服务器

这是最简单的用法，用来托管你的 HTML、CSS、JS 等静态文件。

示例配置：

server {listen       80;server_name  localhost;location / {root   /path/to/your/project;index  index.html;}
}

2. 解决跨域问题（开发环境）

在开发时，前端经常需要请求后端 API，可能会遇到跨域问题。Nginx 可以配置代理：

server {listen       80;server_name  localhost;location / {root   /path/to/your/project;index  index.html;}location /api/ {proxy_pass http://backend-server:port/;}
}

3. 配置 HTTPS

现代网站基本都使用 HTTPS，Nginx 可以轻松配置：

server {listen       443 ssl;server_name  yourdomain.com;ssl_certificate     /path/to/cert.pem;ssl_certificate_key /path/to/key.pem;location / {root   /path/to/your/project;index  index.html;}
}

4.Nginx 核心配置 ★ 基础

一、基础结构

# 全局块（影响整个Nginx运行的配置）
user nginx;                      # 运行用户
worker_processes auto;           # 工作进程数（通常设为CPU核心数）
error_log /var/log/nginx/error.log warn; # 错误日志路径和级别# 事件块（连接处理配置）
events {worker_connections 1024;     # 每个worker的最大连接数use epoll;                   # Linux高性能事件模型
}# HTTP块（核心配置区域）
http {include /etc/nginx/mime.types; # 文件扩展名与MIME类型映射default_type application/octet-stream; # 默认MIME类型# 其他HTTP全局配置...# Server块（虚拟主机配置）server {listen 80;              # 监听端口server_name example.com; # 域名# Location块（URI路由配置）location / {root /var/www/html; # 根目录index index.html;    # 默认文件}}
}

二、核心功能配置

1. 静态资源服务

server {location /static/ {alias /data/static/;    # 路径映射（注意末尾斜线）expires 30d;            # 缓存时间access_log off;         # 关闭访问日志}location ~* \.(jpg|png|gif)$ {root /data/images;# 图片防盗链valid_referers none blocked *.example.com;if ($invalid_referer) {return 403;}}
}

2. 反向代理

location /api/ {proxy_pass http://backend_server/; # 末尾斜线会去除/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_connect_timeout 75s;proxy_read_timeout 300s;# 缓冲区优化proxy_buffer_size 4k;proxy_buffers 8 16k;
}

3. 负载均衡

upstream backend {least_conn;                # 最少连接算法server 10.0.0.1:8080 weight=5;server 10.0.0.2:8080;server backup.example.com:8080 backup;# 健康检查（需nginx-plus或第三方模块）# health_check interval=5s;
}

4. HTTPS配置

server {listen 443 ssl http2;server_name example.com;ssl_certificate /etc/ssl/certs/example.com.crt;ssl_certificate_key /etc/ssl/private/example.com.key;# 安全增强配置ssl_protocols TLSv1.2 TLSv1.3;ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';ssl_prefer_server_ciphers on;ssl_session_cache shared:SSL:10m;ssl_session_timeout 10m;# HSTS头（强制HTTPS）add_header Strict-Transport-Security "max-age=63072000" always;
}

三、高级配置技巧

1. 路径重写

location /old/ {rewrite ^/old/(.*)$ /new/$1 permanent; # 301重定向
}# 条件重写
if ($http_user_agent ~* "bot") {rewrite ^(.*)$ /bot-page.html break;
}

2. 访问控制

location /admin/ {allow 192.168.1.0/24;  # 允许内网IPdeny all;               # 拒绝其他所有auth_basic "Restricted"; # 基础认证auth_basic_user_file /etc/nginx/.htpasswd;
}

3. 性能优化

# 全局配置
sendfile on;               # 零拷贝传输
tcp_nopush on;             # 优化数据包发送
keepalive_timeout 65;      # 长连接超时# Gzip压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1k;
gzip_comp_level 6;

4. 日志定制

log_format main '$remote_addr - $remote_user [$time_local] ''"$request" $status $body_bytes_sent ''"$http_referer" "$http_user_agent"';access_log /var/log/nginx/access.log main buffer=32k flush=5m;

四、调试与维护

1. 配置检查

nginx -t             # 测试配置文件语法
nginx -T             # 测试并打印有效配置

2. 常用命令

nginx -s reload      # 平滑重载配置
nginx -s reopen      # 重新打开日志文件
kill -USR2 `cat /var/run/nginx.pid` # 热升级

3. 变量参考

变量	说明
$host	请求的主机名
$request_uri	完整请求URI
$args	查询字符串
$http_user_agent	客户端UA信息
$upstream_response_time	后端响应时间

5.Nginx location 匹配规则详解  ★ 重要

location 指令是 Nginx 配置中最核心的部分之一，它决定了如何处理不同的 URI 请求。下面我将全面讲解 location 的匹配规则和使用方法。

4.1、location 语法基础   ★ 重要

基本语法：

location [修饰符] 匹配模式 {# 配置指令
}

4.2、匹配规则优先级   ★ 重要

Nginx 的 location 匹配遵循以下优先级顺序：

匹配类型	符号	优先级	匹配规则	是否继续搜索其他 location
精确匹配	=	1	URI 必须完全一致	❌ 立即停止
前缀优先匹配	^~	2	URI 以指定模式开头（最长匹配原则）	❌ 不再检查正则
正则匹配	~	3	区分大小写的正则匹配（按配置文件顺序）	✔️ 按顺序继续
正则匹配	~*	3	不区分大小写的正则匹配（按配置文件顺序）	✔️ 按顺序继续
普通前缀匹配	无符号	4	URI 以指定模式开头（遵循最长匹配原则）	✔️ 会继续检查正则
通用匹配	/	5	匹配所有请求	❌ 最终兜底

🔍 匹配流程说明（重点）   ★ 重要

1. 先检查精确匹配 (=) → 命中则立即停止

2. 检查所有普通前缀匹配 → 记录最长匹配项

   • 如果最长匹配有 ^~ → 直接使用，停止搜索

   • 否则暂存这个结果，继续后续检查

3. 按顺序检查正则匹配 (~/~*) → 第一个命中的正则立即生效

4. 如果前面都未命中 → 使用之前暂存的普通前缀匹配

5. 最终回退 → 使用 location /

   /* *
   注意的是，nginx的匹配优先顺序按照上面的顺序进行优先匹配，而且注意的是一旦某一个匹配命/中直接退出，不再进行往下的匹配剩下的普通匹配会按照最长匹配长度优先级来匹配，就是谁匹配的越多就用谁 
   */
   server {# 1. 精确匹配（最高优先级）location = /login {return 401 "请先登录";}# 2. 前缀优先匹配（第二优先级）location ^~ /static/ {root /data;}# 3. 正则匹配（第三优先级）location ~ /user/\d+ {proxy_pass http://backend;}# 4. 普通前缀匹配（第四优先级）location /documents/ {alias /docs/;}# 5. 通用匹配（最低优先级）location / {try_files $uri $uri/ =404;}
   }

4.3、匹配类型详解   ★ 重要

1. 精确匹配 (=)   ★ 重要

location = /exact/match {# 只有当请求URI完全等于"/exact/match"时才会匹配
}

特点：

• 完全匹配时才生效

• 匹配成功后立即停止搜索其他location

• 效率最高

2. 前缀匹配 (^~)   ★ 重要

location ^~ /static/ {# 匹配以/static/开头的URI
}

特点：

• 匹配前缀后不再检查正则表达式

• 比正则匹配优先级高

3. 正则匹配 (~ 和 ~*)   ★ 重要

location ~ \.php$ {# 区分大小写的正则匹配.php结尾的URI
}location ~* \.(jpg|png|gif)$ {# 不区分大小写的正则匹配图片文件
}

特点：

• ~ 区分大小写

• ~* 不区分大小写

• 按配置文件中出现的顺序匹配

4. 普通前缀匹配   ★ 重要

location /prefix {# 匹配以/prefix开头的URI
}

特点：

• 遵循最长匹配原则

• 如果最长匹配不是^~或=，还会检查正则匹配

5. 通用匹配 (/)   ★ 重要

location / {# 匹配所有请求
}

特点：

• 最低优先级

• 当没有其他location匹配时使用

4.4、匹配示例分析

server {location = / {# 精确匹配首页}location ^~ /images/ {# 匹配/images/下的所有文件}location ~* \.(gif|jpg|jpeg)$ {# 匹配所有图片文件}location /documents/ {# 匹配/documents/下的文件}location / {# 通用匹配}
}

6.History 模式（前端路由支持）   ★ 重要

问题背景：
Vue/React 等 SPA 项目使用 history.pushState 时，刷新页面会导致 404（因为服务器没有对应的真实路径）。

Nginx 解决方案：

server {listen 80;server_name yourdomain.com;location / {root   /path/to/your/spa;index  index.html;# 关键配置：所有非静态文件请求都返回 index.htmltry_files $uri $uri/ /index.html;}
}

原理：

• try_files 会按顺序检查请求路径是否存在

• 如果都不存在，最终返回 /index.html，由前端处理路由

7.跨域处理（CORS）   ★ 重要

问题背景：
前端访问不同域名/端口的 API 时，浏览器会阻止请求。

Nginx 解决方案：

location /api/ {# 代理到真实后端proxy_pass http://backend-server:8080/;# 添加跨域头add_header 'Access-Control-Allow-Origin' '$http_origin';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization';add_header 'Access-Control-Allow-Credentials' 'true';# 预检请求处理if ($request_method = 'OPTIONS') {return 204;}
}

8.缓存控制   ★ 重要

1. 静态资源缓存

2. 禁用缓存（适合 HTML 文件）

3. 代理缓存（反向代理场景）

9.反向代理   ★ 重要

典型场景：

• 前端请求 /api 转发到后端服务

• 负载均衡多台服务器

基础配置

location /api/ {proxy_pass http://backend-server:8080/;  # 末尾/会去除/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_connect_timeout 60s;proxy_read_timeout 60s;
}

负载均衡示例

upstream backend {server 10.0.0.1:8000 weight=3;  # 权重3server 10.0.0.2:8000;server 10.0.0.3:8000 backup;    # 备用服务器
}location / {proxy_pass http://backend;
}

10.关键点总结

功能	核心指令/配置	注意事项
History模式	try_files $uri $uri/ /index.html	需要前端路由配合
跨域	add_header 'Access-Control-*'	复杂请求需处理 OPTIONS 预检
缓存	expires + Cache-Control	静态/动态资源策略不同
反向代理	proxy_pass + proxy_set_header	注意路径末尾/是否保留前缀

实际使用时，建议通过 nginx -t 测试配置后再重载服务。

11.以目录去区分多个history单文件   ★ 重要

因为不可能每一个项目开启一个域名，仅仅指向通过增加路径来划分多个网站，比如：

1. www.taobao.com/tmall/login访问天猫的登录页面

2. www.taobao.com/alipay/login访问支付宝的登录页面

   server {listen 80;server_name taobao.com;index index.html index.htm;# 通过正则来匹配捕获 [tmall|alipay]中间的这个路径location ~ ^/([^\/]+)/(.*)$ {try_files $uri $uri/ /$1/dist/index.html =404;}
   }

12.负载均衡   ★ 重要

基于upstream做负载均衡,中间会涉及一些相关的策略比如ip_hash、weight

upstream backserver{ # 哈希算法，自动定位到该服务器 保证唯一ip定位到同一部机器 用于解决session登录态的问题ip_hash; server 127.0.0.1:9090 down; (down 表示单前的server暂时不参与负载) server 127.0.0.1:8080 weight=2; (weight 默认为1.weight越大，负载的权重就越大) server 127.0.0.1:6060; server 127.0.0.1:7070 backup; (其它所有的非backup机器down或者忙的时候，请求backup机器) 
}

13.灰度部署   ★ 重要

如何根据headers头部来进行灰度，下面的例子是用cookie来设置,如何获取头部值在nginx中可以通过$http_xxx来获取变量

upstream stable {server xxx max_fails=1 fail_timeout=60;server xxx max_fails=1 fail_timeout=60;}
upstream canara {server xxx max_fails=1 fail_timeout=60;
}server {listen 80;server_name  xxx;# 设置默认set $group "stable";# 根据cookie头部设置接入的服务if ($http_cookie ~* "tts_version_id=canara"){set $group canara;}if ($http_cookie ~* "tts_version_id=stable"){set $group stable;}location / {proxy_pass http://$group;proxy_set_header   Host             $host;proxy_set_header   X-Real-IP        $remote_addr;proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;index  index.html index.htm;}
}

14.优雅降级   ★ 重要

常用于ssr的node服务挂了返回500错误码然后降级到csr的cos桶或者nginx中,优雅降级主要用error_page参数来进行降级指向备用地址。

upstream ssr {server xxx max_fails=1 fail_timeout=60;server xxx max_fails=1 fail_timeout=60;}
upstream csr {server xxx max_fails=1 fail_timeout=60;server xxx max_fails=1 fail_timeout=60;
}location ^~ /ssr/ {proxy_pass http://ssr;# 开启自定义错误捕获 如果这里不设置为on的话 会走向nginx处理的默认错误页面proxy_intercept_errors on;# 捕获500系列错误 如果500错误的话降级为下面的csr渲染error_page 500 501 502 503 504 = @csr_location# error_page 500 501 502 503 504 = 200 @csr_location# 注意这上面的区别 等号前面没有200 表示 最终返回的状态码已 @csr_location为准 加了200的话表示不管@csr_location返回啥都返回200状态码
}location @csr_location {# 这时候地址还是带着/ssr/的要去除rewrite ^/ssr/(.*)$ /$1 break;proxy_pass http://csr;rewrite_log on;
}

15.webp根据浏览器自动降级为png   ★ 重要

这套方案不像常见的由nginx把png转为webp的方案，而是先经由图床系统（node服务）上传两份图片:

1. 一份是原图png

2. 一份是png压缩为webp的图片（使用的是imagemin-webp）

然后通过nginx检测头部是否支持webp来返回webp图片，不支持的话就返回原图即可。这其中还做了错误拦截，如果cos桶丢失webp图片及时浏览器支持webp也要降级为png

http {include       /etc/nginx/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"''"$proxy_host" "$upstream_addr"';access_log  /var/log/nginx/access.log  main;sendfile        on;keepalive_timeout  65;# 开启gzipgzip on;gzip_vary on;gzip_proxied any;gzip_comp_level 6;gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;# 负载均衡 这里可以是多个cos桶地址即可upstream static_env {server xxx;server xxx;}# map 设置变量映射 第一个变量指的是要通过映射的key值 Accpet 第二个值的是变量别名map $http_accept $webp_suffix {# 默认为 空字符串default   "";# 正则匹配如果Accep含有webp字段 设置为.webp值"~*webp"  ".webp";}server {listen 8888;absolute_redirect off;    #取消绝对路径的重定向#网站主页路径。此路径仅供参考，具体请您按照实际目录操作。root /usr/share/nginx/html;location / {index index.html index.htm;proxy_set_header Host $host;try_files $uri $uri/ /index.html;add_header Cache-Control 'no-cache, max-age=0';}# favicon.icolocation = /favicon.ico {log_not_found off;access_log off;}# robots.txtlocation = /robots.txt {log_not_found off;access_log off;}# location ~* \.(png|jpe?g)$ {# Pass WebP support header to backend# 如果header头部中支持webpif ($webp_suffix ~* webp) {# 先尝试找是否有webp格式图片rewrite ^/(.*)\.(png|jpe?g)$ /$1.webp break;# 找不到的话 这里捕获404错误 返回原始错误 注意这里的=号 代表最终返回的是@static_img的状态吗error_page 404 = @static_img;}proxy_intercept_errors on;add_header Vary Accept;proxy_pass http://static_env;proxy_set_header Host $http_host;expires 7d;access_log off;}location @static_img {#set $complete $schema $server_addr $request_uri;rewrite ^/.+$ $request_uri break;proxy_pass http://static_env;proxy_set_header Host $http_host;expires 7d;}# assets, medialocation ~* \.(?:css(\.map)?|js(\.map)?|gif|svg|jfif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {proxy_pass http://static_env;proxy_set_header Host $http_host;expires 7d;access_log off;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}}
}

16.nginx常用指令   ★ 基础

Nginx 主程序参数

指令	说明	示例
nginx -h	显示帮助信息	nginx.exe -h
nginx -v	显示版本信息	nginx.exe -v
nginx -V	显示版本和配置参数	nginx.exe -V
nginx -t	测试配置文件语法	nginx.exe -t
nginx -T	测试配置并打印有效配置	nginx.exe -T
nginx -q	测试配置时不显示非错误信息	nginx.exe -t -q
nginx -s	发送信号到主进程	nginx.exe -s reload
nginx -p	设置前缀路径	nginx.exe -p "C:\nginx"
nginx -c	指定配置文件	nginx.exe -c "conf\my.conf"
nginx -g	设置全局指令	nginx.exe -g "pid logs/nginx.pid;"

进程管理信号（-s 参数）

信号	说明	示例
stop	立即停止	nginx.exe -s stop
quit	优雅停止	nginx.exe -s quit
reload	重载配置	nginx.exe -s reload
reopen	重新打开日志	nginx.exe -s reopen

Windows 实用命令

命令	说明	示例
taskkill /f /im nginx.exe	强制终止所有 Nginx 进程	-
tasklist | findstr nginx	检查 Nginx 进程	-
sc create nginx binPath= "C:\nginx\nginx.exe"	创建 Windows 服务	-
net start nginx	启动 Nginx 服务	-
net stop nginx	停止 Nginx 服务	-

环境管理命令

命令	说明
set NGINX_HOME=C:\nginx	设置环境变量
path %path%;%NGINX_HOME%	添加 PATH

调试命令

命令	说明
nginx -t 2>error.log	输出错误到日志
nginx -e logs/error.log	指定错误日志路径

注：

1. 所有命令需在 CMD 中执行

2. 建议在 Nginx 安装目录下操作

3. 修改配置后务必测试语法：nginx -t

4. 服务管理命令需管理员权限