React app won't load static files in production

Question

I have created a small React app using npx create-react-app that I'm trying to host using AWS ECS/EC2.

Now, it runs perfectly fine locally from a Docker container but when I deploy the exact same Docker container to ECS it seems it's not serving the static files. I can see that it loads index.html but when it tries to load the js and css files it throws this error:

503 Service Temporarily Unavailable

My Dockerfile looks like this:

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"]

I have toyed around with the homepage setting in package.json. It's currently set to . but it doesn't seem to make any difference.

EDIT 1: The URL to my app is: http://****.eu-north-1.elb.amazonaws.com/ That will load index.html. The js file that is not loaded is in http://****.eu-north-1.elb.amazonaws.com/static/js/main.e19b6f39.js

EDIT 2: There are no error sin the ECS logs and the load balancer's target group is healthy.

My listener rule is defined in cfn like this (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

I'm kinda new to AWS. My CFN template is based on this one provided by AWS themselves but with very minor modifications: https://github.com/aws-samples/ecs-refarch-cloudformation

Answer 1

Finally got this working thanks to @MarkB drawing my attention to the AWS ELB listener rule.

The solution was to add a new listener rule for the path /static/* and forward these requests to the correct target group. Works like a charm :)