Рубрики
Uncategorized

Введение в непрерывную интеграцию и доставку с семафором 2.0

Пошаговый учебник для новой платформы CI / CD с простым веб-проектом. Теги с WebDev, начинающими, CICD, DEVOPS.

Семафор 2.0 запущен недавно С трубопроводами CI/CD, которые могут быть настроены для любого рабочего процесса и модели Pay-As-You-Go. Будь вы использовали семафор в прошлом или нет, он приносит много новых вещей для стола.

В этом посте мы узнаем основные функции, создав сборку, тестируйте и развернуть трубопровод для статического веб-сайта. Я хотел бы услышать, какой проект/стек Вы хотели бы видеть, охватываемые в одном из будущих статей — пожалуйста, дайте мне знать в комментариях.

Что в любом случае семафор?

Семафор Это облачная служба автоматизации для строительства, тестирования и развертывания программного обеспечения. Другими словами, вы используете его для реализации непрерывной интеграции (CI) и постоянных трубопроводов (CD).

Первая версия Semaphore запущена в 2012 году, назвала «хостинг CI, созданный для скорости и простоты», как противоядие к инструментам, которые сложны для использования и требуют большого количества обслуживания. Напротив семафоре не требует технического обслуживания и является самым быстрым облачным CI.

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

Hello World

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

В этот момент семафоре покажет вам три команды для запуска в вашем терминале. Во-первых, установите SEM CLI, который вы будете использовать для создания проектов:

curl https://storage.googleapis.com/sem-cli-releases/get.sh | bash

Подключите SEM к вашей новой учетной записи:

sem connect ORGANIZATION.semaphoreci.com ACCESS_TOKEN

Наконец, бегите SEM init внутри репозитория Git. Команда создает развертывание клавиши и веб -ookook на GitHub, так что семафор может получить доступ к вашему коду, так как он меняется, и создает файл определения трубопровода .semaphore./semaphore.yml Отказ

После последующей последней инструкции на Git push Файл, вы должны увидеть трубопровод, работающий в вашем браузере. Whaw!

Давайте распадаем, что здесь происходит.

Строительные блоки трубопроводов

В нашем примере Hello World у нас есть один трубопровод с четырьмя различными Блоки , который работает последовательно.

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

Таким образом, мы можем цепи столько трубопроводов, как мы хотели бы. Вообще, каждый Git push триггеры новый семафор рабочий процесс , который содержит один или несколько трубопроводов.

Теперь наш код проходит внутренние блоки. Блок содержит хотя бы один работа , что является последовательностью команд. Мы можем определить больше рабочих мест, а затем все пробежали параллельно. Каждая работа — это вселенная для себя — полностью изолированная виртуальная вирция, которая вращается в секунду и наследует конфигурацию своего «родительского блока», а также что-либо дополнительное, что мы его кормите. Вы можете запустить нативный код, докер контейнеров или изменить любой системный пакет. В нашем примере Hello World третий блок содержит три параллельных рабочих места.

Определение строительного трубопровода для нашего проекта

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

В этой демонстрации моя цель — строить и развернуть GATSBY.JS блог Я начинаю от GATSBY-Starter-Blog Шаблон и процесс включает в себя следующее:

  • Получить код
  • Установка зависимостей
  • Построить сайт
  • Разверните веб-сайт S3 на каждом изменении главной ветви
  • Бонус: запустите некоторые тесты пользовательского интерфейса на живом сайте

Давайте откроем наш .semaphore.yml.yml и полосу его до голых костей:

# .semaphore/semaphore.yml
version: v1.0
name: Gatsby build pipeline
agent:
  machine:
    type: e1-standard-2
    os_image: ubuntu1804

blocks:
  - name: ⏬ Install dependencies
    task:
      jobs:
      - name: npm install
        commands:
          - checkout
          - npm install

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

