React应用部署到AWS ECS后无法加载生产环境静态文件

使用npx create-react-app创建的React应用，本地Docker容器运行正常，但部署到AWS ECS/EC2后，仅能加载index.html，请求js、css等静态文件时返回503 Service Temporarily Unavailable错误。

相关配置信息：

• Dockerfile：

FROM node:19.2.0

ADD package-lock.json package.json /tmp/
WORKDIR /tmp
RUN npm ci
RUN npm install -g serve

RUN mkdir -p /usr/src/app && cd /usr/src/app && ln -s /tmp/node_modules

COPY . /usr/src/app
WORKDIR /usr/src/app

RUN npm run build

EXPOSE 3000

CMD ["serve", "-s", "build", "-l", "3000"]

• package.json中homepage已设为.
• 应用URL：http://****.eu-north-1.elb.amazonaws.com/，无法加载的静态文件路径示例：http://****.eu-north-1.elb.amazonaws.com/static/js/main.e19b6f39.js
• ECS日志无错误，负载均衡目标组状态健康
• CloudFormation定义的监听器规则（Path参数值为/）：

ListenerRule:
    Type: AWS::ElasticLoadBalancingV2::ListenerRule
    Properties:
      ListenerArn: !Ref Listener
      Priority: 1
      Conditions:
        - Field: path-pattern
          Values:
            - !Ref Path
      Actions:
        - TargetGroupArn: !Ref TargetGroup
          Type: forward

问题根源在于负载均衡的监听器规则仅匹配了根路径/，当请求/static/开头的静态文件时，没有匹配到对应的转发规则，导致负载均衡返回503错误。

修改CloudFormation的监听器规则，将路径匹配条件改为覆盖所有路径：

ListenerRule:
    Type: AWS::ElasticLoadBalancingV2::ListenerRule
    Properties:
      ListenerArn: !Ref Listener
      Priority: 1
      Conditions:
        - Field: path-pattern
          Values:
            - "/*"  # 修改为匹配所有路径
      Actions:
        - TargetGroupArn: !Ref TargetGroup
          Type: forward

如果需要更精细的控制，也可以添加多个监听器规则，分别匹配根路径和静态文件路径（比如/static/*），确保所有请求都能转发到ECS目标组。

另外，容器内的serve命令配置正确：serve -s build -l 3000已正确指向build目录的静态文件，且开启了单页应用模式，无需额外调整。

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