MERN应用本地与Heroku正常，部署AWS ECS遇React Router及域名问题求助

问题描述 #

• MERN应用在本地、Heroku环境运行正常，部署至AWS ECS后，访问ELB（负载均衡器）域名时Chrome控制台抛出React Router错误，具体错误信息如下：

react-dom.production.min.js:189 Error
    at y (router.ts:5:20)
    at A (components.tsx:147:3)
    at El (react-dom.production.min.js:167:137)
    at Su (react-dom.production.min.js:290:337)
    at bs (react-dom.production.min.js:280:389)
    at gs (react-dom.production.min.js:280:320)
    at vs (react-dom.production.min.js:280:180)
    at os (react-dom.production.min.js:271:88)
    at as (react-dom.production.min.js:268:429)
    at k (scheduler.production.min.js:13:203)
di @ react-dom.production.min.js:189
n.callback @ react-dom.production.min.js:189
Ao @ react-dom.production.min.js:144
wu @ react-dom.production.min.js:262
bu @ react-dom.production.min.js:260
yu @ react-dom.production.min.js:259
(anonymous) @ react-dom.production.min.js:283
xs @ react-dom.production.min.js:281
as @ react-dom.production.min.js:270
k @ scheduler.production.min.js:13
O @ scheduler.production.min.js:14
router.ts:5 Uncaught Error
    at y (router.ts:5:20)
    at A (components.tsx:147:3)
    at El (react-dom.production.min.js:167:137)
    at Su (react-dom.production.min.js:290:337)
    at bs (react-dom.production.min.js:280:389)
    at gs (react-dom.production.min.js:280:320)
    at vs (react-dom.production.min.js:280:180)
    at os (react-dom.production.min.js:271:88)
    at as (react-dom.production.min.js:268:429)
    at k (scheduler.production.min.js:13:203)
y @ router.ts:5
A @ components.tsx:147
El @ react-dom.production.min.js:167
Su @ react-dom.production.min.js:290
bs @ react-dom.production.min.js:280
gs @ react-dom.production.min.js:280
vs @ react-dom.production.min.js:280
os @ react-dom.production.min.js:271
as @ react-dom.production.min.js:268
k @ scheduler.production.min.js:13
O @ scheduler.production.min.js:14

• 在Porkbun购买的域名已设置为ELB域名的别名，但访问该域名时提示“未注册网站”，推测问题与ELB配置或DNS解析相关。

诊断与修复方案 #

一、React Router错误修复 #

1. 匹配路由模式与服务器配置

   • 若前端使用BrowserRouter，后端服务器（如Express）必须配置所有非API请求转发到index.html，示例代码：

     const path = require('path');
     // 托管前端静态资源
     app.use(express.static(path.join(__dirname, 'client/build')));
     // 所有非API请求转发到index.html
     app.get('*', (req, res) => {
       res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
     });
     

   • 确认ECS容器中已正确构建前端代码，build目录存在且包含完整静态资源。

2. 校验ELB与ECS端口/健康检查配置

   • 确认ELB监听端口（通常80/443）与ECS任务定义中的容器端口一致，安全组允许对应端口的入站流量。
   • 检查ELB目标组的健康检查规则，确保能正确检测ECS容器状态，避免流量路由到未就绪的容器。

3. 验证前端环境变量

   • 确认前端构建时的API_BASE_URL等环境变量正确指向ECS部署的后端服务（或ELB域名），避免因API地址错误导致路由初始化失败。

二、域名解析问题修复 #

1. 检查DNS别名配置

   • 登录Porkbun后台，确认别名记录配置正确：
     • 应用负载均衡（ALB）用CNAME记录指向ALB完整域名；
     • 网络负载均衡（NLB）用A记录别名指向NLB的DNS名称。
   • 用nslookup或dig命令验证解析结果：

     nslookup your-domain.com
     

   • 等待DNS解析生效（通常1-5分钟，最长不超过24小时）。

2. 配置ELB HTTPS证书

   • 在AWS Certificate Manager（ACM）申请对应域名的SSL证书，并关联到ELB的HTTPS监听器，确保证书覆盖主域名及子域名（如有）。
   • 配置ELB监听器规则，将HTTP请求重定向到HTTPS（可选，避免协议不一致问题）。

3. 确认域名状态

   • 检查Porkbun后台域名的注册状态、DNS服务器配置，确保域名未过期、未被锁定。

三、额外排查步骤 #

• 查看ECS任务日志和CloudWatch日志，检查容器启动时的错误信息，确认后端服务是否正常启动。
• 直接访问ECS容器的私有IP+端口，验证服务是否正常响应，排除ELB层面的问题。
• 清除浏览器缓存或使用无痕模式访问，避免缓存导致的路由异常。

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