前后端分离部署到一台 ECS：Nginx 反向代理这么配

前后端分离的项目，开发时前端跑在 5173、后端跑在 3000，各管各的。一上线就不能这么干了：用户只认一个域名，总不能让他自己拼端口。Nginx 在这时当“前台”，把根路径的请求发给前端静态文件、把 /api 开头的请求转发给后端服务，对外只暴露一个地址。这篇文章用一个部署到单台云服务器的例子，把这套反向代理配置讲清楚（云服务器以华为云 ECS 为例，具体购买以官网为准）。

一、为什么需要反向代理而不是让用户记两个端口

让用户访问 example.com:3000 拿数据、example.com:5173 看页面，既难记又别扭，还暴露后端端口、不利于做统一的安全策略（HTTPS、限流都在 Nginx 一层做）。反向代理的思路是：Nginx 对外只开 80/443，根据路径把流量分给后面的不同服务。用户无感，运维也能在入口统一管控。

“反向”是说代理在服务器端、对用户透明；用户以为全程在跟 Nginx 通信，实际后端是谁、在哪台机器，他不用关心。

二、整体拓扑

一台 ECS 上同时跑着：Nginx（监听 80）、前端静态文件（构建产物）、后端服务（监听 3000）。请求进来先到 Nginx，它按规则分流：

用户浏览器
   │  http://域名/
   ▼
【Nginx :80】
   ├── /           → 前端静态文件 (dist/)
   └── /api/*      → 后端服务 http://127.0.0.1:3000

前端构建出来的 dist/ 目录直接由 Nginx 读文件返回，不走后端；只有带 /api 的请求才转发给后端进程。

三、Nginx 配置怎么写

核心是一个 server 块：用 root 指向前端产物目录、location / 兜底返首页（支持前端路由刷新不 404），location /api 用 proxy_pass 转发到后端。

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/dist;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

try_files $uri $uri/ /index.html 很关键：用户直接访问 /about 这种前端路由地址时，Nginx 先找对应文件，找不到就返 index.html 交给前端路由处理，避免刷新子页 404。proxy_pass 末尾的 / 表示把 /api/ 这个前缀去掉再转发，后端收到的是干净路径。

四、部署到一台 ECS 的步骤

把前端产物和后端程序传到云服务器（ECS，弹性云服务器，提供可按需使用的计算实例），安装 Nginx，把上面的配置放到 sites-enabled 并重启 Nginx 生效。后端服务用进程管理器（如 systemd）拉起，保证退出能自动重启。涉及具体规格、镜像、计费以华为云官方文档为准，本文不展开购买细节。

前端构建产物是纯静态文件，Nginx 直接读盘返回，性能很好；后端只处理 /api，压力也集中可观测。

五、几个容易踩的坑

第一，proxy_pass 末尾有没有 / 语义不同：有 / 会剥离匹配到的前缀，没有则把完整路径转发，配错后端就 404。第二，前端路由刷新 404 几乎都是忘了 try_files 兜底。第三，跨域问题在反向代理下通常不用前端处理——因为浏览器看来前后端同源（都走 Nginx 的域名），/api 由 Nginx 代转，不存在跨域。第四，上生产记得在 Nginx 配 HTTPS，别明文跑 80。

六、总结

Nginx 反向代理把“一个域名、两种服务”这件事做成标准动作：静态文件直接返、动态请求代转。和之前用 Docker Compose 一把拉起前后端不同，这一篇是“裸机 + Nginx”的部署路线，更贴近真实上云。理解了 location 分流和 try_files 兜底，单台服务器托管前后端分离项目就只是写一份配置的事。ECS 等云资源的规格与购买以官网文档为准。