React应用程序(在Docker容器中)无法访问AWS EC2上的API(在Docker容器中) [英] React app (in a docker container) cannot access API (in a docker container) on AWS EC2

问题描述

简而言之，我的问题... 在AWS EC2托管的上下文中，我该怎么做才能允许前端容器从本地后端容器上的端点到本地fetch?

详细信息:

我有2个通过docker-compose运行的Docker容器.在本地，它们工作正常，我能够使用以下命令从前端容器(React应用程序)中查询后端容器(这是一个节点应用程序):

http://localhost:3000/someendpoint

将所有内容移至AWC EC2实例后，我不再能够以这种方式连接到localhost.我的文件没有任何改变.

这是我的docker-compose.yml的一部分，其中包含有问题的2个服务:

backend:
    container_name: somename-backend
    image: somename-backend
    environment:
      NODE_ENV: production
    volumes:
      - ./server:/server
    ports:
      - "3000:3000"

  frontend:
    container_name: somename-frontend
    image: somename-frontend
    environment:
      NODE_ENV: production
    volumes:
      - ../src:/src
    ports:
      - "8081:8081"
    depends_on:
      - backend

如果我有前端查询:

http://ec2-12-345-67-890.us-west-2.compute.amazonaws.com:3000/someendpoint

我得到了我期望的结果.但是，这是一个外部" URL查询，我认为将其设置为内部查询会更好.我已经尝试过:

http://localhost:3000/someendpoint //fails

和

http://0.0.0.0:3000/someendpoint //fails

和

http://ec2-12-345-67-890.us-west-2.compute.amazonaws.com:3000/someendpoint //succeeds

我需要在我的安全组中公开一些我可能会丢失的东西吗?

我将各个端口暴露给我的IP地址，然后再次使用完整的公共域，一切正常，但我认为我不必使用完整的公共域，以便我的前端从URL中的fetch响应当两个Docker容器托管在同一EC2实例上并通过docker-compose运行时，我的后端.

解决方案

您的react应用在您的浏览器上运行&因此，localhost将指向您本地笔记本电脑的IP地址，而不是EC2实例的IP.使用外部URL是正确的方法，因为您的应用程序用户还必须从外部源访问后端.

my question in a nutshell... Within the context of AWS EC2 hosting, what do I need to do to allow my frontend container to fetch from an endpoint on my backend container, locally?

Details:

I have 2 Docker containers running via docker-compose. Locally, they work fine and I am able to query the backend container (which is a node app) from my frontend container (a React app) using:

http://localhost:3000/someendpoint

After moving everything onto an AWC EC2 instance I am no longer able to connect to localhost in this manner. Nothing has changed in my files.

Here is part of my docker-compose.yml that contains the 2 services in question:

backend:
    container_name: somename-backend
    image: somename-backend
    environment:
      NODE_ENV: production
    volumes:
      - ./server:/server
    ports:
      - "3000:3000"

  frontend:
    container_name: somename-frontend
    image: somename-frontend
    environment:
      NODE_ENV: production
    volumes:
      - ../src:/src
    ports:
      - "8081:8081"
    depends_on:
      - backend

If I have the frontend query:

http://ec2-12-345-67-890.us-west-2.compute.amazonaws.com:3000/someendpoint

I get the result I expect. However, this is an "external" url query and I think it would be better to make that query internal. I have tried:

http://localhost:3000/someendpoint //fails

and

http://0.0.0.0:3000/someendpoint //fails

and

http://ec2-12-345-67-890.us-west-2.compute.amazonaws.com:3000/someendpoint //succeeds

Do I need to expose something in my security group that I might be missing?

I exposed the various ports to my IP address and again, using the full public domain everything works but I do not think I should have to use the full public domain in order for my react frontend to fetch from a url in my backend when both docker containers are hosted on the same EC2 instance and running via docker-compose.

解决方案

Your react app runs on your browser & hence localhost will point back to your local laptop's IP address and not the EC2 instance's IP. Using the external URL is the right way to go as your app users will also have to access the backend from external sources.

这篇关于React应用程序(在Docker容器中)无法访问AWS EC2上的API(在Docker容器中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！