\conf\nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8025;
server_name localhost;
# 根路径处理
location / {
root html;
index index.html index.htm;
# 单页应用路由支持(处理点击页面刷新,提示404的问题)
try_files $uri $uri/ /index.html;
# 禁用缓存
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
expires -1;
}
# 代理设置
# 处理跨域问题,Nginx 用的是 8025 端口,Tomcat 用的是 8080 端口,这就存在跨域的情况
# 前端请求:http://localhost:8025/api/users
# Nginx 转发:http://localhost:8080/users
location /api/ {
proxy_pass http://localhost:8080/;
# 设置用户客户端的请求头
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_set_header X-Forwarded-Proto $scheme;
}
# 错误页面处理
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
我来为您详细解析这个 Nginx 配置文件,我会从基础概念开始逐步讲解:
1. 全局配置部分
nginx
worker_processes 1;
-
作用:设置 Nginx 工作进程的数量
-
说明:数字 1 表示只启动 1 个 worker 进程。在生产环境中,通常设置为 CPU 核心数
nginx
events {
worker_connections 1024;
}
-
作用:配置事件处理模型和连接数限制
-
说明:每个 worker 进程最多可以同时处理 1024 个连接
2. HTTP 模块基础配置
nginx
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
-
include mime.types:引入 MIME 类型定义文件,让 Nginx 能识别不同文件扩展名的 Content-Type
-
default_type:当无法确定文件类型时,默认作为二进制流处理(浏览器会下载而非显示)
-
sendfile on:启用高效文件传输模式,提升静态文件传输性能
-
keepalive_timeout 65:保持客户端连接超时时间为 65 秒
3. Server 块配置
nginx
server {
listen 8025;
server_name localhost;
-
listen 8025:监听 8025 端口
-
server_name localhost:服务器名称为 localhost,匹配访问的域名
4. 主要 Location 块
根路径处理
nginx
location / {
root html;
index index.html index.htm;
# 单页应用路由支持
try_files $uri $uri/ /index.html;
# 禁用缓存配置
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
expires -1;
}
详细解释:
-
root html:网站根目录为 Nginx 安装目录下的
html文件夹 -
index:默认索引文件为 index.html 或 index.htm
-
try_files:解决前端路由刷新 404 问题的关键
-
$uri→ 尝试访问请求的文件 -
$uri/→ 尝试作为目录访问 -
/index.html→ 都失败则返回 index.html(前端路由接管)
-
-
缓存控制:完全禁用浏览器缓存,确保每次都是最新内容
API 代理配置
nginx
location /api/ {
proxy_pass http://localhost:8080/;
# 请求头传递
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_set_header X-Forwarded-Proto $scheme;
}
代理工作原理:
text
前端请求:http://localhost:8025/api/users Nginx 转发:http://localhost:8080/users
请求头作用:
-
Host $host:保持原始请求的 Host 头 -
X-Real-IP $remote_addr:传递客户端真实 IP -
X-Forwarded-For:记录请求经过的代理链 -
X-Forwarded-Proto:传递原始请求协议(http/https)
5. 错误页面配置
nginx
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
-
当出现 500、502、503、504 错误时,显示
html/50x.html页面
配置文件整体结构总结
text
nginx.conf
├── 全局配置 (worker_processes)
├── 事件配置 (events)
└── HTTP 配置 (http)
├── 基础设置 (MIME类型、传输优化等)
└── 虚拟主机 (server)
├── 监听配置 (listen, server_name)
├── 静态文件服务 (location /)
├── API 代理 (location /api/)
└── 错误页面处理
使用场景
这个配置非常适合:
-
前后端分离项目:前端使用 Vue/React/Angular 等框架
-
开发环境:解决跨域问题和前端路由问题
-
单页应用部署:确保路由刷新正常显示
增加超时设置,解决请求超过1分钟报错404的问题
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8025;
server_name localhost;
# 根路径处理
location / {
root html;
index index.html index.htm;
# 单页应用路由支持(处理点击页面刷新,提示404的问题)
try_files $uri $uri/ /index.html;
# 禁用缓存
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
expires -1;
}
# 代理设置
# 处理跨域问题,Nginx 用的是 8025 端口,Tomcat 用的是 8080 端口,这就存在跨域的情况
# 前端请求:http://localhost:8025/api/users
# Nginx 转发:http://localhost:8080/users
location /api/ {
proxy_pass http://localhost:8080/;
# 设置用户客户端的请求头
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_set_header X-Forwarded-Proto $scheme;
# 超时设置
proxy_connect_timeout 90s; # 连接后端服务器的超时时间
proxy_send_timeout 300s; # 向后端发送请求的超时时间
proxy_read_timeout 300s; # 从后端读取响应的超时时间
}
# 错误页面处理
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
增加 WebSocket 代理
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8025;
server_name localhost;
# 根路径处理
location / {
root html;
index index.html index.htm;
# 单页应用路由支持(处理点击页面刷新,提示404的问题)
try_files $uri $uri/ /index.html;
# 禁用缓存
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
expires -1;
}
# 代理设置
# 处理跨域问题,Nginx 用的是 8025 端口,Tomcat 用的是 8080 端口,这就存在跨域的情况
# 前端请求:http://localhost:8025/api/users
# Nginx 转发:http://localhost:8080/users
location /api/ {
proxy_pass http://localhost:8080/;
# 设置用户客户端的请求头
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_set_header X-Forwarded-Proto $scheme;
# 超时设置
proxy_connect_timeout 90s; # 连接后端服务器的超时时间
proxy_send_timeout 300s; # 向后端发送请求的超时时间
proxy_read_timeout 300s; # 从后端读取响应的超时时间
}
# WebSocket代理
location /ws/ {
# 保留 /ws/ 路径
proxy_pass http://localhost:8080/ws/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
# 移除Origin头,让后端认为是同源请求
proxy_set_header Origin "";
# 设置用户客户端的请求头
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Port $server_port;
# 超时设置
proxy_connect_timeout 60s; # 连接后端服务器的超时时间
proxy_read_timeout 60s; # 向后端发送请求的超时时间
proxy_send_timeout 60s; # 从后端读取响应的超时时间
# 禁用缓存
proxy_buffering off;
}
# 错误页面处理
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
650

被折叠的 条评论
为什么被折叠?



