React+Express项目从Heroku迁移部署AWS Amplify后后端请求失效

根本原因 #

你当前的配置仅完成了前端静态资源的构建与托管，没有部署和启动Express后端服务。Heroku的Procfile会自动启动你配置的Node.js服务进程，但AWS Amplify默认的前端托管模式仅提供静态资源分发能力，不会主动运行后端服务，因此所有接口请求都无法找到对应服务端响应。

解决方案 #

提供两种适配不同场景的可选方案：

方案1：前后端分离部署（生产环境优先推荐） #

该方案架构更稳定，扩展性更强，符合AWS云原生最佳实践：

1. 部署后端服务：将Express代码单独部署到AWS App Runner（操作门槛最低的Node.js服务托管方案）：
   • 关联后端代码仓库，配置构建命令为npm install，启动命令为npm start，设置服务监听端口与你代码中配置的端口一致
   • 部署完成后记录App Runner分配的后端服务域名
2. 修改前端配置：将前端所有接口请求的baseURL替换为上一步获取的后端域名
3. 配置CORS：在Express服务中新增CORS规则，允许你的Amplify前端域名跨域访问，示例代码：

   const cors = require('cors');
   app.use(cors({
     origin: 'https://你的Amplify前端域名',
     credentials: true
   }));
   

4. 重新构建前端：推送修改后的前端代码触发Amplify自动构建，部署完成后接口即可正常访问。

方案2：迁移后端到Amplify Functions（快速测试场景） #

如果不需要单独维护后端服务，可以将Express逻辑迁移到Amplify提供的Serverless函数中：

1. 项目根目录执行amplify add function，选择Express服务模板
2. 将原有Express业务逻辑迁移到生成的函数目录中
3. 执行amplify push部署函数，获取函数调用地址
4. 前端接口请求地址替换为函数地址即可正常访问。

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