如何部署搭配json-server的Reactjs项目至GitHub Pages与Vercel

1. 先确认 Render 上的 json-server 能正常访问 #

部署到 Render 后，json-server 会分配一个公开域名（比如 https://your-json-server.onrender.com）。先手动访问这个域名拼接接口路径（比如 /posts），确认数据能正常返回。如果访问失败：

• 检查 Render 的启动命令是否为 json-server --watch data.js --port $PORT（Render 强制要求用环境变量指定端口）
• 确认 data.js 格式正确，必须是导出包含数据集的对象，比如 module.exports = { posts: [...] }

2. 修正 React 项目的 API 请求路径 #

绝对不能用本地的 http://localhost:3000 作为生产环境的 API 地址，必须替换成 Render 上的公开域名。推荐用环境变量管理：

• 开发环境：在项目根目录创建 .env.development，写入 REACT_APP_API_URL=http://localhost:3000
• 生产环境：创建 .env.production，写入 REACT_APP_API_URL=https://your-json-server.onrender.com
• 代码里请求数据时，用 ${process.env.REACT_APP_API_URL}/xxx 拼接路径，比如 fetch(${process.env.REACT_APP_API_URL}/posts)

3. GitHub Pages 部署的额外配置 #

• 在 package.json 里添加 "homepage": "https://你的GitHub用户名.github.io/仓库名"，避免路由和资源路径错误
• 安装 gh-pages 依赖：npm install gh-pages --save-dev，然后在 package.json 的 scripts 里新增：

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

• 运行 npm run deploy 完成部署，注意 GitHub Pages 是静态托管，所有 API 请求必须指向 Render 的 json-server

4. Vercel 部署的额外配置 #

• Vercel 会自动识别 Create React App 项目，直接上传代码即可
• 在 Vercel 项目的「Settings → Environment Variables」里添加 REACT_APP_API_URL，值为 Render 的 json-server 地址
• 部署后打开浏览器控制台，查看 Network 标签的请求状态，如果有 404/CORS 错误，对应调整

5. 解决 CORS 跨域问题 #

如果浏览器控制台报 CORS 错误：

• 修改 Render 的启动命令为 json-server --watch data.js --port $PORT --cors
• 或者在 data.js 同目录创建 json-server.json 配置文件：

  {
    "cors": true
  }
  

• 重新部署 Render 上的 json-server 即可

6. 验证流程 #

1. 本地先测生产构建：设置好 .env.production，运行 npm run build，然后用 serve -s build 启动静态服务，确认 API 请求正常
2. 推送修改后的 React 代码到仓库，触发 GitHub Pages/Vercel 重新部署
3. 部署完成后，检查浏览器控制台的 Network 请求，根据错误信息调整

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