Nginx

配置

• nginx.conf

  /conf/nginx.conf

  http {
      include       mime.types;
      default_type  application/octet-stream;
      sendfile        on;
    	# 连接超时时间
      keepalive_timeout  65;
      # 上传文件大小限制
      client_max_body_size 300M;
  
      # 开启 Gzip 压缩
      gzip on;
      gzip_min_length 1k;
      gzip_buffers 4 16k;
      gzip_types text/plain application/json;
  
      # 文件缓存
      open_file_cache max=1000 inactive=20s;
      open_file_cache_valid 30s;
      open_file_cache_min_uses 2;
    
      # 引入自定义配置文件
      include app/*.conf;
      include enlin-blog/*.conf;
          
      # 自带的80代理
      server {
          listen 80 {}
  		}  
  }
  

• enln-blog/8800.conf

  /conf/enln-blog/8800.conf

  server {
    # 监听端口
    listen 8800;
  
    # 匹配客户端HTTP请求头中的 `Host` 字段（域名），有多个使用空格连接。
    server_name enlin-blog.forforio.cn;
  
    # 精确匹配
    location / {
      # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
      try_files $uri $uri/ @router;
      index index.html;
      root D:/WorkSpace/JAVA/enlin-personal/shiyi-blog/blog-web/dist;
    }
  
    # 同时有两个前端（基于location）
    location /admin {
      # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
      try_files $uri $uri/ @router;
      index index.html;
      # 只有一个前端可以使用 `root`，其他要使用 `alias`
      alias D:/WorkSpace/JAVA/enlin-personal/shiyi-blog/blog-admin/dist;
    }
  
    # 对应上面的@router，（直接刷新页面会404）主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    # 因此需要rewrite到/index.html中，然后交给路由在处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }
  
    # 后端的api
    location /api {
      proxy_pass http://127.0.0.1:8700/api;
      proxy_set_header HOST $host;  # 不改变源请求头的值
      proxy_pass_request_body on;  #开启获取请求体（默认on）
      proxy_pass_request_headers on;  #开启获取请求头（默认on）
      proxy_set_header X-Real-IP $remote_addr;   # 记录真实发出请求的客户端IP
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  #记录代理信息
      proxy_set_header X-Forwarded-Proto $scheme; # 记录客户端使用的协议(http/https)
    }
  
    # 服务端错误配置 重定向到 `/50x.html`
    error_page 500 502 503 504 /50x.html;
    # error_log "D:/Program Files/nginx-1.22.1/logs/"enlin-blog.log error;
    # `=` 精确匹配 `/50x.html`
    location = /50x.html {
      root html; # 在nginx安装目录的html文件夹中查找并拼接路由 /html/50x.html
    }
  
    # 防止访问敏感文件
    location ~ /\. {
      deny all;
    }
  
  }
  

root 和 alias 的区别

root 的工作方式：

location /error {
    root /path/to/files;
}

# 客户端请求：/error/50x.html
# 实际文件：/path/to/files/error/50x.html
#                        ↑ 在root路径后添加完整的location路径

alias 的工作方式：

location /error {
    alias /path/to/files/;
}

# 客户端请求：/error/50x.html
# 实际文件：/path/to/files/50x.html
#                        ↑ 用alias路径替换location路径

location 结尾有无斜杠的区别

1. 结尾有斜杠 /static/ （推荐 静态资源目录 使用此方式）

location /static/ {
    alias /var/www/files/;
}

匹配规则：

• ✅ 匹配：/static/image.jpg
• ✅ 匹配：/static/css/style.css
• ❌ 不匹配：/static（缺少结尾斜杠）

2. 结尾没有斜杠 /admin （推荐 后端API 及 前端打包产物 使用此方式）

location /admin {
    alias D:/path/to/admin/dist/;
}

匹配规则：

• ✅ 匹配：/admin
• ✅ 匹配：/admin/login
• ✅ 匹配：/admin/

rewrite

上方配置中，不管是 根路径前端 还是 admin前端 出现了路由错误，都会进入到根路径的 /index.html 页面内，这显然是不太合适的：

location @router {
    rewrite ^.*$ /index.html last;  # 总是重写到根目录的index.html
}

实际效果：

情况1：用户访问 /admin/users（Vue路由）
→ try_files 找不到文件 → @router
→ 重写到 /index.html
→ 返回的是根目录前端应用的index.html，而不是admin的！

修复方案：

方案1：分别处理不同的路由（推荐）

# 移除 @router，分别在各location中处理
location / {
    root D:/WorkSpace/JAVA/enlin-personal/shiyi-blog/blog-web/dist;
    try_files $uri $uri/ /index.html;
}

location /admin {
    alias D:/WorkSpace/JAVA/enlin-personal/shiyi-blog/blog-admin/dist/;
    try_files $uri $uri/ /admin/index.html;
}

方案2：在 @router 中区分路径

location @router {
    # 根据请求路径判断应该重写到哪个index.html
    if ($request_uri ~ ^/admin) {
        rewrite ^ /admin/index.html last;
    }
    rewrite ^ /index.html last;
}

常用命令

检查配置

nginx -t

启动

Windows

nginx.exe

或

@echo off
chcp 65001 >nul
cd /d "D:\Program Files\nginx-1.28.0\"

echo 正在启动 nginx...
start "" /MIN nginx.exe

timeout /t 2 /nobreak >nul
echo 启动成功！
timeout /t 1 /nobreak >nul

Linux

systemctl start nginx

重启

nginx -s reload

停止

• 优雅停止：1. 停止接受新连接 2. 等待现有连接处理完成 3. 退出进程

  nginx -s quit
  

• 强制停止：立即终止所有进程，不等待连接处理完成

  nginx -s stop
  

链接

使用nginx部署多个前端项目（三种方式）