Непрерывное развертывание приложений React с помощью CircleCI и Kinsta API

Непрерывное развертывание стало решающим фактором в быстро развивающейся среде разработки программного обеспечения. Он обещает более быстрые циклы выпуска, сокращение человеческих ошибок и, в конечном итоге, лучший пользовательский опыт.

Разработка программного обеспечения предполагает решение реальных проблем с помощью кода. Путь программного обеспечения от создания до потребителя включает в себя множество этапов, требующих скорости, безопасности и надежности. Именно здесь проявляется непрерывное развертывание.

В этой статье объясняется, как интегрировать платформу CircleCI для создания рабочего процесса непрерывной интеграции и непрерывной доставки/развертывания (CI/CD), одновременно используя возможности Kinsta API для непрерывного развертывания приложений — как в нашем примере React здесь. Эта комбинация может проложить плавный путь от разработки к производству.

Понимание непрерывного развертывания

Непрерывное развертывание — это больше, чем просто модное словечко: это сдвиг парадигмы в разработке программного обеспечения. Он включает в себя автоматизацию процесса создания, тестирования и развертывания изменений кода на производственных серверах.

Конвейер CI/CD — фундаментальный компонент непрерывного развертывания — управляет всем процессом. Он включает в себя контроль версий, автоматическое тестирование и автоматическое развертывание. Каждый этап имеет решающее значение для обеспечения того, чтобы в рабочую среду попадал только надежный, проверенный код.

Что такое CircleCI?

CircleCI — популярный инструмент для реализации CI/CD. Он интегрируется с системами контроля версий, такими как GitHub, GitLab и Bitbucket, что позволяет разработчикам автоматизировать весь конвейер CI/CD. Его масштабируемость, расширяемость и поддержка различных языков программирования делают его универсальным инструментом для проектов любого размера.

Разработчики CircleCI определяют рабочие процессы, которые автоматически запускаются при фиксации кода. Это инициирует процессы сборки и тестирования, а после успешного завершения развертывает код в целевой среде. Такой подход невмешательства не только экономит время, но и снижает риск человеческих ошибок во время развертывания.

Понимание API Kinsta

API Kinsta позволяет вам программно взаимодействовать со службами, размещенными на Kinsta, при этом развертывание приложений является частью его функциональности. При работе с рабочими процессами CI/CD вы будете использовать команду cURL для взаимодействия с API Kinsta из рабочего процесса.

Чтобы использовать API, у вас должна быть учетная запись хотя бы на одном сайте, приложении или базе данных WordPress в MyKinsta. Затем вы можете сгенерировать ключ API для аутентификации вашего доступа к API.

Чтобы сгенерировать ключ API:

1. Перейдите на панель управления MyKinsta.
2. Перейдите к API-ключи страница (Ваше имя > Настройки компании > API-ключи).
3. Нажмите Создать ключ API.
4. Выберите срок действия или установите собственную дату начала и количество часов, в течение которых истечет срок действия ключа.
5. Дайте ключу уникальное имя.
6. Нажмите Генерировать.

После создания ключа API скопируйте его и сохраните в безопасном месте (рекомендуем использовать менеджер паролей), так как это только время это раскрывается в MyKinsta.

Как запустить развертывание с помощью Kinsta API

Чтобы инициировать развертывание приложения в Kinsta с помощью API, вам понадобится идентификатор приложения и имя развертываемой ветки в репозитории Git. Вы можете получить идентификатор вашего приложения, сначала получив список ваших приложений, в котором будут представлены сведения о каждом приложении, включая его идентификатор.

Затем вы можете сделать POST-запрос к API. /applications/deployments конечная точка с помощью команды cURL:

curl -i -X POST \
  https://api.kinsta.com/v2/applications/deployments \
  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' \
  -H 'Content-Type: application/json' \
  -d '{
    "app_id": "<YOUR_APP_ID>",
    "branch": "main"
  }'

Эта команда cURL будет использоваться в рабочем процессе.

Начало работы с CircleCI

Чтобы начать работу с CircleCI, вам понадобится исходный код, размещенный у предпочитаемого вами провайдера Git. В этом уроке давайте воспользуемся приложением для создания сайтов, разработанным для урока «Как создать сайт WordPress с помощью Kinsta API». Не стесняйтесь использовать репозиторий, перейдя к нему на GitHub и выбрав: Используйте этот шаблон > Создать новый репозиторий.

В приложении React для тестирования каждого компонента создаются модульные тесты. ESLint также используется для обеспечения идеального синтаксиса и форматирования кода. Давайте настроим рабочий процесс CI/CD, который будет создавать, тестировать, проверять правильность синтаксиса нашего кода и, наконец, развертывать его в Kinsta с помощью API.

Для начала давайте рассмотрим некоторые ключевые понятия:

