云服务器部署前后端分离项目 Nginx怎么配置
你在用云服务器部署前后端分离项目时，是否遇到过页面刷新404、API请求跨域、静态资源加载失败？这些问题根本不是代码的锅，而是Nginx配置没踩对坑。
作为每天处理几十个部署问题的技术顾问，我可以明确告诉你：90%的前端访问异常，都出在Nginx反向代理和location路径匹配规则上。下面这些配置细节，决定了你的项目是“一次上线，稳定运行”，还是“反复调试，夜不能寐”。
前后端分离项目的Nginx核心配置逻辑
-
2核4G ECS 高性价比服务器199元/年
立即抢购 →
适用于中小企业官网、电商展示、轻量数据分析等
-
2核2G e实例 云服务器99元/年
立即抢购 →
续费同价，适用于建站，小程序等应用场景
-
2核2G 轻量应用服务器68元/年
立即抢购 →
200M峰值带宽，40GB ESSD云盘
持续低价，让您的用云成本低廉、稳定可预期
前后端分离架构下，前端（Vue/React）和后端（Spring Boot/Node.js）分别独立部署。Nginx的核心任务有两个：
- 静态资源服务：直接响应前端打包后的、JS、CSS等文件
- 反向代理：将带
/api等前缀的请求，转发到后端服务所在端口 - 轻量2核2G4M 服务器99元/年（约8.25元/月）
立即抢购 →
服务器4M带宽，访问速度更快，适合流量稍大的网站
- 轻量2核4G5M 服务器188元/年（约15.67元/月）
立即抢购 →
服务器5M带宽 + 4G内存，性能均衡，适合中型应用
- 轻量2核4G6M 服务器199元/年（约16.58元/月）
立即抢购 →
服务器6M带宽 + 4G内存，高性价比选择
小贴士：云产品续费较贵，建议一次性购买3年或5年，性价比更高。
立即查看详细配置和优惠，为您的项目选择最佳服务器
点击了解更多优惠信息
很多人的配置一上来就错在根路径location /的处理上。
前端路由history模式下的404问题怎么破
Vue或React项目一旦启用history路由模式，刷新页面就会报404。这是因为服务器找不到对应的路径资源。
解决方案不是改回hash模式，而是让Nginx“兜底”：
location / {
root /usr/share/nginx/;
index index.;
try_files $uri $uri/ /index.;
}这行try_files是关键。它告诉Nginx：
- 先找有没有
$uri这个文件（比如/about） - 没有就找有没有
$uri/这个目录 - 都没有，就返回
/index.，交给前端路由处理
这才是真正的“单页应用”支持方案。你如果只配了root和index，刷新必挂。
API请求跨域？用Nginx反向代理彻底解决
开发环境靠前端配置proxy解决跨域，但生产环境必须用Nginx做统一代理入口。
假设你的后端服务运行在8080端口，前端通过/api前缀调用接口，标准配置如下：
location /api/ {
proxy_pass http://127.0.0.1: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_pass末尾的斜杠/：
- 有斜杠：
/api/user→http://127.0.0.1:8080/user（路径去掉/api） - 无斜杠：
/api/user→http://127.0.0.1:8080/api/user（保留完整路径）
大多数Spring Boot项目不需要/api前缀，所以必须加斜杠，否则404。
多前端项目共存的Nginx配置方案
如果你要在同一台云服务器部署多个前端项目（比如PC端、移动端、管理后台），不能简单用root指向一个目录。
正确做法是使用alias指令做路径映射：
location /admin/ {
alias /opt/project/admin/dist/;
index index.;
try_files $uri $uri/ /admin/index.;
}
location /mobile/ {
alias /opt/project/mobile/dist/;
index index.;
try_files $uri $uri/ /mobile/index.;
}这里的关键是：
alias会完全替换location匹配的路径try_files中的兜底路径要写完整子路径，比如/admin/index.
这种结构让你可以无限扩展子项目，而不需要开多个端口或买多台服务器。一台高配服务器就能扛住中小型业务流量，点击领取优惠，成本比分散部署低得多。
后端服务带context-path怎么办
有些Spring Boot项目在application.yml里配置了server.servlet.context-path=/prod，意味着所有接口都要加/prod前缀。
这时Nginx代理要明确传递路径：
location /api/ {
proxy_pass http://127.0.0.1:8080/prod/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}这样/api/login就会被转发到/prod/login，完美兼容。
如果你的后端用了Maven插件配置了<path>/survey</path>，处理方式也一样。关键是搞清后端实际暴露的访问路径，而不是盲目照搬教程。
HTTPS配置：Let's Encrypt免费证书实战
HTTP站点会被浏览器标记“不安全”，影响用户信任。必须上HTTPS。
使用Certbot申请Let's Encrypt免费证书，配置如下：
server {
listen 443 ssl;
server_name yourdomain.com;
ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
location / {
root /usr/share/nginx/;
try_files $uri $uri/ /index.;
}
location /api/ {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}再加一个80端口的重定向：
server {
listen 80;
server_name yourdomain.com;
return 301 https://$host$request_uri;
}这样所有HTTP请求都会自动跳转HTTPS，安全又省心。证书每90天自动续期，完全免费。
在上部署这套方案，网络质量稳定，DNS解析快，现在点击还能领新人优惠，性价比极高。
性能优化：超时设置与大文件上传
默认Nginx配置对大文件上传或慢接口不友好，容易504超时。
在location块中增加以下参数：
proxy_send_timeout 1800s;
proxy_read_timeout 1800s;
proxy_connect_timeout 30s;
client_max_body_size 2048m;这些参数的意义是：
proxy_send_timeout：后端接收数据超时时间proxy_read_timeout：后端响应数据超时时间proxy_connect_timeout：连接后端超时时间client_max_body_size：允许客户端上传的最大文件体积
特别是做文件上传、Excel导入等功能时，这些配置必不可少。别等线上出问题才想起来改。
部署流程标准化建议
一个高效的部署流程应该是：
- 前端执行
npm run build生成dist - 将dist打包上传到云服务器指定目录
- 解压并替换Nginx的目录
- 后端jar包通过
nohup java -jar后台运行 - 修改Nginx配置，
nginx -s reload重载生效
整个过程5分钟内完成。你不需要每次都手动传文件，可以用scp或rsync脚本自动化。一台配置得当的服务器，点这里查看最新活动，能让你的部署效率提升3倍以上。
FAQ
- Q：Nginx配置修改后不生效怎么办？
- A：先检查语法
nginx -t，再重载nginx -s reload。不要直接restart，避免服务中断。 - Q：前端能访问，但API提示404？
- A：90%是
proxy_pass末尾斜杠的问题。检查后端是否需要/api前缀，按需添加或删除斜杠。 - Q：如何让多个域名指向不同前端项目？
- A：用
server_name区分。配置多个server块，每个绑定不同域名，指向不同root目录即可。- Q：Nginx和后端服务必须在同一台服务器吗？
- A：不必。proxy_pass可以指向内网或外网IP，实现前后端物理分离。但同机房部署延迟更低，推荐初期用同一台云服务器。
- A：用