使用 docker-compose 构建应用程序时，如何在 React 应用程序中使用 Docker 容器名称作为 URL 端点？

Question

最近我正在使用 MERN 堆栈应用程序。然后我有一个 docker-compose.yml 看起来像这样：

version: "3"

services:
  web:
    build: ./concept.io-frontend
    ports:
      - "80:80"
    depends_on:
      - api
    networks:
      - network.concept.io
    container_name: concept.io
  api:
    build: ./concept.io-backend
    restart: always
    ports:
      - "5328:5328"
    depends_on:
      - db
    networks:
      - network.concept.io
    container_name: api.concept.io
  db:
    image: mongo
    restart: always
    networks:
      - network.concept.io
    container_name: db.concept.io
networks:
  network.concept.io:
    driver: bridge

所以在后端（Express）代码中，我写道：

const URL = "mongodb://db.concept.io:27017/conceptio";

module.exports = {
  url: URL,
};

当我声明 API 容器依赖于 Mongo 容器时，API 容器与 Mongo 完美连接。

但是说到前端容器，我已经复现了相同的设置，哪个前端容器依赖于API容器，并将“localhost”替换为API和Mongo的容器名称。

// const URL = "http://localhost:5328/";
const URL = "http://api.concept.io:5328/";
export const API_URL = URL + "api/";
export const AUTH_URL = API_URL + "auth/";

但我无法向该端点发出请求。

向同一个 Docker 容器网络中的另一个容器发出 HTTP 请求是否有任何错误或想法？

这里是 Dockerfile：

API：

FROM node:lts-alpine3.12 as builder
RUN apk add yarn

WORKDIR /opt/app
COPY package.json yarn.lock ./
RUN yarn install
COPY . ./
EXPOSE 5328

CMD ["yarn", "start"] 

前端：

FROM node:lts-alpine3.12 AS builder
RUN apk add yarn

WORKDIR /opt/web
COPY package.json yarn.lock ./
RUN yarn install

ENV PATH="./node_modules/.bin:$PATH"

COPY . ./
RUN yarn run build

FROM nginx:1.19.1-alpine
RUN apk add curl
RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.2.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
    chmod +x envsubst && \
    mv envsubst /usr/local/bin
COPY ./nginx.config /etc/nginx/nginx.template
EXPOSE 80
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
COPY --from=builder /opt/web/dist /usr/share/nginx/html

Answer 1

您必须在 docker-compose.yml 中添加虚拟主机

环境： VIRTUAL_HOST：concept.io