Heroku部署React+Node.js全栈应用时后端服务无法运行问题求助

问题排查及解决方案 #

1. 修复前端请求地址配置 #

不要在axios请求中写死localhost:4000前缀，本地开发通过React代理实现请求转发，生产环境自动匹配域名：

• 在React项目根目录的package.json中新增配置项："proxy": "http://localhost:4000"
• 所有axios请求直接使用接口路径即可，示例：axios.post('/athletes/add', submitData)，本地开发时会自动转发到4000端口，生产环境会自动请求当前部署域名下的对应接口，无需额外修改前缀。

2. 配置Heroku启动规则 #

• 检查项目根目录package.json的scripts字段，确保start指令指向后端启动文件："start": "node backend/server.js"
• 新增build指令让Heroku部署时自动编译React静态资源："build": "react-scripts build"
• 确保后端代码端口监听使用环境变量，不要硬编码4000：

const port = process.env.PORT || 4000;
app.listen(port, () => console.log(`服务运行在端口${port}`));

3. 后端新增静态资源路由 #

在backend/server.js的所有接口路由之后添加如下配置，让后端服务可以直接托管编译后的React前端文件：

const path = require('path');

if(process.env.NODE_ENV === 'production') {
  // 指向React编译后的build目录
  app.use(express.static(path.join(__dirname, '../build')));
  // 所有前端路由 fallback 到index.html，支持前端路由的BrowserRouter模式
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../', 'build', 'index.html'));
  });
}

4. 验证数据库连接配置 #

不要在代码中硬编码MongoDB连接密钥，将连接串配置在Heroku应用的环境变量中，后端通过process.env.MONGODB_URI读取，本地开发可通过.env文件配置同名变量实现兼容。

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