现在位置: 首页 / 优惠教程 / HTTPS部署 / 正文

云服务器部署前后端分离项目 Nginx怎么配置

  • 服务器优惠
  • 优惠教程
  • 14热度

你在用云服务器部署前后端分离项目时，是否遇到过页面刷新404、API请求跨域、静态资源加载失败？这些问题根本不是代码的锅，而是Nginx配置没踩对坑。

作为每天处理几十个部署问题的技术顾问，我可以明确告诉你：90%的前端访问异常，都出在Nginx反向代理和location路径匹配规则上。下面这些配置细节，决定了你的项目是“一次上线，稳定运行”，还是“反复调试，夜不能寐”。

前后端分离项目的Nginx核心配置逻辑

前后端分离架构下，前端（Vue/React）和后端（Spring Boot/Node.js）分别独立部署。Nginx的核心任务有两个：

  • 静态资源服务：直接响应前端打包后的、JS、CSS等文件
  • 反向代理：将带/api等前缀的请求，转发到后端服务所在端口

很多人的配置一上来就错在根路径location /的处理上。

前端路由history模式下的404问题怎么破

Vue或React项目一旦启用history路由模式，刷新页面就会报404。这是因为服务器找不到对应的路径资源。

解决方案不是改回hash模式，而是让Nginx“兜底”：

location / {
    root   /usr/share/nginx/;
    index  index.;
    try_files $uri $uri/ /index.;
}

这行try_files是关键。它告诉Nginx：

  1. 先找有没有$uri这个文件（比如/about）
  2. 没有就找有没有$uri/这个目录
  3. 都没有，就返回/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导入等功能时，这些配置必不可少。别等线上出问题才想起来改。

部署流程标准化建议

一个高效的部署流程应该是：

  1. 前端执行npm run build生成dist
  2. 将dist打包上传到云服务器指定目录
  3. 解压并替换Nginx的目录
  4. 后端jar包通过nohup java -jar后台运行
  5. 修改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，实现前后端物理分离。但同机房部署延迟更低，推荐初期用同一台云服务器。