React应用在生产环境中无法加载静态文件。

huangapple go评论72阅读模式
英文:

React app won't load static files in production

问题

我已经使用 npx create-react-app 创建了一个小的React应用程序,我正在尝试使用AWS ECS/EC2进行托管。

现在,在本地使用Docker容器运行得很好,但是当我将完全相同的Docker容器部署到ECS时,似乎它没有提供静态文件。我可以看到它加载了index.html,但是当它尝试加载js和css文件时,它抛出了这个错误:

503 服务暂时不可用

我的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设置。目前它设置为 . 但似乎没有任何区别。

编辑 1:
我的应用程序的URL是:http://****.eu-north-1.elb.amazonaws.com/ 这将加载index.html。未加载的js文件位于 http://****.eu-north-1.elb.amazonaws.com/static/js/main.e19b6f39.js

编辑 2:
ECS日志中没有错误,负载均衡器的目标组健康。

我的监听器规则在CloudFormation中定义如下(路径 = '/'):

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

我对AWS还比较新。我的CFN模板基于AWS自己提供的此模板进行了非常小的修改:https://github.com/aws-samples/ecs-refarch-cloudformation

英文:

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

答案1

得分: 0

终于搞定了,感谢 @MarkB 提醒我关于 AWS ELB 的监听规则。

解决方案是添加一个新的监听规则,针对路径 /static/* 并将这些请求转发到正确的目标组。运行得很顺利 React应用在生产环境中无法加载静态文件。

英文:

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 React应用在生产环境中无法加载静态文件。

huangapple
  • 本文由 发表于 2023年6月5日 15:37:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76404364.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定