docker 建筑中的 reactjs

Question

我在 docker 中的构建步骤中构建我的 reactjs 应用程序时遇到问题，然后使用 nginx 运行它。但是我无法让它能够连接到我的 api 运行ning 在另一个容器

我的docker-cmpose.yml的相关部分在这里

api:
    build:
      dockerfile: Dockerfile
      context: "./api"
    depends_on:
      - mysql_db
    volumes:
      - /app/node_modules
      - ./api:/app
    environment:
      <<: *common-variables
      MYSQL_HOST_IP: mysql_db
    networks:
      - my-network

frontend:
    depends_on:
      - api
    stdin_open: true
    environment:
      API_URL: http://api:3030/v1
    build:
      dockerfile: Dockerfile
      context: ./frontend
    ports:
      - "8090:80"
    volumes:
      - /app/node_modules
      - ./frontend:/app
    networks:
      - my-network
networks:
  my-network:
    name: my-network

我的 Dockerfile 中的相关位是

COPY package.json ./
COPY ./ ./
RUN npm i && npm run build


# production environment
FROM nginx:stable-alpine
WORKDIR /app
COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

最后在我的 default.conf for ngnx

upstream api {
  server api:3030;
}

server {
        listen 80;
        listen [::]:80;

        root /usr/share/nginx/html;
        index index.html index.htm index.nginx-debian.html;

        server_name xxxx.com www.xxxx.com

        location / {
                try_files $uri $uri/ =404;
        }

        location /api {
            rewrite /api/(.*) / break;
            proxy_pass http://api;
        }
    
}

我遇到的问题是无法解决 api

谁能帮我解决容器中 api 运行ning 的 ip/url 问题？

提前致谢

Answer 1

React 应用程序在浏览器中运行，它不能使用任何 Docker 网络功能。特别是，由于它在浏览器中运行，因此无法解析 api 主机名，该主机名仅存在于同一 Compose 网络上的容器运行中，而您的浏览器不在容器中。

您已经将 Nginx 设置为代理 /api 到后端应用程序，我将使用该路径。您可能可以设置类似 API_URL: /api/v1 的内容而没有主机部分。您的浏览器会将其解释为仅相对路径 URL 并使用应用程序所在的主机和端口运行。

docker 建筑中的 reactjs

reactjs in docker building react

networking

docker

reactjs