1. Рабочие процессы: CircleCI основан на рабочих процессах — определенных последовательностях заданий, описывающих этапы вашего конвейера CI/CD. Рабочие процессы могут включать в себя различные этапы, такие как сборка, тестирование, развертывание и многое другое.
2. Вакансии: Задания — это отдельные единицы работы в рамках рабочего процесса. Каждое задание выполняет определенную задачу, например компиляцию кода, запуск тестов или развертывание на сервере. Эти задания также могут включать в себя различные шаги, которые выполняются последовательно (параллельное выполнение), так что в случае сбоя одного из них происходит сбой всего задания.

Шаг 1. Создайте учетную запись CircleCI

Посетите веб-сайт CircleCI и создайте учетную запись, если у вас ее еще нет. Вы можете зарегистрироваться, используя предпочитаемого вами провайдера Git. Это упрощает доступ к вашим репозиториям без дальнейшей настройки.

Шаг 2. Создайте файл конфигурации

В корневом каталоге вашего проекта создайте .circleci папку, если она не существует, и в этой папке создайте папку config.yml файл. В этом файле будет храниться конфигурация вашего рабочего процесса.

Шаг 3. Настройте свой репозиторий

После входа в систему перейдите на панель управления CircleCI и нажмите Проекты на левой боковой панели, чтобы просмотреть список репозиториев, и нажмите кнопку Настроить проект Кнопка для репозитория, который вы хотите настроить.

Откроется диалоговое окно, в котором CircleCI автоматически обнаружит ваш файл конфигурации. Далее нажмите кнопку Настроить проект кнопка. Теперь CircleCI может получить доступ к вашей базе кода и выполнять определенные рабочие процессы при изменении кода.

Шаг 4. Определите задачу вашего рабочего процесса

В основе настройки конвейера CircleCI лежит этот важный шаг: определение рабочего процесса в рамках config.yml файл. Здесь вы управляете последовательностью действий, которые будет выполнять ваш конвейер. Это похоже на набросок плана вашего пути от разработки к производству.

Это начинается с определения версии CircleCI, которая в настоящее время 2.1:

version: 2.1

Вам понадобится build работа для каждого проекта React. Эта работа решает фундаментальные задачи, которые подготавливают ваш код к развертыванию. Эти задачи включают в себя установку необходимых зависимостей, компиляцию кода, запуск тестов, чтобы убедиться, что все работает гладко, проверку качества кода и, наконец, доставку кода по назначению.

Поскольку для выполнения работы проектам React часто требуются такие инструменты, как Node.js, CircleCI упрощает доступ к этим инструментам, предлагая их в виде предварительно упакованных образов. В этом руководстве укажите версию Node.js, которую вы хотите использовать. Давайте использовать Node.js v20.

jobs:
  build:
    docker:
      - image: cimg/node:20.5.0

Это задание будет выполнять различные шаги, поэтому давайте их создадим. Первый шаг checkoutкоторый извлекает последнюю версию вашего кода из репозитория, чтобы все последующие действия выполнялись с последней версией кода.

steps:
  - checkout

Теперь перейдем к самой сути работы — доводить дело до конца. Следующие шаги checkout охватывают ключевые задачи: установку зависимостей, компиляцию исходного кода, запуск модульных тестов и использование ESLint для проверки вашего кода на наличие красных флажков.

steps:
  - checkout
  - run:
      name: Install Dependencies
      command: npm install
  - run:
      name: Compile Source Code
      command: npm run build
  - run:
      name: Run Unit Tests
      command: npm test
  - run:
      name: Run ESLint
      command: npm run lint

Каждый шаг, как указатели на пути, имеет свое название, чтобы помочь вам отслеживать, что происходит, когда рабочий процесс идет полным ходом. Такая ясность позволяет легко устранять неполадки и следить за тем, чтобы все было в порядке в ходе рабочего процесса.

Запуск непрерывного развертывания в Kinsta

Последний шаг в build Задача — инициировать развертывание в Kinsta через API. Для этого требуются два значения: ваш API-ключ и Идентификатор приложения, который не должен быть общедоступным. Эти значения будут сохранены как переменные среды в CircleCI. А пока давайте определим этап развертывания в рабочем процессе:

- run:
    name: Deploy to Kinsta
    command: |
      curl -i -X POST \
        https://api.kinsta.com/v2/applications/deployments \
        -H "Authorization: Bearer $API_KEY" \
        -H "Content-Type: application/json" \
        -d '{
          "app_id": "'"$APP_ID"'",
          "branch": "main"
        }'

В предоставленном коде вы запускаете команду cURL, чтобы инициировать развертывание, используя идентификатор приложения, хранящийся в переменных среды. Помните, что доступ к переменным среды осуществляется с использованием синтаксиса:

