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

沐土Arvin2025-04-03 8:58

1.什么是 Nginx？

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

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

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

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

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

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

3.基本使用场景 ★ 基础

  1. 作为静态文件服务器

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

示例配置：

javascript 复制代码 
server {
    listen       80;
    server_name  localhost;
    
    location / {
        root   /path/to/your/project;
        index  index.html;
    }
}
  1. 解决跨域问题（开发环境）

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

javascript 复制代码 
server {
    listen       80;
    server_name  localhost;
    
    location / {
        root   /path/to/your/project;
        index  index.html;
    }
    
    location /api/ {
        proxy_pass http://backend-server:port/;
    }
}
  1. 配置 HTTPS

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

javascript 复制代码 
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 核心配置 ★ 基础

一、基础结构

javascript 复制代码 
# 全局块（影响整个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. 静态资源服务
javascript 复制代码 
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;
        }
    }
}
  1. 反向代理
javascript 复制代码 
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;
}
  1. 负载均衡
javascript 复制代码 
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;
}
  1. HTTPS配置
javascript 复制代码 
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. 路径重写
javascript 复制代码 
location /old/ {
    rewrite ^/old/(.*)$ /new/$1 permanent; # 301重定向
}

# 条件重写
if ($http_user_agent ~* "bot") {
    rewrite ^(.*)$ /bot-page.html break;
}
  1. 访问控制
javascript 复制代码 
location /admin/ {
    allow 192.168.1.0/24;  # 允许内网IP
    deny all;               # 拒绝其他所有
    auth_basic "Restricted"; # 基础认证
    auth_basic_user_file /etc/nginx/.htpasswd;
}
  1. 性能优化
javascript 复制代码 
# 全局配置
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;
  1. 日志定制
javascript 复制代码 
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. 配置检查
javascript 复制代码 
nginx -t             # 测试配置文件语法
nginx -T             # 测试并打印有效配置
  1. 常用命令
javascript 复制代码 
nginx -s reload      # 平滑重载配置
nginx -s reopen      # 重新打开日志文件
kill -USR2 `cat /var/run/nginx.pid` # 热升级
  1. 变量参考
变量 说明
$host 请求的主机名
$request_uri 完整请求URI
$args 查询字符串
$http_user_agent 客户端UA信息
$upstream_response_time 后端响应时间

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

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

4.1、location 语法基础 ★ 重要

基本语法：

Erlang 复制代码 
location [修饰符] 匹配模式 {
    # 配置指令
}

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

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

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

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

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

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

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

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

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

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

  5. 最终回退 → 使用 location /

    javascript 复制代码 
    /* *
注意的是，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. 精确匹配 (=) ★ 重要
javascript 复制代码 
location = /exact/match {
    # 只有当请求URI完全等于"/exact/match"时才会匹配
}

特点：

  • 完全匹配时才生效

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

  • 效率最高

  1. 前缀匹配 (^~) ★ 重要
javascript 复制代码 
location ^~ /static/ {
    # 匹配以/static/开头的URI
}

特点：

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

  • 比正则匹配优先级高

  1. 正则匹配 (~ 和 ~*) ★ 重要
javascript 复制代码 
location ~ \.php$ {
    # 区分大小写的正则匹配.php结尾的URI
}

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

特点：

  • ~ 区分大小写

  • ~* 不区分大小写

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

  1. 普通前缀匹配 ★ 重要
javascript 复制代码 
location /prefix {
    # 匹配以/prefix开头的URI
}

特点：

  • 遵循最长匹配原则

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

  1. 通用匹配 (/) ★ 重要
javascript 复制代码 
location / {
    # 匹配所有请求
}

特点：

  • 最低优先级

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

4.4、匹配示例分析

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

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

问题背景 ：

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

Nginx 解决方案：

javascript 复制代码 
server {
    listen 80;
    server_name yourdomain.com;

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

原理：

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

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

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

问题背景 ：

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

Nginx 解决方案：

javascript 复制代码 
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 转发到后端服务

  • 负载均衡多台服务器

基础配置

javascript 复制代码 
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;
}

负载均衡示例

javascript 复制代码 
upstream backend {
    server 10.0.0.1:8000 weight=3;  # 权重3
    server 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访问支付宝的登录页面

    javascript 复制代码 
    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

javascript 复制代码 
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来获取变量

javascript 复制代码 
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参数来进行降级指向备用地址。

javascript 复制代码 
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

javascript 复制代码 
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;

  # 开启gzip
  gzip 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.ico
    location = /favicon.ico {
      log_not_found off;
      access_log off;
    }

    # robots.txt
    location = /robots.txt {
      log_not_found off;
      access_log off;
    }

    # 
    location ~* \.(png|jpe?g)$ {
      # Pass WebP support header to backend
      # 如果header头部中支持webp
      if ($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, media
    location ~* \.(?: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. 服务管理命令需管理员权限

相关推荐
littleplayer6 分钟前
iOS Swift Redux 架构详解
前端·设计模式·架构
工呈士11 分钟前
HTML 模板技术与服务端渲染
前端·html
皮实的芒果13 分钟前
前端实时通信方案对比：WebSocket vs SSE vs setInterval 轮询
前端·javascript·性能优化
鹿九巫13 分钟前
【CSS】层叠，优先级与继承（三）：超详细继承知识点
前端·css
爱编程的鱼13 分钟前
C# 结构（Struct）
开发语言·人工智能·算法·c#
奕云14 分钟前
react-redux源码分析
前端
咸鱼一号机15 分钟前
:global 是什么
前端
专业掘金15 分钟前
0425 手打基础丸
前端
五号厂房15 分钟前
Umi Max 如何灵活 配置多环境变量
前端
红尘散仙18 分钟前
六、WebGPU 基础入门——Vertex 缓冲区和 Index 缓冲区
前端·rust·gpu
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03我决定放弃搞 Java 了04✨分享我在飞书多维表格中使用DeepSeek的经历✨05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06苍穹外卖面试总结07Coze扣子平台完整体验和实践（附国内和国际版对比）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09DeepSeek各版本说明与优缺点分析10如何在WPS和Word/Excel中直接使用DeepSeek功能