轻量服务器部署React应用：前后端分离的实战指南

你是不是也和我一样，写完一个漂亮的前端页面，心里美滋滋，结果一到部署环节就懵了？尤其是当你用 React 做了个前后端分离的项目，后端 API 跑在某个端口，前端又跑在另一个端口，本地开发没问题，但一上线就各种跨域、404、资源加载失败……简直让人头大。

别急，今天我就手把手带你把 React 应用稳稳当当地部署到一台轻量服务器上，实现真正的前后端分离，并且告诉你怎么避免那些常见的“坑”。整个过程不整虚的，全是实打实的操作步骤，哪怕你是第一次部署，也能照着做成功。

为什么选择轻量服务器？

首先得说清楚，为啥不用虚拟主机或者共享空间？因为那玩意儿压根不适合跑 Node.js 后端或部署前端构建产物。而云服务器（ECS）虽然功能强大，但对于个人项目、小团队或者刚入门的开发者来说，配置复杂、价格偏高，有点“杀鸡用牛刀”了。

这时候，轻量应用服务器（Lighthouse）就显得特别香了。它预装了常用的运行环境（比如 Node.js、Nginx、Docker），一键部署，管理界面简洁，最重要的是——便宜！对于测试项目、个人博客、小型企业官网这类需求，完全够用。

我自己现在用的就是阿里云的轻量服务器，2核2G配置，一个月几十块，学生还能打折，性价比直接拉满。如果你还没买，强烈建议先去领个阿里云优惠券，新用户首单能省不少钱，别白白错过这个羊毛！

前后端分离到底分了个啥？

很多新手对“前后端分离”这五个字理解得有点模糊，以为只要前端用 React、后端用 Spring Boot 就叫分离了。其实核心在于：前后端独立开发、独立部署、通过接口通信。

举个例子：你在本地开发时，React 项目跑在 http://localhost:3000，后端 API 跑在 http://localhost:5000。前端通过 axios 请求后端接口获取数据。这种模式下，前端只管页面渲染和交互，后端只管数据处理和逻辑，互不干扰。

但一旦上线，问题就来了：用户访问你的网站，总不能让他们同时开两个地址吧？所以我们需要让前端静态资源通过 Nginx 托管，统一走 80 端口，而后端服务继续跑在某个端口（比如 5000），由 Nginx 来代理 API 请求，实现“看起来是一个网站”的效果。

部署前的准备工作

在动手之前，先把东西准备好，不然做到一半发现少个文件，那就尴尬了。

1. 本地项目结构整理

确保你的 React 项目能正常运行，执行 npm run build 后生成 build 文件夹。这个文件夹就是你要部署的“前端产物”。

后端项目也要能独立启动，建议用 pm2 或 forever 来守护进程，避免 SSH 断开后服务挂掉。

2. 服务器环境准备

登录你的轻量服务器后台，选择操作系统。推荐 Ubuntu 20.04 或 22.04，软件生态成熟，教程多。

连接服务器可以用终端（Mac/Linux）或 PuTTY（Windows），输入命令：

ssh root@你的服务器IP

首次登录会提示改密码，记得设个强一点的。

3. 安装必要软件

登录后第一件事，更新系统：

sudo apt update && sudo apt upgrade -y

然后安装 Node.js 和 Nginx：

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt install nginx -y

安装完检查一下版本：

node -v
nginx -v

看到版本号就说明装好了。

部署前端：把 React 打包文件扔给 Nginx

前端部署是最简单的一步。我们只需要把 build 文件夹里的内容复制到 Nginx 的默认目录下就行了。

先上传文件。你可以用 scp 命令从本地传过去：

scp -r build/ root@你的服务器IP:/var/www/html/

如果没有 /var/www/html 目录，先创建：

sudo mkdir -p /var/www/html

上传完成后，重启 Nginx：

sudo systemctl restart nginx

现在打开浏览器，输入你的服务器公网 IP，应该就能看到你的 React 页面了！如果看不到，检查防火墙是否开放了 80 端口（轻量服务器后台一般默认开了）。

部署后端：让 API 服务一直跑着

前端搞定了，接下来是后端。假设你的后端是 Node.js 写的，监听在 5000 端口。

先把后端代码传到服务器，比如放到 /root/my-api 目录下。

进入目录，安装依赖：

cd /root/my-api
npm install

然后用 pm2 启动服务：

npm install -g pm2
pm2 start app.js --name "my-api"

app.js 是你的入口文件，名字根据实际情况改。

用 pm2 list 可以查看服务状态，绿色表示运行中。以后就算你关了 SSH，服务也不会停。

配置 Nginx 反向代理，解决跨域问题

现在前端能访问了，后端服务也在跑，但你在页面上请求 API 还是会报错，原因是你现在访问的是 http://你的IP，而 API 地址是 http://你的IP:5000，属于不同源，浏览器拦了。

解决办法：用 Nginx 做反向代理，把所有 /api 开头的请求转发到后端服务。

编辑 Nginx 配置文件：

sudo nano /etc/nginx/sites-available/default

找到 server { ... } 块，在里面添加：

location /api {
    proxy_pass http://localhost:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    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_cache_bypass $http_upgrade;
}

保存退出（Ctrl+O → Enter → Ctrl+X）。

然后测试配置是否正确：

sudo nginx -t

如果显示 “syntax is ok”，就可以重启 Nginx 了：

sudo systemctl restart nginx

现在，前端请求 /api/users，实际上会被 Nginx 转发到 http://localhost:5000/api/users，完美避开跨域问题。

绑定域名，让网站更专业

用 IP 访问总归不太体面，而且难记。建议花几十块买个域名，比如 yourname.top 这种便宜的。

在域名服务商那里，把 A 记录指向你的服务器公网 IP。

然后回到 Nginx 配置，修改 server_name：

server_name yourdomain.com www.yourdomain.com;

重启 Nginx，等 DNS 生效后，你就能用域名访问网站了。

顺带一提，HTTPS 也很重要。可以用 Let’s Encrypt 免费申请 SSL 证书，配合 Certbot 自动配置，安全又免费，这里就不展开讲了，下次单独写一篇。

常见问题 & 小贴士

Q：为什么前端刷新页面出现 404？
A：React Router 是单页应用，除了首页，其他路由在服务器上并不存在。解决方法是在 Nginx 配置中加一条：

location / {
    try_files $uri $uri/ /index.html;
}

这样所有未知路径都会返回 index.html，交给前端路由处理。

Q：后端服务总是自动退出？
A：一定是没用进程守护工具！记住，永远不要用 node app.js 直接跑，要用 pm2 或 systemd。

Q：上传文件太慢？
A：可以考虑用宝塔面板，图形化操作更友好，适合不想敲命令的新手。

部署没那么难，关键是要动手

你看，整个部署流程其实就四步：准备代码 → 上传前端 → 启动后端 → 配置代理。每一步都不复杂，关键是敢去试。

很多人卡在“我以为很难”这一步，结果连服务器都没开过。其实只要你按这篇文章一步步来，不出两小时，你的 React 应用就能跑在公网上，朋友随便一搜就能访问。

最后再提醒一次：如果你正打算买服务器，别忘了先领个阿里云优惠券，能省则省，毕竟咱们程序员也是要精打细算过日子的嘛！

希望这篇文章能帮你少走弯路。如果觉得有用，欢迎分享给身边正在被部署折磨的朋友。