"$VARIABLE_NAME"

Хранение переменных среды с помощью CircleCI

Переменные среды имеют решающее значение для обеспечения безопасности и гибкости рабочих процессов непрерывной интеграции и развертывания. Чтобы сохранить переменные среды в CircleCI, выполните следующие действия:

1. Откройте свой проект, чтобы просмотреть все подробности о своем конвейере, и нажмите кнопку Настройки проекта кнопка.
2. Нажмите кнопку Переменные среды вкладку на боковой панели и добавьте переменные среды.

Шаг 5. Настройка рабочего процесса

После того, как ваши задания настроены и структурированы по последовательным этапам, следующим этапом станет настройка рабочего процесса. Рабочий процесс действует как оркестратор, определяющий последовательность заданий и включающий специальные фильтры и правила, определяющие, как эти задания выполняются.

В этом руководстве мы создадим рабочий процесс, который запускает задание сборки исключительно при отправке или изменении кода в хранилище. main ветвь:

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

Эта конфигурация достигается с помощью фильтров, которые позволяют вам контролировать запуск задания в зависимости от определенных условий. Вы также можете включить триггеры, чтобы запланировать выполнение рабочего процесса (пример: ежедневно в 12:00 по всемирному координированному времени):

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
    triggers:
      - schedule:
          cron: "0 0 * * *"

Вышеупомянутый рабочий процесс включает в себя trigger определяется с помощью schedule ключевое слово. Выражение cron "0 0 * * *" соответствует планированию рабочего процесса в полночь по всемирному координированному времени каждый день.

В выражении cron есть пять полей, разделенных пробелами, каждое из которых представляет отдельную единицу времени:

1. Минута (0-59): Первое поле представляет минуту часа, установленную на 0 срабатывать в начале часа.
2. Час (0-23): Второе поле обозначает час дня, установленный на 0 на полночь.
3. День месяца (1-31): Третье поле обозначает день, отмеченный звездочкой (*) на любой день.
4. Месяц (1-12): Четвертое поле представляет месяц, отмеченный звездочкой (*) за любой месяц.
5. День недели (0–6, где 0 — воскресенье): Пятое поле обозначает день недели, также отмеченный звездочкой (*) на любой день.

Благодаря такой конфигурации рабочего процесса вы можете эффективно управлять тем, когда и при каких условиях выполняются определенные вами задания, поддерживая эффективный и оптимизированный конвейер CI/CD.

Шаг 6: Примите меры и наблюдайте

После успешной настройки рабочего процесса зафиксируйте изменения в репозитории контроля версий. CircleCI автоматически обнаружит наличие файла конфигурации и запустит определенные вами рабочие процессы при изменении кода.

Щелкните задание сборки, чтобы просмотреть его сведения. Если у вас несколько вакансий, они все будут перечислены. Когда вы нажимаете на задание, ШАГИ На вкладке будут показаны все шаги, выполненные заданием, а также их успешные или неудачные действия.

Вы также можете нажать на каждый шаг, чтобы просмотреть более подробную информацию. Когда вы нажмете кнопку Развертывание в Кинсте шаге, вы увидите более подробную информацию о запросе API и узнаете, успешен ли он:

Когда вы проверите свою панель управления MyKinsta, вы заметите, что рабочий процесс автоматически запускает развертывание. Вот как выглядит полный рабочий процесс CircleCI:

version: 2.1
jobs:
  build:
    docker:
      - image: cimg/node:20.5.0
    steps:
      - checkout # Check out the code from the repository
      - run:
          name: Install Dependencies
          command: npm install
      - run:
          name: Compile Source Code
          command: npm run build
      - run:
          name: Run Unit Tests
          command: npm test
      - run:
          name: Run ESLint
          command: npm run lint
- run:
    name: Deploy to Kinsta
    command: |
      curl -i -X POST \
        https://api.kinsta.com/v2/applications/deployments \
        -H "Authorization: Bearer $API_KEY" \
        -H "Content-Type: application/json" \
        -d '{
          "app_id": "'"$APP_ID"'",
          "branch": "main"
        }'

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

Краткое содержание

Теперь вы успешно выполнили индивидуальный процесс развертывания вашего приложения React в Kinsta через CircleCI. Такой подход дает вам повышенную гибкость и полномочия над вашими развертываниями, позволяя вашей команде выполнять специализированные шаги в рамках процесса.

Принимая CircleCI, вы делаете существенный шаг на пути к совершенствованию своих методологий разработки. Автоматизация конвейера CI/CD не только гарантирует качество вашего кода, но и ускоряет циклы выпуска.

Как вы используете Kinsta API? Какие конечные точки вы хотели бы добавить в API? Какое руководство по API Kinsta вы бы хотели прочитать следующим?