AWS ELB无法暴露EC2上部署的Spring Boot与React双服务

核心问题 #

你当前的配置有三个致命错误，直接导致路径无法正常路由：

• 路径规则完全配反：ALB路径匹配遵循最长前缀优先原则，你把根路径/映射到8080端口的Spring Boot、仅把/index.html映射到3000端口的React，相当于除了精确匹配/index.html的请求外，所有其他请求（包括React依赖的/static/*.js、/static/*.css等静态资源，以及前端路由路径）全被转发到了Spring Boot服务，自然无法正常加载前端。
• 目标组端口大概率配置错误：两个目标组虽然都指向同一台EC2，但必须分别绑定对应服务的监听端口，很多人配置时会给两个目标组都选默认的80端口，请求根本打不到3000或8080端口的对应服务上。
• 未考虑单页应用的路由特性：React是单页应用，除了根路径外所有前端子路由（比如/home、/setting）都需要fallback到index.html解析，单条/index.html的规则完全覆盖不了这些场景。

正确配置步骤 #

1. 先校准两个目标组配置
   • 后端目标组（对应Spring Boot）：目标类型选实例，HTTP协议，端口填8080，健康检查路径填一个你服务确定能返回200的接口（比如/v1/api/ping，开了actuator就填/v1/api/actuator/health），将EC2实例注册到该组，等控制台显示目标健康检查通过再继续。
   • 前端目标组（对应React）：目标类型选实例，HTTP协议，端口填3000，健康检查路径填/，将同一台EC2实例注册到该组，同样等健康检查通过。
2. 配置ALB监听器规则
   打开ALB对应的80端口（需要HTTPS就同步配置443端口）监听器，按优先级从高到低添加规则，ALB会按顺序匹配规则，匹配到即转发不再向下判断：
   • 优先级1（最高）：路径匹配/v1/api/*，转发到Spring Boot对应的8080目标组。这里默认不需要修改路径转发规则，ALB会把完整的/v1/api/xxx路径原样传给后端，和你Spring Boot的接口前缀刚好匹配。如果后续需要调整对外API路径，比如对外暴露为/api/*，再加路径重写规则，将/api/(.*)替换为/v1/api/$1转发即可。
   • 优先级2：路径匹配/*，转发到React对应的3000目标组。不需要单独配置/index.html规则，React服务收到根路径请求会默认返回index.html，所有静态资源、前端路由请求都会落到这条规则，不会串到后端服务。
3. 修复React路由刷新404问题
   如果你用了react-router做前端路由，直接刷新子路由页面会返回404，需要给前端服务配置路由fallback：生产环境不要直接用npm start跑React服务，先执行npm run build打包静态资源，用Nginx托管打包后的文件，在Nginx配置里加一行try_files $uri $uri/ /index.html;即可将所有前端路径重定向到index.html解析。如果是开发环境临时测试，给webpack devServer开启historyApiFallback: true配置就行。
4. 检查安全组规则
   确保EC2实例的安全组入站规则，放通ALB所属安全组对8080、3000端口的访问，不需要对公网开放这两个端口，所有外部流量统一走ALB即可。

验证方法 #

配置完成后等待1分钟左右让规则生效，直接访问ALB的公网DNS域名：

• 访问根路径能正常加载React首页，静态资源没有404
• 调用/v1/api/前缀的接口能正常拿到Spring Boot的返回结果
• 跳转前端子路由、手动刷新子路由页面不会出现404

内容的提问来源于stack exchange，提问作者Tuhin Subhra Mandal