Nginx

配置

提示

所有的 server{} 都是在 http{} 里面的。

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

}

vue-chat/4421.conf（静态资源缓存）

/conf/vue-chat/4421.conf
server {
    listen 4421;

    # 定义资源根目录
    root D:/WorkSpace/TypeScript/vue-chat/dist;

    # 静态资源缓存 - 放在 `/` 前面
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1d;
        add_header Cache-Control "public";
        # root 已经在上层定义了
    }

    location / {
        # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        try_files $uri $uri/ @router;
        index index.html;
        # root 已经在上层定义了
    }

    # 对应上面的@router，（直接刷新页面会404）主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    # 因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }

    error_page   500 502 503 504  /50x.html;
    # error_log "D:\Program Files\nginx-1.28.0\logs\"enlin-blog.log error;
    location = /50x.html {
        root html;
    }

}

HTTPS

证书

参考：Let's Encrypt

nginx.conf

提示

listen 端口号 ssl，即为使用https监听。

/conf/nginx.conf
# http 重定向到 https
server {
  listen       80;
  server_name yu.forforio.cn;

  # 重定向到 HTTPS
  location / {
    return 301 https://$server_name$request_uri;
  }

  #error_page  404              /404.html;
  # redirect server error pages to the static page /50x.html
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
  }

}

# HTTPS 服务器
server {
  listen 443 ssl;
  server_name yu.forforio.cn localhost;

  # SSL 证书
  ssl_certificate     "D:/Program Files/nginx-1.28.0/ssl/yu.forforio.cn.crt";
  ssl_certificate_key "D:/Program Files/nginx-1.28.0/ssl/yu.forforio.cn.key";

  # SSL 配置
  ssl_protocols               TLSv1.2 TLSv1.3;
  ssl_ciphers                 HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers   on;
  ssl_session_cache           shared:SSL:10m;
  ssl_session_timeout         10m;

  # 安全头部
  ## 强制浏览器在指定时间内（max-age=31536000 秒 = 1年）只能通过 HTTPS 访问该网站;该规则也适用于所有子域名
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
  ## 只允许同源页面将本网站嵌入 iframe
  add_header X-Frame-Options "SAMEORIGIN" always;
  ## 强制浏览器严格按照服务器声明的 Content-Type 来解析资源
  add_header X-Content-Type-Options "nosniff" always;

  # 你的网站配置
  location / {
    root html;
    index index.html index.htm;
  }
}

本地http-公网https

警告

http 和 https 不能监听同一个端口，例如标准端口号 80(http) 和 443(https)。

见下方示例 4425(http) 和 4426(https)，本地访问时可以http，使用域名公网访问时必须https：

/conf/enlin-docs/4425.conf
# HTTP（本地）服务器
server {
	# 使用
	listen 4425;
	server_name localhost 127.0.0.1;
	
	# 定义资源根目录
	root D:/WorkSpace/Others/enlin-docs/docs/.vuepress/dist;

	# 网站配置...这里同上方 vue-chat/4421.conf 中的网站配置部分

}

# HTTP（公网域名）重定向到 HTTPS
server {
	# 使用
	listen 4425;
	server_name yu.forforio.cn;

	# 重定向到https(host后面添加端口是因为http和https不能监听同一个端口)
	return 301 https://$host:4426$request_uri;
}

# HTTPS（所有域名） 服务器
server {
	# 使用
	listen 4426 ssl;
	server_name yu.forforio.cn, localhost;
	
	# SSL 证书
	ssl_certificate     "D:/Program Files/nginx-1.28.0/ssl/yu.forforio.cn.crt";
	ssl_certificate_key "D:/Program Files/nginx-1.28.0/ssl/yu.forforio.cn.key";
        
	# SSL 配置
	ssl_protocols TLSv1.2 TLSv1.3;
	ssl_ciphers HIGH:!aNULL:!MD5;
	ssl_prefer_server_ciphers on;
	ssl_session_cache shared:SSL:10m;
	ssl_session_timeout 10m;
	
	# 安全头部
	add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
	add_header X-Frame-Options "SAMEORIGIN" always;
	add_header X-Content-Type-Options "nosniff" always;

	# 定义资源根目录
	root D:/WorkSpace/Others/enlin-docs/docs/.vuepress/dist;

	# 网站配置...这里同上方 vue-chat/4421.conf 中的网站配置部分

}

filebrowser

推荐使用

`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` 结尾有无斜杠的区别

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

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

匹配规则：

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

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

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

匹配规则：

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

提示

记忆点

静态资源：是一个目录，明确语义，通常明确访问 目录下 的具体文件。
API路径：用户可能希望不管访问 /api 还是 /api/ ，接口都应该正常工作。

`rewrite`

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

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

last 与其他标志的对比

提示

标志	含义	后续动作
`last`	停止当前处理，重新开始location匹配	重新走完整的nginx处理流程
`break`	停止当前处理，在当前location内继续	不会重新匹配location
`redirect`	返回302临时重定向	客户端重新发起请求
`permanent`	返回301永久重定向	客户端重新发起请求

实际效果：

情况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 通过 server_name 来区分同一个端口上的不同网站/服务：

/conf/nginx.conf
# 同一个 80 端口，三个不同的虚拟主机
server {
    listen 80;
    server_name api.example.com;
    # API 服务配置
}

server {
    listen 80;
    server_name blog.example.com;
    # 博客配置
}

server {
    listen 80;
    server_name admin.example.com;
    # 后台管理配置
}

常用命令

检查配置

nginx -t

提示

失败时会显示错误位置和原因。

启动

Windows

nginx.exe

或

使用 bat 批处理脚本

@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

提示

开机自启：Win + R 键入 shell:startup ，将批处理文件放到自启文件夹内。

Linux

systemctl start nginx

重启

nginx -s reload

停止

优雅停止：1. 停止接受新连接 2. 等待现有连接处理完成 3. 退出进程
```
nginx -s quit
```
强制停止：立即终止所有进程，不等待连接处理完成
```
nginx -s stop
```

链接

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