Настройка автоматических обновлений при изменениях в коде

Зачем нужны автоматические обновления?

Сегодня мы разберем тему, которая заставит ваш код обновляться самостоятельно. Да, мы говорим про автоматические обновления или, если хотите, Continuous Integration и Continuous Deployment (CI/CD). Но это не просто аббревиатура, это спасение вашего времени и нервов!

Представьте: вы добавили новый компонент в проект, закоммитили изменения в GitHub, поставили кружку кофе на стол… и внезапно осознали, что теперь придется вручную залезать в настройки для пересборки и повторного деплоя. Ужас, правда? Чтобы избежать таких стрессов, существует автоматизация обновлений. Она не только экономит время, но и уменьшает вероятность человеческих ошибок. Вот основные преимущества:

• Скорость и удобство: ваш код автоматически собирается и деплоится при каждом коммите.
• Консистентность: исключается вероятность того, что забудете обновить приложение после внесения изменений.
• Меньше ошибок: мы доверяем машине больше, чем послеполуденному "я".

Концепция CI/CD: Continuous Integration и Continuous Deployment

Прежде чем переходить к практике, давайте разберемся, что вообще такое CI/CD.

• CI (Continuous Integration): автоматически проверяет каждое изменение в коде. Это может включать запуск тестов, линтеров и других проверок перед сборкой.
• CD (Continuous Deployment): берет проверенный код и автоматически деплоит его на сервер (или платформу вроде Vercel или Netlify).

Если эти концепции звучат как песни ангелов на вашу честь, то вы в правильном месте.

Постановка задачи

• Мы хотим, чтобы наше приложение автоматически деплоилось каждый раз, когда вносятся изменения в ветку main в нашем репозитории GitHub.
• Использовать будем инструменты, которые уже поддерживаются платформами для деплоя, в частности, GitHub Actions для CI/CD.

Настройка автоматического деплоя на Vercel

Интеграция с GitHub

Vercel позволяет подключить ваш репозиторий GitHub, чтобы автоматически отслеживать изменения. Вот как это сделать:

1. Зайдите на панель управления Vercel.
2. Нажмите "Add New Project" и выберите ваш репозиторий из GitHub.
3. Убедитесь, что выбрана основная ветка (например, main).
4. В настройках проекта убедитесь, что включена опция "Automatically Deploy Git Pushes".

Теперь каждый раз, как только вы делаете git push в ветку main, Vercel будет автоматически пересобирать и деплоить приложение. Легко, правда?

Настройка автоматического деплоя на Netlify

У Netlify процесс похож. Давайте разберем шаги:

Интеграция с GitHub

1. Перейдите на Netlify и создайте новый сайт, выбрав "Import an existing project".
2. Подключите ваш GitHub-аккаунт, выберите нужный репозиторий.
3. Убедитесь, что Netlify настроен отслеживать ветку main или ту ветку, которая хранит продакшн-код.
4. Задайте команду сборки, если она отличается от стандартной npm run build и укажите папку сборки (чаще всего это build).

Теперь Netlify будет автоматически деплоить изменения с выбранной ветки.

GitHub Actions для CI/CD

GitHub Actions позволяет более гибко контролировать все этапы CI/CD процесса. Давайте используем его для настройки автоматического деплоя.

Шаг 1: создание файла GitHub Actions

В вашем репозитории создайте следующую структуру:

.github/
  workflows/
    ci.yml

Шаг 2: написание конфигурации

Вот базовый пример ci.yml:

name: Deploy to Vercel

on:
  push:
    branches:
      - main # Срабатывает при пуше в ветку main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3 # Копируем код из репозитория

      - name: Setup Node.js
        uses: actions/setup-node@v3 # Устанавливаем Node.js версии 16
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install # Устанавливаем все зависимости

      - name: Build application
        run: npm run build # Собираем проект (папка "build")

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v21 # Разворачиваем приложение на Vercel
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Токен Vercel
          vercel-args: '--prod' # Указываем, что это продакшн-сборка

Шаг 3: создание Vercel Token

1. Перейдите в настройки вашей учетной записи на Vercel.
2. Выберите "Tokens" и создайте новый токен API.
3. В репозитории GitHub зайдите в Settings > Secrets and variables > Actions. Добавьте новый секрет с именем VERCEL_TOKEN и вставьте туда ваш токен.

Интеграция с Netlify CLI для CI/CD

Если вы используете Netlify, настройка будет немного отличаться:

Пример конфигурации ci.yml:

name: Deploy to Netlify

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

      - name: Build application
        run: npm run build

      - name: Deploy to Netlify
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        run: npx netlify deploy --prod --dir=build

Создание Netlify Auth Token

• Войдите в свой аккаунт на Netlify.
• Перейдите в настройки пользователя -> "Access Tokens".
• Создайте новый токен и добавьте его в Secrets вашего репозитория как NETLIFY_AUTH_TOKEN.

Настройка уведомлений

Наличие уведомлений об успешных или неудачных сборках добавляет уверенности в процессе CI/CD. Vercel и Netlify автоматически уведомляют вас на почту, но вы можете добавить интеграцию с Slack или Discord для командной работы.

Подводные камни и совет

Иногда может быть соблазн включить автоматизацию для каждой ветки. Однако лучше этого избегать, чтобы случайно не развернуть нестабильный код. Ограничьтесь деплоем только с проверенных веток (например, main).

Также помните, чтобы измененные environment variables (переменные окружения) на Vercel или Netlify не применялись автоматически. Вам может понадобиться повторный ручной пересбор.

Теперь ваш деплой автоматически выполняется каждый раз, как только вы пушите изменения. Ну разве это не магия?