英文:
Docker container on react frontend is not connecting with flask backend on EC2 instance
问题
我在EC2实例上部署了React容器和另一个Flask容器，使用docker-compose文件运行并连接它们在一起。问题是我的React容器没有向后端容器发送任何请求，我查看了后端Docker日志，里面没有显示来自我的React的任何内容。
我调试了问题，并发现当我在本地运行项目时一切正常。在我的机器上，前端和后端之间的工作流程是正常的，但是当我将其托管在AWS EC2上时，它们无法一起工作。
这是我的Docker Compose文件：
version: "3.9"
services:
frontend:
image: omarsater/private-repo:react-v1.0
ports:
- "3000:3000"
depends_on:
- backend
backend:
image: omarsater/private-repo:flask-v1.0
ports:
- "5000:5000"
英文:
I have deployed react containers with another flask containers on EC2 instance, Running and connecting them together using docker-compose file, the problem is my react container is not sending any request to my backend container, i have looked inside the backend docker logs which are show nothing came from my react.
I debugged the problem and find out everything is works when i run my project locally.
The work flow is normal between both front and backend on my machine , but when I hosted moved on AWS EC2 they didn't work together.
This is my docker compose file:
version: "3.9"
services:
frontend:
image: omarsater/private-repo:react-v1.0
ports:
- "3000:3000"
depends_on:
- backend
backend:
image: omarsater/private-repo:flask-v1.0
ports:
- "5000:5000"
答案1
得分: 0
要运行React应用程序，您有两个选项：
- 如果您通过NgInx运行它，那么您需要在NgInx文件中添加与服务名称对应的上游服务器。
http
{
upstream backend
{
server backend:8080;
}
server
{
location /
{
#### Gzip设置 ####
gzip on;
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 5;
#### 提供React应用程序 ####
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-store, no-cache, must-revalidate";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
}
location /api
{
proxy_pass http://backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For
$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
......
}
- 如果不是这样，那么取决于您的部署方式。
无论哪种方式，您都可以使用在通过Compose创建的Docker堆栈中的SERVICE_NAME访问后端服务。我建议您在本地进行测试，然后部署到EC2以获得更清晰的了解。
英文:
How do run React application?
- If you run it via NgInx, then you need add upstream in NgInx file with service name
http
{
upstream backend
{
server backend:8080;
}
server
{
location /
{
#### Gzip Settings ####
gzip on;
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 5;
#### Serve React Application ####
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-store, no-cache, must-revalidate";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
}
location /api
{
proxy_pass http://backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For
$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
......
}
- If not, then it depends on how you deploy it.
Either way, you can access backend service using SERVICE_NAME in docker stack created via compose. I would advise you to test this in local and then deploy to EC2 for better clarity
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论