React全栈应用Heroku部署后前端无法访问问题求助

核心原因 #

你的后端服务未正确托管React构建后的静态文件，也未处理单页应用(SPA)的路由 fallback，导致根路径/返回404，但已配置的API路由可正常工作。

具体解决步骤 #

1. 配置后端托管静态文件 #

如果使用Express框架，需添加静态文件中间件，指向React的build文件夹，注意路径要匹配Heroku上的项目结构：

const express = require('express');
const path = require('path');
const app = express();

// 托管React构建后的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 你的API路由（如/api/persons）需放在静态文件配置之后
app.get('/api/persons', (req, res) => {
  // 你的API逻辑代码
});

2. 添加SPA路由Fallback #

React作为单页应用，所有非API的请求都应返回build/index.html，否则直接访问根路径或刷新页面会出现404。此路由必须放在所有API路由之后：

// 所有非API请求都返回React的入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

3. 确认Heroku上存在build文件夹 #

• 通过Heroku CLI查看项目文件结构，验证build文件夹是否存在：

  heroku run ls -la
  

• 若build文件夹未提交到Git，Heroku部署时会缺失，可通过两种方式解决：
  • 本地执行npm run build后，将build文件夹添加到Git并提交；
  • 在后端项目的package.json中添加构建脚本，让Heroku自动完成构建：

    "scripts": {
      "start": "node index.js",
      "heroku-postbuild": "npm run build"
    }
    

4. 检查端口与Homepage配置 #

• 后端必须监听Heroku分配的PORT环境变量：

  const PORT = process.env.PORT || 3001;
  app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
  });
  

• 在React项目的package.json中添加homepage配置，避免资源路径错误：

  "homepage": "."
  

验证 #

修改代码后重新部署到Heroku，访问根路径https://jovelapp2.herokuapp.com，即可正常加载React前端。

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