尝试访问本地 API 端点时，React/Next.js docker build 失败

Posted 2023-02-22

技术标签:

【中文标题】尝试访问本地 API 端点时，React/Next.js docker build 失败【英文标题】：React/Next.js docker build failing when trying to reach out to local API endpoint 【发布时间】：2021-07-23 09:09:03 【问题描述】：

我似乎无法获取我的 node:alpine Docker 映像，以便构建 react/next.js。

我可以让它在本地构建良好，但是当 Docker 构建到达 API 端点时，我从未在我的 API 日志中看到流量，该端点本身在 Docker 容器（nginx、headless craft cms 等）中运行。 )。

构建似乎根本不喜欢 localhost，因为我已经尝试过：

http://localhost:9000/api

...这是我在日志中收到的消息：

#15 13.76 > Build error occurred
#15 13.76 FetchError: request to http://localhost:9000/api failed, reason: connect ECONNREFUSED 127.0.0.1:9000

我听说我可以使用主机名代替“localhost”，所以在我的 MacOS 终端中，我输入了“主机名”，然后我将 localhost 换成了这个值。这不会完全出错，但构建会挂在构建的“生成页面...”步骤上。

如何让 Docker 构建识别 localhost，或者换句话说，如何将我的 API URL 设置为由本地 Docker 容器托管的端点？

这是我的 Dockerfile：

# Install dependencies only when needed
FROM node:alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder

WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn static

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1

CMD ["yarn", "start"]

【问题讨论】：

【参考方案1】：

我知道这是一个老问题，但我会将我的解决方案留给任何新的人。尽管给定的解决方案确实对我有用，但我四处寻找更优雅的东西。这个问题显然是因为localhost 主机名总是指当前容器的本地主机，而不是你的主机。

他们指的是使用host.docker.internal 从容器连接到另一个服务的 docker for mac 文档。使用许多其他答案中推荐的容器名称对我没有帮助，但使用 host.docker.internal 解决了这个问题。

文档：

https://docs.docker.com/docker-for-mac/networking/

参考：

https://forums.docker.com/t/localhost-and-docker-compose-networking-issue/23100/5

【讨论】：

【参考方案2】：

感谢您的帖子 - 它帮助我找到了一个可以解决问题的解决方案。我发现定义桥接网络网关是一个更优雅的解决方案；它允许您定义 PUBLIC_NEXT_API_URL 并且永远不会更改它。

您可以在 docker-compose 文件中执行以下操作：

services:
  db:
    image: postgres
    restart: always
    networks:
      - stagingnetwork

  api:
    image: express
    restart: always
    ports:
      - '3008:3008'
    depends_on:
      - db
    networks:
      - stagingnetwork


  adminer:
    image: adminer
    restart: always
    networks:
      - stagingnetwork
    ports:
      - 8080:8080

networks:
  stagingnetwork:
    driver: bridge
    ipam:
      config:
        - subnet: 172.28.0.0/16
          gateway: 172.28.0.1

现在您可以设置 PUBLIC_NEXT_API_URL to http://172.28.0.1:3008/api, 并确信这将是您每次启动 docker-compose 时的端点。

另外，请注意，您可能需要先删除现有网络，然后再删除 "docker-compose up --force-recreate" 才能获得正确的 IP。

【讨论】：

很高兴知道！感谢您发布此信息！【参考方案3】：

好的，我想出了解决方案，或者一个解决方案。

挖了一圈，发现需要连接“桥接网络”。

我通过首先输入“docker network ls”发现了桥接网络 IP 是什么：

这给了我获取 IP 所需的网络名称，我通过键入“docker network inspect craftcms_default”来做到这一点：

在我的情况下，这输出相当多，但我唯一需要的是“网关”IP，这里是 172.19.0.1

我的 nginx 服务器映射为 9000:80，因此 headless Craft CMS API 位于：

http://172.19.0.1:9000/api

...然而，作为一个快速的健全性检查，我将它输入到浏览器中，结果是一个不断旋转/加载的页面。没有被吓倒，我将它作为 PUBLIC_NEXT_API_URL 输入到 env.local 中，并且静态站点生成在 Docker 构建期间完成。