Nuxt 3 выдает ошибку 500 Fetch Failed в Docker и Docker Compose

Приложение работает правильно, когда я запускаю его локально, но если я попытаюсь его закрепить, я получаю ошибку 500 fetch failed без журналов. Я также попробовал запустить приложение с помощью node --trace-warnings, но ошибок не появилось. Проект представляет собой монорепозиторий pnpm со структурой папок

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

###################
# STAGE 1: BUILD
###################

FROM node:20-alpine AS build

# Set working directory inside the image
WORKDIR /app

# Copy application dependency manifests to the container image.
COPY --chown=node:node ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
COPY --chown=node:node ./apps/frontend/package.json ./apps/frontend/package.json

# Install pnpm globally
RUN npm install -g pnpm

# Install app dependencies using the `pnpm install --frozen-lockfile`
RUN pnpm install --frozen-lockfile

# Bundle app source
COPY --chown=node:node ./apps/frontend ./apps/frontend/

# Build the Nuxt.js application
RUN pnpm --filter=@myapp/frontend build

# Use the node user from the image (instead of the root user)
USER node

###################
# STAGE 2: PRODUCTION
###################

FROM node:20-alpine AS production

# Set working directory inside the image
WORKDIR /app

# Copy compiled static files from the build stage (Stage 1)
COPY --chown=node:node --from=build /app/apps/frontend/.output/  ./

# Port and host for the nitro
ENV NITRO_HOST=0.0.0.0
ENV NITRO_PORT=3000

# Expose the port the app runs on
EXPOSE 3000

# Use the node user from the image (instead of the root user)
USER node

# Default command to start Nuxt
CMD [ "node", "/app/server/index.mjs" ]

Вот docker-compose.yaml

version: '3.8'

services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: apps/frontend/Dockerfile
    ports:
      - '3000:3000'
    networks:
      - mynetwork
    depends_on:
      - 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

  db:
    container_name: postgres
    image: postgres:13
    ports:
      - '5432:5432'
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_DB: database
    networks:
      - mynetwork
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

networks:
  mynetwork:
    driver: bridge

Вот 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" }],
    apollo: {
        clients: {
            default: {
                httpEndpoint: `${ process.env.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"],
});

Это все, что у меня есть.

ОБНОВЛЯТЬ

Я также попытался установить переменную среды службы frontend с именем контейнера службы SERVER_URL, но все равно получаю ту же ошибку.

services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: apps/frontend/Dockerfile
    ports:
      - '3000:3000'
    networks:
      - mynetwork
    depends_on:
      - backend
    environment:
      - SERVER_URL=backend:3001/graphql

  backend:
    container_name: backend
    build:
      context: .
      dockerfile: apps/backend/Dockerfile

Вы отправляете запрос в 127.0.0.1:3001, а не во внутренний контейнер...

Kevin Kopf 28.06.2024 16:21

Я также попытался установить переменную среды службы frontend с именем контейнера службы SERVER_URL, но все равно получаю ту же ошибку. backend

fasenderos 29.06.2024 09:29
Развертывание модели машинного обучения с помощью Flask - Angular в Kubernetes
Развертывание модели машинного обучения с помощью Flask - Angular в Kubernetes
Kubernetes - это портативная, расширяемая платформа с открытым исходным кодом для управления контейнерными рабочими нагрузками и сервисами, которая...
Как создать PHP Image с нуля
Как создать PHP Image с нуля
Сегодня мы создадим PHP Image from Scratch для того, чтобы легко развернуть базовые PHP-приложения. Пожалуйста, имейте в виду, что это разработка для...
2
2
82
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В конце концов я обнаружил проблему: вам нужно установить два разных URL-адреса для GraphQL в nuxt.config.js: один для серверной стороны и один для клиентской стороны в Nuxt, чтобы URL-адрес серверной стороны указывал на контейнер, а URL-адрес на стороне клиента указывает на URL-адрес, предоставляемый контейнером.

Вот обновленный файл nuxt.config.js, в котором мы определили httpEndpoint (для серверной стороны) и browserHttpEndpoint (для клиентской стороны):

export default defineNuxtConfig({
    ...
    apollo: {
        clients: {
            default: {
                httpEndpoint: `${ process.env.SERVER_URL ?? "http://127.0.0.1:3001/graphql"}`,
                browserHttpEndpoint: "http://127.0.0.1:3001/graphql",
            },
        },
    },
    ...

});

Вот обновленный docker-compose.yaml, куда мы передаем аргумент SERVER_URL, используемый на этапе сборки проекта Nuxt.js.

services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: apps/frontend/Dockerfile
      args:
        - SERVER_URL=http://backend:3001/graphql
    ports:
      - '3000:3000'
    networks:
      - mynetwork
    depends_on:
      - backend

В Dockerfile проекта Nuxt.js нам нужно добавить переменную среды SERVER_URL на этапе сборки перед запуском команды сборки.

...

# Custom server URL
ARG SERVER_URL
ENV SERVER_URL=$SERVER_URL

# Build the Nuxt.js application
RUN pnpm --filter=@weroad/frontend build

...

Другие вопросы по теме