英文:

Can i declare a docker-compose service name as environment variable in vite react app?

问题 {#heading}

我无法使我的docker-compose.yml文件正确使用服务名称来连接我的后端应用程序。

我正在使用docker-compose运行我的两个应用程序。

1. 一个名为"frontend"的Vite-react应用程序。
2. 一个名为"backend"的后端Node.js Express应用程序。

我期望我的前端应用程序对后端服务进行GET和POST请求。
现在当我查看前端的网络选项卡时，请求被发送到：http://backend:5000/my-endpoint

我认为这应该可以工作，但是我得到了所有由我的前端应用程序发送的请求的net::ERR_NAME_NOT_RESOLVED错误。

我的docker-compose.yml看起来像这样：

version: '3'
services:
  frontend:
    build:
      context: ../frontend
    ports:
      - "5173:5173"
    environment:
      - VITE_BACKEND_HOST_URL=http://backend:5000  
    networks:
      - skystack_net
  backend:
    build:
      context: ../backend
    ports:
      - "5000:5000"
    depends_on:
      - mongodb
    environment:
      - PORT=5000
      - DOCKER_ENV=true
    networks:
      - skystack_net
  mongodb:
    image: mongo:latest
    ports:
      - "27017:27017"
    networks:
      - skystack_net
    volumes:
      - mongo-data:/data/db
volumes:
  mongo-data:
networks:
  skystack_net:

在我的React应用程序中，我要么使用docker-compose设置的环境变量，要么使用localhost，以便我可以在本地启动我的React应用程序（而不是在Docker中）。所以我在我的React应用程序中使用以下常量来设置API端点：

const BACKEND_HOST_URL = import.meta.env.VITE_BACKEND_HOST_URL || 'http://localhost:5000';

但然后我收到了net::ERR_NAME_NOT_RESOLVED错误。

如果我将环境值从：

 environment:
      - VITE_BACKEND_HOST_URL=http://backend:5000  

更改为：

 environment:
      - VITE_BACKEND_HOST_URL=http://172.25.176.1:5000 

那么它就可以工作，但我不想必须指定主机机器，如果我尝试在不同的机器上运行此设置，那将是有问题的。

我应该以另一种方式做吗？有什么建议吗？ 英文:

I cant get my docker-compose.yml file to use the service name to connect to my backend app correctly.

Im using docker-compose to run my 2 applications.

1. A Vite - react app called "frontend"
2. A backend node.js express app called "backend".

I expect my frontend to do GET and POST requests to the backend service.
Right now when i look in the network tab for my frontend the request are being sent to: http://backend:5000/my-endpoint

and i thought that would work, but i get: net::ERR_NAME_NOT_RESOLVED on all request sent by my frontend app.

my docker-compose.yml looks like this:

version: '3'
services:
  frontend:
    build:
      context: ../frontend
    ports:
      - "5173:5173"
    environment:
      - VITE_BACKEND_HOST_URL=http://backend:5000  
    networks:
      - skystack_net
  backend:
    build:
      context: ../backend
    ports:
      - "5000:5000" #
    depends_on:
      - mongodb
    environment:
      - PORT=5000
      - DOCKER_ENV=true
    networks:
      - skystack_net
  mongodb:
    image: mongo:latest
    ports:
      - "27017:27017"
    networks:
      - skystack_net
    volumes:
      - mongo-data:/data/db
volumes:
  mongo-data:
networks:
  skystack_net:

in my react app i want to either use the environment variable set by docker-compose, or use localhost so i can start my react app locally (not in docker). so i use this const in my reat app to set the api endpoint:

const BACKEND_HOST_URL = import.meta.env.VITE_BACKEND_HOST_URL || 'http://localhost:5000';

but then i get this net::ERR_NAME_NOT_RESOLVED error.

if i change the environment value from :

 environment:
      - VITE_BACKEND_HOST_URL=http://backend:5000  

to:

 environment:
      - VITE_BACKEND_HOST_URL=http://172.25.176.1:5000 

then it works, but i dont want to have to specify the host machine, that will be problematic if i try to run this setup on a different machine.

Should i do in another way? anny suggestions?

答案1 {#1}

得分: 0

如果在容器之间需要内部访问，则可以使用 `backend:5000`，但由于您正在开发一个前端应用程序，将在浏览器中加载。您的浏览器不再属于Docker网络，而是位于主机网络（localhost...）。
`因此，为了使其正常工作，您必须将后端暴露到端口 ``5000``，使其在托管Docker的计算机中可用。然后 ``localhost:5000`` 将起作用。
`

environment:
      - VITE_BACKEND_HOST_URL=http://localhost:5000  

英文:

If internally access between containers then you can use backend:5000, but since you're developing a Frontend app, which you will load on your browser. Your browser is no longer a part of Docker network and it's in the host network (localhost...).

So for this to work, you have to expose backend to port 5000 which make it available in the computer that you host your Docker. And then localhost:5000 would work.

environment:
      - VITE_BACKEND_HOST_URL=http://localhost:5000