На данный момент Semaphore предоставляет одно изображение VM, На основании Ubuntu 18.04 LTS , с большей, чтобы прийти. Это будет служить нам хорошо для этого проекта.

Первая команда в нашем работе «Код сборки» является Оформить заказ Отказ Это требуемая команда всякий раз, когда вы работаете с исходным кодом — он загружает пересмотр, связанную с рабочим процессом. Команда на самом деле сценарий, который является Открытый исходный код .

Кэширование зависимостей

Для демонстрационных целей мы построим наш веб-сайт в отдельном блоке. Давайте посмотрим что-то, что не будет Работа как предполагаемая:

blocks:
  - name: ⏬ Install dependencies
    task:
      jobs:
      - name: npm install
        commands:
          - checkout
          - npm install

  - name: 🧱 Build site
    task:
      jobs:
      - name: build
        commands:
          - checkout
          - npm run build --prefix-paths #EEEK 💥

NPM Run Команда не пройдет жаловаться на отсутствие зависимостей. Это связано с тем, что файлы, созданные в одной работе или блоке, по умолчанию не передаются нигде, если мы не сделаем это так.

То, что мы хотим, это кэшировать каталог Node_Modules и повторно использовать его через трубопроводы и блоки. Среда семафора обеспечивает кэш CLI которые могут управлять общими файлами на основе в рамках проекта:

blocks:
  - name: ⏬ Install dependencies
    task:
      jobs:
      - name: npm install
        commands:
          - checkout
          # Try to restore node modules from a previous run,
          # first for the current version of package.lock, but if that fails
          # get any previous bundle:
          - cache restore node-modules-$(checksum package-lock.json),node-modules-
          - npm install
          # Store new content in cache:
          - cache store node-modules-$(checksum package-lock.json) node_modules

  - name: 🧱 Build site
    task:
      jobs:
      - name: build
        commands:
          - checkout
          - cache restore node-modules-$(checksum package-lock.json),node-modules-
          - npm run build --prefix-paths

С этой конфигурацией мы динамически генерируем ключ кэша в зависимости от содержания Package-lock.json Отказ Мы также используем ответный ключ, что кэш восстановить может попытаться частично совпадать. В результате большинство рабочих процессов будут испытывать попадание кеша, что снижает время выполнения CI более чем 20 секунд.

Примечание: для NPM запустить сборку Работать без установки GATSBY-CLI как глобальный пакет, я изменил package.json Чтобы включить его в список зависимостей:

"dependencies": {
    "gatsby": "^2.0.19",
    "gatsby-cli": "^2.0.19"
  }

и связал двоичный

"scripts": {
    "gatsby": "./node_modules/.bin/gatsby"
  }

Настройка продвижения для непрерывного развертывания

В конце нашего построения трубопровода, как определено в .semaphore.yml.yml Мы создали файлы сайта в Публичный/ каталог, который готов к выложению. Пришло время настроить продвижение, которое вызвало бы трубопровод развертывания на главной ветке. Наша окончательная конфигурация для конвейера сборки выглядит следующим образом:

# .semaphore/semaphore.yml
version: v1.0
name: Gatsby build pipeline
agent:
  machine:
    type: e1-standard-2
    os_image: ubuntu1804

blocks:
  - name: ⏬ Install dependencies
    task:
      jobs:
      - name: npm install
        commands:
          - checkout
          - cache restore node-modules-$(checksum package-lock.json),node-modules-
          - npm install
          - cache store node-modules-$(checksum package-lock.json) node_modules


  - name: 🧱 Build site
    task:
      jobs:
      - name: build
        commands:
          - checkout
          - cache restore node-modules-$(checksum package-lock.json),node-modules-
          - npm run build --prefix-path
          # Store the website files to be reused in the deployment pipeline:
          - cache store website-build public

promotions:
  - name: Deploy to production
    pipeline_file: production-deploy.yml
    auto_promote_on:
      - result: passed
        branch:
          - master

