Автоматизация CI/CD для Nuxt приложений с GitLab

Введение в CI/CD

Continuous Integration и Continuous Deployment (CI/CD) — практика автоматизации процесса сборки, тестирования и развёртывания приложений. GitLab CI/CD встроен в GitLab и предлагает мощный инструментарий для автоматизации.

Преимущества CI/CD:

Автоматическое тестирование каждого коммита
Быстрое обнаружение багов
Автоматический deploy в production
Консистентный процесс сборки
Возможность быстрого отката (rollback)
Уменьшение человеческого фактора

GitLab CI/CD Overview

GitLab CI/CD использует файл .gitlab-ci.yml в корне репозитория. Pipeline состоит из stages (этапов) и jobs (задач).

Типичные этапы для Nuxt приложения:

build — сборка Docker образа
test — запуск unit и e2e тестов
deploy — развёртывание в staging/production

Настройка .gitlab-ci.yml для Nuxt

Базовая конфигурация для Nuxt приложения:

yaml

stages:
  - build
  - test
  - deploy

variables:
  DOCKER_DRIVER: overlay2
  IMAGE_TAG: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}

# Build stage
build-nuxt:
  stage: build
  image: docker:24.0.6
  services:
    - docker:24.0.6-dind
  before_script:
    - docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
  script:
    - cd nuxt
    - docker build -t ${IMAGE_TAG} -t ${CI_REGISTRY_IMAGE}:latest .
    - docker push ${IMAGE_TAG}
    - docker push ${CI_REGISTRY_IMAGE}:latest
  only:
    - main
  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
      - nuxt/node_modules/

Кеширование node_modules

Кеширование существенно ускоряет сборку:

yaml

cache:
  key:
    files:
      - nuxt/package-lock.json
  paths:
    - nuxt/node_modules/
    - nuxt/.nuxt/
  policy: pull-push

# Для разных веток разные кеши
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/

Test Stage

Добавляем unit и e2e тесты:

yaml

test-unit:
  stage: test
  image: node:20-alpine
  script:
    - cd nuxt
    - yarn install --frozen-lockfile
    - yarn test:unit
  coverage: '/All files[^|]*\|[^|]*\s+([\d\.]+)/'
  artifacts:
    reports:
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml

test-e2e:
  stage: test
  image: mcr.microsoft.com/playwright:latest
  script:
    - cd nuxt
    - yarn install --frozen-lockfile
    - yarn test:e2e
  artifacts:
    when: always
    paths:
      - nuxt/test-results/
      - nuxt/playwright-report/

Deploy Stage

Деплой в production с использованием Docker Swarm:

yaml

deploy-production:
  stage: deploy
  image: docker:24.0.6
  before_script:
    # Расшифровка secrets
    - apk add --no-cache sops age
    - echo "${SOPS_AGE_KEY}" > /tmp/key.txt
    - export SOPS_AGE_KEY_FILE=/tmp/key.txt
    - sops -d .env.prod > .env
    - sops -d .env.nuxt.prod > .env.nuxt
    # Подключение к Docker Swarm
    - mkdir -p ~/.docker
    - echo "${DOCKER_CERT}" | base64 -d > ~/.docker/cert.pem
    - echo "${DOCKER_KEY}" | base64 -d > ~/.docker/key.pem
    - echo "${DOCKER_CA}" | base64 -d > ~/.docker/ca.pem
    - export DOCKER_HOST=tcp://production-server:2376
    - export DOCKER_TLS_VERIFY=1
    - export DOCKER_CERT_PATH=~/.docker
  script:
    - docker stack deploy -c compose.yaml ext-team
  only:
    - main
  when: manual
  environment:
    name: production
    url: https://ext.team

Secrets и Environment Variables

Секреты хранятся в GitLab CI/CD Variables (Settings → CI/CD → Variables):

CI_REGISTRY_USER, CI_REGISTRY_PASSWORD — для Docker registry
SOPS_AGE_KEY — ключ для расшифровки .env файлов
DOCKER_CERT, DOCKER_KEY, DOCKER_CA — TLS сертификаты для Docker
NUXT_PUBLIC_API_BASE — публичные переменные

Типы переменных:

yaml

variables:
  # Обычные переменные
  NODE_ENV: production

  # File переменные (для больших значений)
  SOPS_AGE_KEY:
    value: ${FILE_CONTENT}
    type: file

  # Защищённые переменные (только для protected branches)
  PROD_API_KEY:
    value: secret
    protected: true

Rollback Strategy

Откат к предыдущей версии при ошибках:

yaml

rollback-production:
  stage: deploy
  image: docker:24.0.6
  script:
    - docker service update --rollback ext-team_nuxt
  when: manual
  only:
    - main
  environment:
    name: production
    action: rollback

Notifications

Уведомления в Slack/Telegram при успешном/неудачном деплое:

yaml

notify-success:
  stage: .post
  script:
    - |
      curl -X POST ${SLACK_WEBHOOK_URL} \
        -H 'Content-Type: application/json' \
        -d "{
          \"text\": \"✅ Deploy successful: ${CI_PROJECT_NAME} to production\",
          \"username\": \"GitLab CI\"
        }"
  when: on_success
  only:
    - main

notify-failure:
  stage: .post
  script:
    - |
      curl -X POST ${SLACK_WEBHOOK_URL} \
        -H 'Content-Type: application/json' \
        -d "{
          \"text\": \"❌ Deploy failed: ${CI_PROJECT_NAME}\",
          \"username\": \"GitLab CI\"
        }"
  when: on_failure
  only:
    - main

Best Practices

Используйте кеширование для ускорения сборки
Запускайте тесты параллельно для экономии времени
Храните все секреты в GitLab Variables, никогда в коде
Используйте manual trigger для production deploy
Настройте rollback job для быстрого отката
Добавьте notifications для отслеживания статуса
Используйте artifacts для сохранения coverage отчётов
Применяйте only/except или rules для контроля выполнения jobs
Регулярно обновляйте Docker images в CI

Заключение

GitLab CI/CD позволяет полностью автоматизировать процесс сборки, тестирования и развёртывания Nuxt приложений. Правильно настроенный pipeline экономит часы времени и минимизирует риски при деплое в production.

В ExtTeam мы деплоим десятки изменений в день благодаря автоматизации CI/CD, сохраняя стабильность и качество наших проектов.

Автоматизация CI/CD для Nuxt приложений с GitLab

Введение в CI/CD

GitLab CI/CD Overview

Настройка .gitlab-ci.yml для Nuxt

Кеширование node_modules

Test Stage

Deploy Stage

Secrets и Environment Variables

Rollback Strategy

Notifications

Best Practices

Заключение

Теги

Похожие статьи