Организация CI/CD для Vue-приложения обеспечивает автоматическую проверку кода, сборку, тестирование и деплой без ручного вмешательства. Это критически важно при командной разработке, высокой частоте релизов и требовании к стабильности продакшн-среды. Полноценный CI/CD-процесс включает этапы линтинга, юнит- и интеграционных тестов, сборки проекта, прогонки e2e-тестов, деплоя в staging/production, и может быть реализован с помощью GitHub Actions, GitLab CI, CircleCI, Jenkins, Travis CI и других.

1. Типичный пайплайн

Этапы CI:

• Установка зависимостей (npm ci)

• Проверка кода (eslint, prettier)

• Проверка типов (tsc, если используется TypeScript)

• Unit-тесты (vitest, jest, @vue/test-utils)

• E2E-тесты (Cypress, Playwright)

• Сборка (vite build / vue-cli-service build)

• Генерация артефактов

Этапы CD:

• Проверка окружения

• Деплой на staging (preview-окружение)

• Деплой на production (ручной или авто)

2. GitHub Actions (пример)

Файл .github/workflows/deploy.yml:

name: CI/CD
on:
push:
branches: \[main\]
pull_request:
jobs:
build:
runs-on: ubuntu-latest
steps:
\- name: Checkout repo
uses: actions/checkout@v3
\- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 20
cache: 'npm'
\- name: Install dependencies
run: npm ci
\- name: Lint
run: npm run lint
\- name: Type check
run: npm run type-check
\- name: Run unit tests
run: npm run test:unit
\- name: Build project
run: npm run build
\- name: Upload artifact
uses: actions/upload-artifact@v3
with:
name: dist
path: dist
deploy:
runs-on: ubuntu-latest
needs: build
if: github.ref == 'refs/heads/main'
steps:
\- name: Download artifact
uses: actions/download-artifact@v3
with:
name: dist
\- name: Deploy to server (via rsync)
run: |
rsync -avz ./dist/ user@your-server:/var/www/app
env:
SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}

3. GitLab CI (пример .gitlab-ci.yml)

stages:
\- lint
\- test
\- build
\- deploy
variables:
NODE_ENV: production
cache:
paths:
\- node_modules/
lint:
stage: lint
script:
\- npm ci
\- npm run lint
test:
stage: test
script:
\- npm run test:unit
build:
stage: build
script:
\- npm run build
artifacts:
paths:
\- dist/
deploy:
stage: deploy
script:
\- rsync -avz dist/ user@server:/var/www/app
only:
\- main

4. Сборка и деплой через Docker

Если деплой происходит в Docker-окружение, Vue-приложение можно собирать в image:

Dockerfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

В CI

\- name: Build Docker image
run: docker build -t my-vue-app .
\- name: Push to Docker registry
run: docker push my-vue-app
\- name: Deploy via SSH
run: ssh user@host "docker pull my-vue-app && docker stop vue && docker rm vue && docker run -d --name vue my-vue-app"

5. Хранение артефактов

• dist/ загружается в артефакты (в GitHub Actions — upload-artifact, в GitLab — artifacts:)

• Можно использовать как preview-сборку для QA

• В staging окружении удобно показывать каждую PR-сборку по ссылке вида: staging.example.com/pr-42

6. Preview окружения (на Pull Request)

Используется Vercel, Netlify или Surge:

Netlify

• Автоматический деплой при каждом PR

• Использует netlify.toml:

\[build\]
command = "npm run build"
publish = "dist"
\[context.production.environment\]
NODE_ENV = "production"

7. Интеграция e2e-тестов

Cypress

npx cypress run --browser chrome

В GitHub Actions:

\- name: Run E2E tests
run: npm run test:e2e

Перед запуском часто нужен vite preview или serve:

\- name: Start local server
run: npm run preview &
\- name: Run Cypress
run: npx cypress run

8. Проверка перед пушем

На этапе коммита или push можно запускать husky + lint-staged:

husky:

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

lint-staged (в package.json):

"lint-staged": {
"\*.{js,ts,vue}": \[
"eslint --fix",
"prettier --write"
\]
}

9. Использование .env и переменных среды

В Vue (Vite) переменные среды передаются через VITE_:

VITE_API_URL=https://api.example.com

В CI:

env:
VITE_API_URL: ${{ secrets.API_URL }}

10. Многоконтурный деплой (staging / prod)

Разделяются по веткам:

on:
push:
branches:
\- staging
\- main

Логика деплоя зависит от ветки:

\- name: Deploy to staging
if: github.ref == 'refs/heads/staging'
run: deploy-to-staging.sh
\- name: Deploy to production
if: github.ref == 'refs/heads/main'
run: deploy-to-prod.sh

11. Безопасность и Secrets

• Использование GitHub Secrets (Settings → Secrets)

• Хранение API ключей, SSH-ключей, token'ов

• Не пушить .env в репозиторий

env:
SSH_KEY: ${{ secrets.SSH_KEY }}
VITE_API_URL: ${{ secrets.API_URL }}

12. Мониторинг и логирование

• Slack-нотификации (slack/webhook)

• GitHub Checks (status badges)

• Отправка ошибок в Sentry, LogRocket, Datadog

• Метрики времени билда и деплоя

13. Частичный деплой (переменные, фичи, сегменты)

• Управление фичами через флаги (useFeatureFlag())

• Включение только нужных подмодулей

• Возможность откатить код, не деплоив весь фронт