В нашем случае мы использовали auto_proomote_on Свойство, чтобы определить продвижение, которая автоматически работает, когда трубопровод успешно работает на главной ветке. Еще много вариантов доступны, Как описано в семафоре документации . Мы определим, что будет дальше в новом файле конфигурации трубопровода, Производственный развертывание .YML Отказ

Трубопровод развертывания

Мы разверним сайт AWS S3. Детали подготовки к этому на AWS находятся за пределами этой статьи, но по сути вам нужно:

  • Создать новое ведро;
  • Отключите все ограничения общественного доступа, в разрешениях> вкладка «Настройки публичных доступов»;
  • Разрешить каждому спистить контент для ведра, в разрешениях> вкладки списка контроля доступа;
  • Включите свойство «STATATION HOSTING».

Вы можете найти больше деталей в AWS Документация Отказ

Как только ведро будет готово, нам нужно выполнить что-то вроде:

aws s3 sync "public" "s3://name-of-our-bucket" --acl "public-read"

AWS S3 Sync Работает, когда у вас есть AWS CLI установлен и подключен к действительной учетной записи. Среда семафора имеет предустановленную AWS CLI Breastalled Так что о чем осталось предоставить полномочия. Безопасный способ сделать это — создать секрет И убедитесь на нашем трубопроводе развертывания.

Управление конфиденциальными данными с секретами

Личная информация, такая как ключи API или развертывание учетных данных, не должны храниться в Git. На семафоре вы определяете эти значения как Секреты, используя SEM CLI Отказ Секреты разделяются всеми проектами в Организации.

Предполагая, что вы хотите пройти местный ~/.aws Учетные данные в семафор, выполните следующую команду:

sem create secret aws-credentials \
  --file ~/.aws/config:/home/semaphore/.aws/config \
  --file ~/.aws/credentials:/home/semaphore/.aws/credentials

Вы можете проверить определение секрета для проверки — вы увидите содержимое файлов Base64-кодировки:

$ sem get secret aws-credentials
apiVersion: v1beta
kind: Secret
metadata:
  name: aws-credentials
  id: 5d41c356-7d72-491b-b705-6a86667c50f3
  create_time: "1544622386"
  update_time: "1544622386"
data:
  env_vars: []
  files:
  - path: /home/semaphore/.aws/config
    content: W2RlZmF1bHRdCnJlZ2lvbiA9IHFzLWVhc3QtMQo=
  - path: /home/semaphore/.aws/credentials
    content: W2RlZmF1bHRdCmF3c19hY2Nlc3Nfa2V5X2lkID...

Выглядит хорошо — если мы включаем AWS-TOVALES Секрет в конфигурации трубопровода, наш ~/.aws Файлы будут доступны в домашнем каталоге VM Semaphore, и все AWS Команды будут работать как предназначено.

Секрет является редактируемым ресурсом: вы можете запустить СЭМ редактировать секретные AWS-учетные данные Чтобы добавить переменные среды или дополнительные файлы.

Трубопровод развертывания производства

Наконец-то давайте определим наш производственный трубопровод по развертыванию:

# .semaphore/production-deploy.yml
version: v1.0
name: Deploy website
agent:
  machine:
    type: e1-standard-2
    os_image: ubuntu1804
blocks:
  - name: 🏁 Deploy
    task:
      secrets:
        - name: aws-credentials
      jobs:
        - name: Copy to S3
          commands:
            - cache restore website-build
            - aws s3 sync "public" "s3://bucket-name" --acl "public-read"

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

Обратите внимание на отсутствие Оформить заказ Команда, так как нам не нужен наш исходный код на данный момент.

URL вашего ведра — http://bucket-name.s3-website-us-east-hot-1.amazonaws.com Отказ Заменить Ведро имя с именем вашего ведра, а US-East-1 С кодом другого региона на случай, если вы не пошли по умолчанию. Если все прошло хорошо, вы должны увидеть ваш сайт:

