Nuxt 3在Docker及Docker Compose中出现500 fetch failed错误求助

问题背景 #

本地运行正常的Nuxt 3应用，在Docker容器化（pnpm monorepo架构）后出现500 fetch failed错误，无日志输出，使用node --trace-warnings也未捕获到错误。已尝试将frontend服务的环境变量SERVER_URL设置为backend容器名backend:3001/graphql，但问题依旧。

项目目录结构：

apps
│
├── backend
│   ├── Dockerfile
│   └── package.json
│
├── frontend
│   ├── Dockerfile
|   ├── nuxt.config.ts
│   └── package.json
│
├── docker-compose.yaml
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

相关配置文件见用户提供的apps/frontend/Dockerfile、docker-compose.yaml、nuxt.config.ts。

排查修复步骤 #

1. 确保环境变量在运行时正确注入 #

Nuxt 3的配置在构建阶段可能会固化环境变量，导致运行时无法更新。需调整配置，让Apollo的端点支持运行时动态获取：

• 修改nuxt.config.ts，使用运行时配置区分服务端/客户端请求：

  export default defineNuxtConfig({
      devtools: { enabled: true },
      modules: [
          "@nuxtjs/apollo",
          "@nuxtjs/tailwindcss",
          "@nuxtjs/color-mode",
          "@nuxt/icon",
          "@element-plus/nuxt",
          "@nuxt/image",
      ],
      plugins: [{ src: "~/plugins/vue-toastification.ts", mode: "client" }],
      // 添加运行时配置
      runtimeConfig: {
          public: {
              // 客户端浏览器使用的端点（映射主机端口）
              clientApolloEndpoint: process.env.CLIENT_SERVER_URL ?? "http://127.0.0.1:3001/graphql"
          },
          // 服务端渲染时使用的端点（Docker内部服务名）
          serverApolloEndpoint: process.env.SERVER_URL ?? "http://backend:3001/graphql"
      },
      apollo: {
          clients: {
              default: {
                  // 根据请求来源动态切换端点
                  httpEndpoint: process.server 
                      ? process.env.SERVER_URL ?? "http://backend:3001/graphql"
                      : process.env.CLIENT_SERVER_URL ?? "http://127.0.0.1:3001/graphql",
                  inMemoryCacheOptions: {
                      addTypename: false,
                  },
                  defaultOptions: {
                      watchQuery: {
                          fetchPolicy: "no-cache",
                      },
                      query: {
                          fetchPolicy: "no-cache",
                      },
                  },
              },
          },
      },
      css: ["@fontsource-variable/inter/index.css"],
  });
  

• 更新docker-compose.yaml的frontend环境变量：

  services:
    frontend:
      container_name: frontend
      build:
        context: .
        dockerfile: apps/frontend/Dockerfile
      ports:
        - '3000:3000'
      networks:
        - mynetwork
      depends_on:
        - backend
      environment:
        - SERVER_URL=http://backend:3001/graphql
        - CLIENT_SERVER_URL=http://localhost:3001/graphql
  
    # ...其他服务配置
  

2. 解决服务启动顺序与就绪问题 #

depends_on仅保证容器启动顺序，不保证backend服务完全就绪（如数据库连接完成）。添加健康检查确保frontend在backend服务可用后再启动：

• 在docker-compose.yaml的backend服务中添加健康检查：

  backend:
    container_name: backend
    build:
      context: .
      dockerfile: apps/backend/Dockerfile
    ports:
      - '3001:3001'
    depends_on:
      - db
    networks:
      - mynetwork
    environment:
      - POSTGRES_HOST=postgres
      - POSTGRES_PORT=5432
      - POSTGRES_USERNAME=postgres
      - POSTGRES_PASSWORD=password
      - POSTGRES_DATABASE=database
      - SERVER_ADDRESS=0.0.0.0
      - SERVER_PORT=3001
    # 添加健康检查
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3001/graphql"]
      interval: 5s
      timeout: 5s
      retries: 5
  

• 修改frontend的depends_on为等待backend健康：

  frontend:
    # ...其他配置
    depends_on:
      backend:
        condition: service_healthy
  

3. 开启详细日志排查 #

通过环境变量开启Nuxt/Nitro的详细日志，便于定位错误：

• 更新frontend的环境变量：

  frontend:
    environment:
      - SERVER_URL=http://backend:3001/graphql
      - CLIENT_SERVER_URL=http://localhost:3001/graphql
      - NODE_ENV=production
      - NITRO_LOG_LEVEL=trace
      - NUXT_LOG_LEVEL=trace
  

• 查看容器日志：

  docker logs frontend
  

4. 验证容器网络连通性 #

进入frontend容器，测试与backend的网络连通性：

# 进入frontend容器
docker exec -it frontend ash

# 测试DNS解析是否正常
ping backend

# 测试backend服务是否可达
curl http://backend:3001/graphql

• 如果ping不通，检查Docker网络配置是否正确；如果curl返回错误，确认backend服务是否正常监听0.0.0.0:3001（当前backend的SERVER_ADDRESS=0.0.0.0配置正确）

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