配置ELB与目标组转发80至4173后，EC2上React应用无法访问如何解决

第一步：先排查EC2实例本身的可访问性 #

先跳过ELB，直接测试EC2的公网IP+4173是否能访问：

• 如果直接访问http://<EC2公网IP>:4173也打不开，问题出在EC2内部或安全组：
  1. 检查React应用的绑定地址
     开发环境下，React/Vite默认绑定127.0.0.1，仅允许本地访问。需要修改启动配置：
     • 启动命令加参数：npm run dev -- --host 0.0.0.0
     • 或者在vite.config.js中配置：

       export default defineConfig({
         server: {
           host: '0.0.0.0',
           port: 4173
         }
       })
       

     生产构建后用serve托管的话，启动命令加--listen 0.0.0.0:4173。
     验证：在EC2内部执行curl http://<EC2私有IP>:4173，如果能返回页面内容，说明绑定正确。
  2. 检查EC2安全组规则
     确保EC2的安全组入站规则允许：
     • 来源为ELB的安全组（推荐），协议TCP，端口4173
     • 或者临时允许0.0.0.0/0访问TCP 4173（测试用，后续再收紧）

第二步：排查ELB及目标组配置 #

如果EC2公网IP+4173能正常访问，再检查ELB相关配置：

1. ELB安全组规则
   确认ELB的安全组入站规则允许0.0.0.0/0访问HTTP 80端口；出站规则允许访问目标组的4173端口（或所有端口）。
2. 目标组健康检查细节
   虽然显示健康，但确认：
   • 健康检查的端口是4173，协议为HTTP
   • 健康检查路径是应用存在的路径（比如/或/health），且返回200状态码
   • 健康检查的超时时间、间隔是否合理（比如超时5秒，间隔10秒）
3. ELB监听规则
   确认默认规则确实是将HTTP 80的请求转发到目标组，没有其他优先级更高的规则（比如路径匹配规则）覆盖默认配置。
4. VPC网络ACL（如果使用）
   检查VPC的网络ACL：
   • 入站规则允许HTTP 80（来自0.0.0.0/0）和TCP 4173（来自ELB的IP范围）
   • 出站规则允许所有TCP回包（比如端口范围1024-65535）

第三步：验证ELB转发逻辑 #

在EC2上抓包验证ELB的请求是否到达：

• 安装tcpdump：sudo yum install tcpdump -y（Amazon Linux）或sudo apt install tcpdump -y（Ubuntu）
• 执行抓包命令：sudo tcpdump -i any port 4173
• 然后访问ELB的公网DNS，看是否有数据包到达EC2。如果没有，说明ELB到EC2的网络不通，回到安全组/ACL排查；如果有数据包但应用没响应，检查应用的日志或绑定地址。

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