Next.js 14 Docker部署调用/api接口遇ECONNREFUSED错误

这是我在Stack Overflow上的第一个问题！

我正在开发一个基于NextJS 14和.NET 6的应用，前端（FE）和后端（BE）分别部署在独立的Docker容器中。应用在本地运行时无任何问题，但容器化后出现异常。

后端应用运行正常，通过Postman调用API可正常响应，但前端应用出现问题：

当从浏览器访问应用时，控制台显示如下错误：

▲ Next.js 14.2.7
  - Local:        http://localhost:3000
  - Network:      http://0.0.0.0:3000

 ✓ Starting...
 ✓ Ready in 85ms
 ⨯ Error: undefined

完整错误截图

直接从浏览器调用/api/events接口时，返回如下错误：

{
  "status": "fetch failed",
  "message": {
    "cause": {
      "errno": -111,
      "code": "ECONNREFUSED",
      "syscall": "connect",
      "address": "172.19.0.3",
      "port": 7258
    }
  }
}

相关配置信息 #

package.json主要依赖 #

"@next/env": "^14.2.6",
 "react": "^18.3.1",
 "next": "^14.1.3",
 "next-auth": "^4.24.7",

.env环境变量 #

NEXTAUTH_SECRET=*SecretlySecret*
NEXT_PUBLIC_BASE_PORT="3000"
NEXT_PUBLIC_BASE_URL="http://127.0.0.1:$NEXT_PUBLIC_BASE_PORT"
NEXTAUTH_URL="$NEXT_PUBLIC_BASE_URL/api/auth"
BASE_API_URL="http://127.0.0.1:7258/api"
NODE_TLS_REJECT_UNAUTHORIZED="0"

Dockerfile #

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package*.json yarn.lock* pnpm-lock.yaml* ./
RUN npm ci

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# 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 during the build.
ENV NEXT_TELEMETRY_DISABLED=1

RUN npm run build

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

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]

已尝试的排查方法 #

• 在Docker Desktop中设置环境变量BASE_API_URL为http://docker-be-container-name:7258/api
• 将127.0.0.1替换为localhost
• 配置.NET应用允许所有跨域源
• 创建Docker网络并将前后端容器加入该网络：

docker network create new-network
docker network connect new-network docker-fe-container-name
docker network connect new-network docker-be-container-name

更新：Docker Compose尝试 #

我尝试使用Docker Compose编排：

services:  
  be:
    container_name: be
    image: be
    build: ./be
    ports:
      - 7258:443 
      - 5258:80
  fe:
    container_name: fe
    image: fe
    build: ./fe
    ports:
      - 3000:3000
    environment:
      - BASE_API_URL=http://be:5258/api
      - NEXT_PUBLIC_BASE_URL=http://fe:3000
    depends_on:
      - be

前端控制台仍显示相同错误，但从浏览器调用API时返回的错误有所不同：

{
  "status": "fetch failed",
  "message": {
    "cause": {

    }
  }
}

我已经被这个问题困扰数周，查阅了Stack Overflow上所有相关帖子仍未找到解决方案，恳请帮助！

内容的提问来源于stack exchange，提问作者Monchri