英文:
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/*
并将这些请求转发到正确的目标组。运行得很顺利
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论