AWS ALB搭配ECS使用返回空白页仅显示react app如何排查解决

AI 小北

2026-10-14

故障排查及解决方案

前置排查：打开浏览器控制台（F12）切换到「网络」标签页，刷新页面查看js/css等静态资源的请求状态，可快速定位具体故障点。

静态资源路径转发规则缺失
React打包后所有js、css、图片等静态资源默认存放在/static路径下，若你的ALB侦听器仅配置了根路径/转发到ECS目标组，没有匹配其他路径的规则，静态资源请求会被ALB拦截返回404，最终仅根HTML加载成功（显示"react app"字样）、页面空白。
解决方法：在ALB侦听器配置中新增规则，将/static/*路径请求转发到ECS目标组，或直接配置默认规则将所有路径请求都转发到对应目标组。
React应用homepage配置错误
如果你的package.json中homepage字段写死为EC2实例IP，打包后静态资源的引用路径会固定指向EC2 IP，访问ALB域名时浏览器会跨域请求EC2 IP的资源，若EC2安全组未开放公网访问就会导致资源加载失败。
解决方法：将package.json的homepage字段修改为相对路径"."，或直接填写你的ALB域名，重新打包镜像部署即可。
ALB空闲超时配置过短
若React应用打包后静态资源体积较大，ALB默认60秒的空闲超时不足以完成资源传输，会中断请求导致资源加载失败。
解决方法：进入ALB属性配置页，将空闲超时调整到120秒或更长，匹配你的资源实际加载耗时。
安全组规则限制
检查ALB安全组的出站规则，是否仅开放了健康检查端口的访问权限，未放行80/443端口到ECS实例所在安全组的请求，会导致静态资源请求被安全组拦截。
解决方法：调整ALB安全组出站规则，允许对应业务端口的流量转发到ECS目标组。
混合内容拦截
若你为ALB配置了HTTPS证书，用HTTPS协议访问ALB，但React应用内静态资源是硬编码的HTTP路径，会触发浏览器的混合内容安全策略，拦截资源请求。
解决方法：将React应用内所有静态资源引用改为相对路径，或配置环境变量根据部署环境自动适配HTTP/HTTPS协议。