Итак, далее, каждое изменение исходного кода вашего блога будет автоматически развернута. 🎉

Запустите тесты пользовательских интерфейсов после развертывания

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

Мы будем использовать Nightwatch.js Так что начните с добавления его на package.json Список зависимостей:

"dependencies": {
  "nightwatch": "^0.9.21"
}

Также в том же файле определите ярлык сценария:

"scripts": {
  "nightwatch": "./node_modules/.bin/nightwatch"
}

Обновите список зависимостей с NPM установить Отказ

Следующий шаг — создать тестовый файл. Чтобы все было простым, мы просто проверим наличие ожидаемой страницы. Вы можете найти дополнительную информацию о тестировании веб-страниц в NightWatch Documentation.

// tests/postdeploy.js
module.exports = {
  'Test live website' : function (client) {
    client
      .url('http://bucket-name.s3-website-us-east-1.amazonaws.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Gatsby Starter Blog')
      .end();
  }
};

Конечно, не забудьте заменить Ведро имя с именем вашего ведра S3.

Чтобы запустить тесты с Nightwatch, нам нужен Selenium. Загрузите последний драйвер Selenium и поместите его в новый каталог внутри вашего проекта:

mkdir .bin
wget https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar
mv selenium-server-standalone-3.141.59.jar .bin/selenium.jar

Скопируйте пример Nightwatch.json Файл из Nightwatch Начало работы Руководство и измените Селен Настройки для автоматического запуска сервера SELENIUM при запуске тестов на основе нашего файла локального сервера:

// nightwatch.json
"selenium" : {
    "start_process" : true,
    "server_path" : ".bin/selenium.jar"
}

Наконец, давайте расширим наш трубопровод развертывания с другим блоком:

# .semaphore/production-deploy.yml
version: v1.0
name: Deploy website
agent:
  machine:
    type: e1-standard-2
    os_image: ubuntu1804
blocks:
  - name: 🏁 Deploy
    task:
      secrets:
        - name: aws-credentials
      jobs:
        - name: Copy to S3
          commands:
            - cache restore website-build
            - aws s3 sync "public" "s3://bucket-name" --acl "public-read"

  - name: 🔍 UI tests
    task:
      jobs:
        - name: Check live website
          commands:
            - checkout
            - cache restore node-modules-$(checksum package-lock.json),node-modules-
            - npm run nightwatch

Когда вы совершаете и вытесните все новые файлы и изменения, ваш трубопровод развертывания должен запускать тесты со следующим выходом:

npm run nightwatch

> gatsby-starter-blog@1.0.0 nightwatch /home/semaphore/gatsby-blog
> nightwatch

Starting selenium server... started - PID:  3239

[Postdeploy] Test Suite
===========================

Running:  Test live website
 ✔ Element  was visible after 98 milliseconds.
 ✔ Testing if the page title equals "Gatsby Starter Blog".

OK. 2 assertions passed. (2.891s)

И ваш полный рабочий процесс семафора выглядит так:

Милая! Мы успешно создали непрерывный трубопровод по доставке, включая безопасность автоматизированных тестов, которые предупреждают нас на случай, если мы что-то сломало. Мы заслуживаем напитка. 🍻🥂🥃🥛. 🥤

Вся код и конфигурация это Доступно на Github :

Маркоа/GATSBY-BLOG

Простой проект CI/CD для статического веб-сайта, используя семафор.

Запустить локально:

npm install
npm run start
npm run nightwatch

Для полного пошагового руководства прочитайте статью на dev.to.

Спасибо за прочтение! Я надеюсь, что эта статья поможет вам начать с CI/CD и Семафор 2.0 Отказ Если есть проект CI/CD, который вы хотели бы видеть, охватываемые в будущем посте, пожалуйста, дайте мне знать в комментариях. ✌️.

Оригинал: «https://dev.to/markoa/introduction-to-continuous-integration-and-delivery-with-semaphore-20-3k0m»