CLOUD云枢在云服务器上同时部署 React 前端和 Node.js 后端，核心思路是构建分离、反向X_X统一入口。React 作为静态资源，Node.js 作为动态 API 服务，两者通过 Nginx（或 Caddy 等）进行流量分发。以下是基于生产环境的标准化实施方案：
1. 项目结构规划
建议采用前后端分离的目录结构，便于维护：
/home/project/
├── frontend/ # React 源码及构建产物
├── backend/ # Node.js 源代码
└── nginx.conf # 反向X_X配置2. 前端构建与部署
React 应用需要编译为静态文件（HTML/CSS/JS），不能直接运行源码。
- 本地构建：在项目根目录执行
npm run build（或yarn build），生成dist或build目录。 - 上传服务器：将构建后的静态文件上传至服务器的
/home/project/frontend/dist目录。 - 注意：若 React 使用了
create-react-app且开启了 Hash 路由，需确保 Nginx 配置支持 fallback，否则刷新页面会 404。
3. 后端启动方案
Node.js 服务通常使用 PM2 进程管理器来保证高可用和自动重启。
- 安装 PM2：
npm install -g pm2 - 启动服务：进入后端目录，执行
pm2 start server.js --name my-api（假设主入口为 server.js）。 - 守护进程：配置
pm2 startup并保存配置，确保服务器重启后服务自动拉起。 - 端口绑定：Node.js 服务监听本地端口（如
3000），不要直接绑定公网 IP，由 Nginx 转发即可。
4. Nginx 反向X_X配置
这是最关键的一步，Nginx 负责将用户的 HTTP 请求根据路径分发到前端静态文件或后端 API。
编辑 /etc/nginx/sites-available/default（具体路径视发行版而定）：
server {
listen 80;
server_name your-domain.com; # 替换为你的域名或服务器 IP
# 1. 前端静态资源处理
location / {
root /home/project/frontend/dist;
index index.html;
# 关键：SPA 路由回退处理，防止刷新 404
try_files $uri $uri/ /index.html;
}
# 2. 后端 API 接口转发
# 假设所有以 /api 开头的请求都转发给 Node.js
location /api {
proxy_pass http://127.0.0.1:3000; # 转发到本地 Node.js 端口
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
# 可选：设置超时时间，防止长连接断开
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
# 3. (可选) 其他静态资源或错误页配置
}生效配置：
执行 sudo nginx -t 检查语法，若无误则 sudo systemctl reload nginx。
5. 安全与优化建议
- HTTPS 加密：生产环境务必开启 HTTPS。可使用 Certbot (
acme.sh) 免费申请 Let’s Encrypt 证书，并在 Nginx 中配置 SSL 协议。 - 防火墙策略：云服务器安全组仅开放 80 (HTTP) 和 443 (HTTPS) 端口，禁止直接暴露 Node.js 的 3000 端口，避免外部直接访问后端逻辑。
- 环境变量：Node.js 代码中的数据库连接、密钥等敏感信息应通过
.env文件或系统环境变量注入，严禁硬编码在代码中提交至 Git。 - 日志管理：配置 Nginx 和 PM2 的日志轮转（logrotate），防止日志文件占用过多磁盘空间。
总结
该方案实现了“动静分离”：用户访问域名时，Nginx 智能判断路径，静态页面直接由 Nginx 高速返回，API 请求透明转发至 Node.js 进程。这种架构不仅性能优异，且易于扩展（例如后续将后端微服务化或引入 Redis 缓存）。