Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы

Проблема с неудачной сборкой Next.js в GitHub Actions, но работающей локально, за которой следует ошибка развертывания в Cloud Run.

На чтение 9 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Проблема 1: Ошибка сборки GitHub Actions
  3. Проблема 2: Ошибка развертывания в Cloud Run
  4. Что я пробовал:
  5. Ответ или решение
  6. Проблема с выполнением сборки Next.js в GitHub Actions и ошибка при развертывании в Cloud Run
  7. Проблема 1: Ошибка сборки в GitHub Actions
  8. Настройка Dockerfile и конфигурации GitHub Actions
  9. Проблема 2: Ошибка при развертывании на Cloud Run
  10. Заключение

Вопрос или проблема

Проблема с неудачной сборкой Next.js в GitHub Actions, но работающей локально, за которой следует ошибка развертывания в Cloud Run

Привет, я сталкиваюсь с рядом проблем, связанных со сборкой и процессом развертывания моего приложения Next.js. Изначально сборка работала нормально локально с помощью npm run build, но при запуске сборки через GitHub Actions я столкнулся со следующей ошибкой (Проблема ①). После изменения Dockerfile и конфигурации GitHub Actions для решения этой проблемы я начал сталкиваться с другой проблемой во время развертывания в Cloud Run (Проблема ②).

Проблема 1: Ошибка сборки GitHub Actions

Предупреждение: У хука React useCallback отсутствуют зависимости: 'analyses', 'axiosClient' и 'goToProjectChattingPage'. Либо включите их, либо удалите массив зависимостей. react-hooks/exhaustive-deps

Ошибка: <Html> не должен быть импортирован вне pages/_document.
Читать больше: https://nextjs.org/docs/messages/no-document-import-in-page

Ошибка Dockerfile: не удалось решить: процесс "/bin/sh -c npm run build" не завершился успешно: код выхода: 1

Вот Dockerfile, который я использую для сборки:

FROM node:16-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN rm .env.production
RUN mv .env.development .env.production
ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV development
RUN npm run build

FROM node:16-alpine AS runner
WORKDIR /app
ENV NODE_ENV development
ENV NEXT_TELEMETRY_DISABLED 1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]

Вот .yml файл для GitHub Actions:

name: Deploy frontend

on:
  push:
    branches:
      - main
    paths:
      - "frontend/**"
      - .github/workflows/deploy-frontend.yaml
  release:
    types:
      - published

permissions:
  contents: read
  id-token: write

jobs:
  build-and-push:
    uses: ./.github/workflows/build-and-push-rerunable.yaml
    with:
      docker_image: terraform/images/front
      gcp_project_id: clnr-${{ (github.event_name == 'release' && 'prod') || 'dev' }}
      dockerfile: ./frontend/Dockerfiles/Dockerfile_${{ (github.event_name == 'release' && 'prod') || 'dev' }}
      context: ./frontend
    secrets: inherit

  deploy:
    name: Deploy to CloudRun
    runs-on: ubuntu-latest
    environment:
        name: ${{ (github.event_name == 'release' && 'prod') || 'dev' }}
        url: https://${{ (github.event_name == 'release' && 'org') || 'dev' }}
    needs:
      - build-and-push
    steps:
      - uses: actions/checkout@v4
      - uses: google-github-actions/auth@v2
        with:
          workload_identity_provider: ${{ secrets.WIF_PROVIDER }}
          service_account: github-actions@clnr-${{ (github.event_name == 'release' && 'prod') || 'dev' }}.iam.gserviceaccount.com
      - name: Deploy to CloudRun
        uses: google-github-actions/deploy-cloudrun@v1
        with:
          project_id: clnr-${{ (github.event_name == 'release' && 'prod') || 'dev' }}
          service: front
          image: ${{ needs.build-and-push.outputs.image_url }}
          region: asia-northeast1

Проблема 2: Ошибка развертывания в Cloud Run

После исправления Dockerfile и конфигурации GitHub Actions сборка проходит успешно, но я сталкиваюсь со следующей ошибкой при развертывании в Cloud Run:

Ошибка: google-github-actions/deploy-cloudrun завершилась ошибкой: не удалось выполнить команду gcloud gcloud run deploy my-service --quiet --update-labels managed-by=github-actions,commit-sha=e0c60a1f74ea83028bcceb0b3ccc4d198a4d50a4 --platform managed --format json --region asia-northeast1 --project dev-project: ОШИБКА: (gcloud.run.deploy) Отсутствует обязательный аргумент [--image]: требуется контейнерный образ для развертывания (например, gcr.io/cloudrun/hello:latest), если не предоставлен источник сборки.

Это мой обновленный Dockerfile:

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN rm .env.production
RUN mv .env.development .env.production
ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV development
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]

Вот соответствующая часть обновленного .yml файла для GitHub Actions:

name: Deploy frontend

on:
  push:
    branches:
      - main
      - feat/fix-front-build
    paths:
      - "frontend/**"
      - .github/workflows/deploy-frontend.yaml
  release:
    types:
      - published

