React+Node.js部署至Heroku：替换localhost URL适配生产环境

方案一：使用环境变量（最灵活，推荐） #

通过环境变量区分开发和生产环境的API地址，彻底避免硬编码localhost。

1. 前端本地配置
   在React项目根目录创建两个环境变量文件：

• .env.development（开发环境用）：

  REACT_APP_API_URL=http://localhost:5000
  

• .env.production（生产环境用）：

  REACT_APP_API_URL=https://your-heroku-app-name.herokuapp.com
  

  注意：React环境变量必须以REACT_APP_开头才会被识别。

2. 修改前端代码
   把所有硬编码的localhost:5000替换为process.env.REACT_APP_API_URL：

• API请求部分：

  const exampleRouter = axios.create({
    baseURL: `${process.env.REACT_APP_API_URL}/recipes/public`,
  });
  

• 图片加载部分：

  <img src={`${process.env.REACT_APP_API_URL}/users/${user._id}/avatar`} alt="avatar" />
  

3. Heroku生产环境配置
   登录Heroku控制台进入你的应用：

• 点击Settings -> 找到Config Vars区域
• 添加键值对：REACT_APP_API_URL = https://your-heroku-app-name.herokuapp.com
  或者用Heroku CLI执行命令：

heroku config:set REACT_APP_API_URL=https://your-heroku-app-name.herokuapp.com -a your-app-name

方案二：前后端同部署时用相对路径（简单高效） #

如果你的React前端构建文件和Node/Express后端部署在同一个Heroku应用里（即前后端共用一个域名），可以直接用相对路径，无需指定完整域名。

1. 后端配置静态文件
   在Express代码中，把React构建后的build文件夹设为静态资源目录：

const path = require('path');
// ...其他代码
app.use(express.static(path.join(__dirname, 'client/build')));

确保你的API路由（比如/recipes/public、/users/:id/avatar）正常注册。

2. 前端代码修改
   去掉所有域名前缀，直接用相对路径：

• API请求部分：

  const exampleRouter = axios.create({
    baseURL: '/recipes/public',
  });
  

• 图片加载部分：

  <img src={`/users/${user._id}/avatar`} alt="avatar" />
  

3. 开发环境代理配置
   为了让开发时前端能正常访问localhost的后端API，在React项目的package.json中添加proxy字段：

{
  "name": "your-react-app",
  "proxy": "http://localhost:5000",
  // ...其他配置
}

这样开发时，前端的相对路径请求会自动转发到http://localhost:5000。

方案三：后端返回完整图片URL（可选优化） #

如果后端负责存储和返回图片，可以在用户数据中直接返回对应环境的完整图片URL，前端直接使用即可，无需手动拼接。

比如后端返回的用户数据：

// 开发环境
{
  _id: "123",
  avatarUrl: "http://localhost:5000/users/123/avatar"
}
// 生产环境
{
  _id: "123",
  avatarUrl: "https://your-heroku-app-name.herokuapp.com/users/123/avatar"
}

前端直接用：

<img src={user.avatarUrl} alt="avatar" />

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