如何将包含服务端与客户端的React项目部署到Ubuntu 24.04生产服务器？

嘿，我来帮你搞定这个部署问题！针对你这种前后端分离的React项目，部署到Ubuntu 24.04生产服务器可以按下面的步骤一步步来，操作起来其实挺顺畅的：

1. 先把服务器的基础环境搭好 #

• 安装Node.js和npm：前后端都依赖Node环境，推荐用nvm来管理版本，避免系统级安装的麻烦：

  # 安装nvm
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  # 重启终端后，安装长期支持版Node.js
  nvm install --lts
  # 验证安装成功
  node -v && npm -v
  

• 安装Nginx：用来处理静态文件和反向代理API请求，是生产环境的标配：

  sudo apt update && sudo apt install nginx
  # 启动Nginx并设置开机自启
  sudo systemctl start nginx
  sudo systemctl enable nginx
  

2. 把项目传到服务器上 #

你可以选两种方式：

• 如果项目托管在Git仓库（比如GitHub），直接在服务器上克隆：

  git clone 你的项目仓库地址
  cd 项目文件夹
  

• 如果是本地项目文件，用scp传输：

  scp -r 本地项目的完整路径 服务器用户名@服务器IP:/服务器上的目标路径
  

3. 配置并启动服务端 #

• 进入服务端目录，安装依赖：

  cd server
  npm install
  

• 生产环境配置：别忘把数据库连接改成你生产服务器的数据库地址，还有端口、密钥这些敏感信息，建议放在.env文件里：

  # server/.env示例
  PORT=5000
  DB_URI=你的生产数据库连接字符串
  JWT_SECRET=你的加密密钥
  

• 用PM2管理服务端进程：生产环境不能直接用node index.js启动，一旦终端关闭服务就停了，PM2能帮你后台运行进程，还能自动重启：

  # 全局安装PM2
  npm install -g pm2
  # 启动服务端，给进程起个名字方便管理
  pm2 start index.js --name "my-server"
  # 设置PM2开机自启，跟着提示执行生成的命令就行
  pm2 startup ubuntu
  pm2 save  # 保存当前进程列表
  

  你可以用pm2 status查看进程状态，pm2 logs my-server看日志。

4. 构建并部署客户端 #

• 进入客户端目录，安装依赖：

  cd ../client
  npm install
  

• 修改API请求地址：把客户端里原来指向localhost:5000的API请求，改成相对路径（比如/api/xxx），后面靠Nginx代理转发，这样更安全也更灵活。
• 构建生产版本：生成静态资源文件夹build：

  npm run build
  

• 把静态文件放到Nginx目录：

  sudo cp -r build/* /var/www/html/
  

5. 配置Nginx反向代理 #

这一步是关键，让Nginx同时处理客户端静态文件和服务端API请求：

• 创建新的Nginx站点配置：

  sudo nano /etc/nginx/sites-available/my-react-app
  

  粘贴下面的配置，记得替换你的服务器IP或域名：

  server {
      listen 80;
      server_name 你的服务器IP或域名;
  
      # 托管客户端静态文件
      root /var/www/html;
      index index.html;
  
      # React单页应用必备，解决刷新页面404的问题
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      # 把/api开头的请求转发到服务端
      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;
      }
  }
  

• 启用这个站点并重启Nginx：

  # 创建软链接到启用目录
  sudo ln -s /etc/nginx/sites-available/my-react-app /etc/nginx/sites-enabled/
  # 检查配置是否有错误
  sudo nginx -t
  # 重启Nginx生效
  sudo systemctl restart nginx
  

6. 最后测试访问 #

直接在浏览器输入你的服务器IP或域名，应该就能看到你的React应用了，而且API请求也能正常转发到服务端。

额外注意事项 #

• 防火墙设置：Ubuntu 24.04默认用ufw防火墙，记得开放80端口（HTTP），如果要加HTTPS还要开放443：

  sudo ufw allow 80/tcp
  sudo ufw allow 443/tcp
  sudo ufw enable  # 没启用的话执行这个
  

• HTTPS配置：如果需要加密访问，可以用Certbot免费申请Let's Encrypt证书：

  sudo apt install certbot python3-certbot-nginx
  sudo certbot --nginx
  

  跟着提示操作，Certbot会自动帮你配置HTTPS和HTTP转HTTPS的重定向。

备注：内容来源于stack exchange，提问作者user26587345