permissions:
  contents: read
  id-token: write

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      # Использовать кэш npm
      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: frontend/node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      # Установить зависимости
      - name: Install dependencies
        run: npm ci
        working-directory: ./frontend

      # Очистить кэш при необходимости (ручной триггер или условный)
      - name: Clear npm cache if needed
        if: ${{ failure() }} # Очистить кэш, если сборка не удалась
        run: npm cache clean --force
        working-directory: ./frontend

      # Использовать кэш сборки Next.js
      - name: Cache Next.js build cache
        uses: actions/cache@v2
        with:
          path: frontend/.next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('frontend/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-

      # Выполнить сборку
      - name: Build frontend
        run: npm run build
        working-directory: ./frontend

  deploy:
    name: Deploy to CloudRun
    runs-on: ubuntu-latest
    environment:
      name: ${{ (github.event_name == 'release' && 'prod') || 'dev' }}
      url: https://test.${{ (github.event_name == 'release' && 'org') || 'dev' }}
    needs:
      - build-and-push
    steps:
      - uses: actions/checkout@v4
      - uses: google-github-actions/auth@v2
        with:
          workload_identity_provider: ${{ secrets.WIF_PROVIDER }}
          service_account: github-actions@${{ (github.event_name == 'release' && 'prod') || 'dev' }}-test.iam.gserviceaccount.com
      - name: Deploy to CloudRun
        uses: google-github-actions/deploy-cloudrun@v1
        with:
          project_id: ${{ (github.event_name == 'release' && 'prod') || 'dev' }}
          service: test-front
          image: ${{ needs.build-and-push.outputs.image_url }}
          region: asia-northeast1

Что я пробовал:

  1. Я устранил предупреждение о зависимости useCallback, но ошибка сохраняется.
  2. Я обновил Dockerfile и YAML файл GitHub Actions, и сборка теперь проходит успешно, но развертывание в Cloud Run не удается из-за отсутствующего аргумента --image.

Я буду очень признателен за любые советы о том, как решить эти проблемы!

Ответ или решение

Проблема с выполнением сборки Next.js в GitHub Actions и ошибка при развертывании в Cloud Run

Ваша проблема с оформлением сборки и развертыванием проекта на Next.js через GitHub Actions и Google Cloud Run может быть решена, если обдумать несколько ключевых аспектов. Ниже представлен детализированный подход к решению каждой из возникших проблем.

Проблема 1: Ошибка сборки в GitHub Actions

Ошибка, возникшая во время выполнения сборки в GitHub Actions, может быть вызвана несколькими причинами. Рассмотрим основные ошибки:

  1. Проблема с зависимостями в React Hooks:

    Warning: React Hook useCallback has missing dependencies: 'analyses', 'axiosClient', and 'goToProjectChattingPage'.

    Эта ошибка указывает на то, что в вашем компоненте React используются хуки useCallback и не указаны все зависимости. Это может привести к неправильному поведению приложения. Рекомендуется проверить все зависимости, которые должны быть актуальны в зависимости от состояния компонента.

  2. Импорт Html вне _document:

    Error: <Html> should not be imported outside of pages/_document.

    Убедитесь, что все импорты компонентов <Html> выполняются только в файле pages/_document.js. Это важно для корректного рендеринга вашего Next.js приложения.

  3. Ошибка в Dockerfile:

    Dockerfile Error: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

    Эта ошибка связана с предыдущими, поскольку неверные импорты могут приводить к сбоям при выполнении команды npm run build. Убедитесь, что ваш Dockerfile соответствует требованиям сборки Next.js.

Настройка Dockerfile и конфигурации GitHub Actions

Ваш текущий Dockerfile требует некоторых изменений. Убедитесь, что:

  • Вы используете последнюю стабильную версию Node.js (например, node:18-alpine).
  • Переменные окружения устанавливаются корректно.

Пример исправленного Dockerfile:

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN rm .env.production
RUN mv .env.development .env.production
ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV production
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]

Обратите внимание на настройку переменной NODE_ENV на production, чтобы избежать проблем с окружением.

Проблема 2: Ошибка при развертывании на Cloud Run

Ваша ошибка развертывания в Cloud Run связана с отсутствием обязательного аргумента --image. Убедитесь, что выходные данные сборки успешно передаются в шаг развертывания.

Проверьте, правильно ли сконфигурирован ваш STEP "deploy" в GitHub Actions, и что выводом завершения работы шага "build-and-push" является корректный URL образа. Убедитесь, что вы задаете его следующим образом:

with:
  image: ${{ needs.build-and-push.outputs.image_url }}

Если image_url не определяется, возможно, необходимо дополнительно настроить ваш build-and-push job, чтобы он правильно генерировал выходное значение.

Заключение

Поэтапное разрешение проблемы сборки и развертывания требует проявления терпения и тщательного анализа конфигурации. Убедитесь, что все части вашего приложения и системы CI/CD (GitHub Actions) настроены правильно. После устранения всех приведенных ошибок повторите попытку выполнения сборки и развертывания.

Если у вас возникли вопросы или необходимо дополнительное разъяснение по работе с Next.js или Google Cloud, не стесняйтесь обращаться за помощью.

cicd deployment github-actions next.js
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности