如何在GitHub Pages部署带ExpressJS代理服务器的React应用

首先明确：GitHub Pages仅支持静态资源托管，无法运行Express这类Node.js服务器，所以没法直接把后端代理部署到GitHub Pages。下面是两种可行的部署方案：

方案一：前后端分开部署 #

1. 部署Express后端到Node.js托管平台 #

选择支持Node.js的平台（如Render、Heroku、Fly.io等），以Render为例：

• 将根目录的Express代码推送到一个独立的GitHub仓库
• 登录Render，新建「Web Service」，关联该仓库
• 配置启动命令为npm start，如果项目有环境变量（如数据库连接字符串），在Render的环境变量面板中添加
• 部署完成后，获取服务器的公网域名（如https://your-express-server.onrender.com）

2. 部署React前端到GitHub Pages #

• 进入client目录，修改package.json：
  • 添加"homepage": "https://你的GitHub用户名.github.io/仓库名"
  • 修改API请求地址：把前端代码中所有/api/xxx的请求，替换为https://your-express-server.onrender.com/api/xxx
• 安装部署依赖：npm install gh-pages --save-dev
• 在client/package.json中添加脚本：

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  

• 执行部署命令：npm run deploy

关键配置：解决跨域 #

在Express后端中安装并配置CORS，避免前端请求被浏览器拦截：

npm install cors

在服务器入口文件中添加：

const cors = require('cors');
app.use(cors());

方案二：前后端一起部署到全栈平台 #

如果不想分开部署，可选择Vercel、Netlify这类支持全栈部署的平台，以Vercel为例：

• 在项目根目录创建vercel.json配置文件：

  {
    "buildCommand": "npm run build",
    "routes": [
      { "src": "/api/(.*)", "dest": "/api/$1" },
      { "src": "/(.*)", "dest": "/client/build/$1" }
    ]
  }
  

• 在根目录的package.json中添加构建脚本：

  "scripts": {
    "build": "cd client && npm install && npm run build",
    "start": "node server.js" // 你的Express启动命令
  }
  

• 将整个项目推送到GitHub仓库，登录Vercel并关联该仓库，一键完成部署。Vercel会自动处理后端API路由和前端静态资源的托管。

注意事项 #

• 本地开发时的proxy字段（在client/package.json中）仅在开发环境生效，生产环境必须使用后端的真实公网地址
• 如果使用免费托管平台，部分平台会有休眠机制（如Render的免费实例15分钟无请求会休眠），首次请求会有延迟

内容的提问来源于stack exchange，提问作者lamsmallsmall