TOC

Развертывание приложений React с помощью Webhooks и Slack на Ubuntu 16.04

Автор выбралTech Education Fund для получения пожертвования в рамках программыWrite for DOnations.

Вступление

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

В этом руководстве вы создадите приложение React сcreate-react-app npm package. Этот пакет упрощает работу по начальной загрузке проекта React путем передачи синтаксиса и оптимизации работы с зависимостями и необходимыми инструментами. После добавления кода приложения в репозиторий GitHub вы настроите Nginx для обслуживания обновленных файлов проекта. Затем вы загрузите и настроите сервер webhook и сконфигурируете GitHub для связи с ним при изменении кода. Наконец, вы настроите Slack для работы в качестве другого сервера webhook, который будет получать уведомления при успешном развертывании.

В конечном итоге система развертывания, которую вы строите в этой статье, будет выглядеть следующим образом:

Sample deployment

В этом коротком видео показано пустое принятие и отправка в репозиторий GitHub, который запускает сборку приложений и уведомления в Slack.

Предпосылки

Для завершения этого урока вам понадобится:

  • Сервер Ubuntu 16.04, который вы можете настроить, выполнивInitial Server Setup with Ubuntu 16.04 tutorial. Следуя этому руководству, вы должны иметь учетную запись пользователя без полномочий root с правами sudo.

  • Nginx установлен на вашем сервере, выполнив первые два шагаHow To Install Nginx on Ubuntu 16.04.

  • Git настроен как на вашем локальном компьютере, так и на вашем сервере. Вы можете найти инструкции по установке и настройке Git в этом руководстве наgetting started with Git.

  • Node.js and npm installed on your local machine and server. Для вашего сервера следуйте инструкциям по установке Node.js из PPA вHow To Install Node.js on Ubuntu 16.04. На вашем локальном компьютере вы можете следоватьproject’s installation directions.

  • Yarn установлен на вашем сервере, следуя официальному руководству поinstalling yarn.

  • Разрешения для настройки Slack и отдельных каналов для уведомлений. Вы можете найти больше информации о ролях и разрешениях вSlack permissions docs.

[[step-1 -—- created-a-react-application-using-create-react-app]] == Шаг 1. Создание приложения React с помощью create-react-app

Давайте сначала создадим приложение, которое мы будем использовать для тестирования наших веб-перехватчиков с помощьюcreate-react-app. Затем мы можем создать репозиторий GitHub и вставить в него код проекта.

На локальном компьютере добавьте модуль узлаcreate-react-app в глобальный репозиторий и сделайте командуcreate-react-app доступной в среде оболочки: 

sudo npm install -g create-react-app

Затем запуститеcreate-react-app, чтобы создать проект под названиемdo-react-example-app: 

create-react-app do-react-example-app

Перейдите в каталогdo-react-example-app: 

cd do-react-example-app

С помощьюnano или вашего любимого текстового редактора откройте файлpackage.json: 

nano package.json

Файл должен выглядеть так:

~/do-react-example-app/package.json

{
  "name": "do-react-example-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Файлpackage.json включает следующие сценарии:

  • start: этот сценарий отвечает за запуск разрабатываемой версии приложения. Он запускает HTTP-сервер, который обслуживает приложение.

  • build: этот сценарий отвечает за создание производственной версии приложения. Вы будете использовать этот скрипт на сервере.

  • test: этот сценарий запускает тесты по умолчанию, связанные с проектом.

  • eject: этот сценарий является расширенной функцией пакетаcreate-react-app. Если разработчик не удовлетворен средой сборки, предлагаемой пакетом, можно «выбросить» приложение, которое выдаст параметры, которые в противном случае недоступны (включая такие вещи, как пользовательские транспортеры CSS и инструменты обработки JS).

Закройте файл, когда вы закончите проверку кода.

Далее давайте создадим GitHub-репозиторий для проекта. Вы можете следовать этому руководству наcreating a GitHub repository в качестве руководства. Принять к сведению происхождение хранилища (т.е. его URL GitHub).

Вернувшись в каталогdo-react-example-app, инициализируйте репозиторий с помощьюgit: 

git init

Затем добавьте удаленный источник с URL вашего GitHub: 

git remote add origin your-github-url

Поместите все файлы в каталог проекта: 

git add .

Передайте их: 

git commit -m "initial commit"

И подтолкнуть их в хранилище: 

git push origin master

Для получения дополнительной информации о создании репозиториев GitHub и инициализации существующих приложений с помощьюgit см.documentation на GitHub.

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

[[step-2 -—- directory-set-up-and-nginx-configuration]] == Шаг 2 - Настройка каталога и конфигурация Nginx

С хранилищем на месте теперь можно получить код приложения из GitHub и настроить Nginx для обслуживания приложения.

Войдите на свой сервер, перейдите в домашний каталог и клонируйте свой репозиторий: 

cd ~
git clone your-github-url

Перейти к клонированному проекту: 

cd do-react-example-app

Чтобы создать каталог сборки в проекте и файлы для обслуживания Nginx, вам нужно будет запустить командуyarn build. Это запускает скрипт сборки для проекта, создавая каталог сборки. Эта папка включает, среди прочего, файлindex.html, файл JavaScript и файл CSS. Командаyarn загрузит все необходимые модули узлов для вашего проекта: 

yarn && yarn build

Затем давайте создадим символическую ссылку в каталоге/var/www/ на каталог~/do-react-example-app. Это сохранит приложение в нашем домашнем каталоге, а Nginx сделает его доступным для обслуживания из каталога/var/www: 

sudo ln -s ~/do-react-example-app /var/www/do-react-example-app

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

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

sudo chmod -R 755 /var/www

Далее, давайте настроим блок сервера Nginx для обслуживания каталога сборки. Создайте новую конфигурацию сервера, набрав: 

sudo nano /etc/nginx/sites-available/test-server

Скопируйте следующую конфигурацию, заменивyour_server_ip_or_domain своим IP-адресом или доменом (если применимо):

/etc/nginx/sites-available/test-server

server {
        listen 80;

        root /var/www/do-react-example-app/build;
        index index.html index.htm index.nginx-debian.html;

        server_name your_server_ip_or_domain;

        location / {
                try_files $uri /index.html;
        }
}

Директивы в этом файле включают в себя:

  • listen: свойство, которое настраивает порт прослушивания сервера.

  • root: путь к папке, из которой Ngnix будет обслуживать файлы.

  • index: файл, который сервер пытается обслужить первым. Он попытается обслужить любой из следующих файлов из каталога/var/www/do-react-example-app/build:index.html,index.htm,index.nginx-debian.html, с приоритетом от первого до последнего.

  • server_name: доменное имя или IP-адрес сервера.

Затем создайте символическую ссылку в каталогеsites-enabled: 

sudo ln -s /etc/nginx/sites-available/test-server /etc/nginx/sites-enabled/test-server

Это скажет Nginx включить конфигурацию блока сервера из папки `sites-available`.

Проверьте правильность конфигурации: 

sudo nginx -t

Наконец, перезапустите Nginx, чтобы применить новую конфигурацию: 

sudo systemctl restart nginx

С этими деталями конфигурации мы можем перейти к настройке webhook.

[[step-3 -—- install-and-configuring-webhooks]] == Шаг 3 - Установка и настройка Webhooks

Веб-перехватчики - это простые HTTP-серверы с настраиваемыми конечными точками, называемымиhooks. После получения HTTP-запросов серверы webhook выполняют настраиваемый код, который соответствует набору настраиваемых правил. Уже есть много серверов webhook, интегрированных в приложения через Интернет, включая Slack.

Самая распространенная реализация сервера веб-перехватчиков -Webhook, написанная на Go. Мы будем использовать этот инструмент для настройки нашего сервера webhook.

Убедитесь, что вы находитесь в своем домашнем каталоге на вашем сервере: 

cd ~

Затем загрузитеwebhook: 

wget https://github.com/adnanh/webhook/releases/download/2.6.6/webhook-linux-amd64.tar.gz

Извлеките это: 

tar -xvf webhook-linux-amd64.tar.gz

Сделайте двоичный файл доступным в вашей среде, переместив его в/usr/local/bin: 

sudo mv webhook-linux-amd64/webhook /usr/local/bin

Наконец, очистите загруженные файлы: 

rm -rf webhook-linux-amd64*

Проверьте доступностьwebhook в вашей среде, набрав: 

webhook -version

Вывод должен отображать версиюwebhook: 

Outputwebhook version 2.6.5

Затем давайте настроим папкиhooks иscripts в каталоге/opt+`directory, where files for third-party applications usually go. Since the `+/opt, который обычно принадлежитroot, мы можем создать каталоги с правами root, а затем передать владение локальному$USERс.

Сначала создайте каталоги: 

sudo mkdir /opt/scripts
sudo mkdir /opt/hooks

Затем передайте право собственности вашему$USER: 

sudo chown -R $USER:$USER /opt/scripts
sudo chown -R $USER:$USER /opt/hooks

Затем давайте настроим серверwebhook, создав файлhooks.json. С помощьюnano или вашего любимого редактора создайте файлhooks.json в каталоге/opt/hooks: 

nano /opt/hooks/hooks.json

Чтобыwebhook запускался, когда GitHub отправляет HTTP-запросы, нашему файлу потребуется массив правил JSON. Эти правила состоят из следующих свойств: 

{
    "id": "",
    "execute-command": "",
    "command-working-directory": "",
    "pass-arguments-to-command": [],
    "trigger-rule": {}
}

В частности, эти правила определяют следующую информацию:

  • id: имя конечной точки, которую будет обслуживать сервер веб-перехватчика. Мы назовем этоredeploy-app.

  • execute-command: путь к сценарию, который будет выполняться при срабатывании ловушки. В нашем случае это будет скриптredeploy.sh, расположенный в/opt/scripts/redeploy.sh.

  • command-working-directory: рабочий каталог, который будет использоваться при выполнении команды. Мы будем использовать/opt/scripts, потому что именно там находитсяredeploy.sh.

  • pass-arguments-to-command: параметры, переданные скрипту из HTTP-запроса. Мы передадим сообщение фиксации, имя отправителя и идентификатор фиксации из полезной нагрузки HTTP-запроса. Эта же информация будет также включена в ваши сообщения Slack.

Файл/opt/hooks/hooks.json должен содержать следующую информацию:

/opt/hooks/hooks.json

[
  {
    "id": "redeploy-app",
    "execute-command": "/opt/scripts/redeploy.sh",
    "command-working-directory": "/opt/scripts",
    "pass-arguments-to-command":
    [
      {
        "source": "payload",
        "name": "head_commit.message"
      },
      {
        "source": "payload",
        "name": "pusher.name"
      },
      {
        "source": "payload",
        "name": "head_commit.id"
      }
    ],
    "trigger-rule": {}
  }
]

Полезная нагрузка запроса GitHub HTTP POST включает свойстваhead_commit.message,pusher.name иhead_commit.id. Когда настроенное событие (например, PUSH) происходит в вашем репозитории GitHub, GitHub отправит запрос POST с телом JSON, содержащим информацию о событии. Некоторые примеры этих полезных данных POST можно найти вGitHub Event Types docs.

Последнее свойство в файле конфигурации - это свойствоtrigger-rule, которое сообщает серверу веб-перехватчика, при каком условии будет срабатывать перехватчик. Если оставить пустым, крюк всегда будет срабатывать. В нашем случае мы настроим ловушку, которая будет запускаться, когда GitHub отправляет запрос POST на наш сервер webhook. В частности, он будет срабатывать только в том случае, если секрет GitHub (обозначенный здесь какyour-github-secret) в HTTP-запросе совпадает с секретом в правиле, и фиксация произошла в веткеmaster.

Добавьте следующий код для определенияtrigger-rule, заменивyour-github-secret паролем по вашему выбору: 

...
    "trigger-rule":
    {
      "and":
      [
        {
          "match":
          {
            "type": "payload-hash-sha1",
            "secret": "your-github-secret",
            "parameter":
            {
              "source": "header",
              "name": "X-Hub-Signature"
            }
          }
        },
        {
          "match":
          {
            "type": "value",
            "value": "refs/heads/master",
            "parameter":
            {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  }
]

В полном объеме/opt/hooks/hooks.json будет выглядеть так:

/opt/hooks/hooks.json

[
  {
    "id": "redeploy-app",
    "execute-command": "/opt/scripts/redeploy.sh",
    "command-working-directory": "/opt/scripts",
    "pass-arguments-to-command":
    [
      {
        "source": "payload",
        "name": "head_commit.message"
      },
      {
        "source": "payload",
        "name": "pusher.name"
      },
      {
        "source": "payload",
        "name": "head_commit.id"
      }
    ],
    "trigger-rule":
    {
      "and":
      [
        {
          "match":
          {
            "type": "payload-hash-sha1",
            "secret": "your-github-secret",
            "parameter":
            {
              "source": "header",
              "name": "X-Hub-Signature"
            }
          }
        },
        {
          "match":
          {
            "type": "value",
            "value": "refs/heads/master",
            "parameter":
            {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  }
]

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

sudo ufw status

Если порт9000 не включен в список, включите его: 

sudo ufw allow 9000

Для получения дополнительной информации оufw см. Это введение вufw essentials.

Далее, давайте настроим наш репозиторий GitHub для отправки HTTP-запросов к этой конечной точке.

[[step-4 -—- configuring-github-notifications]] == Шаг 4. Настройка уведомлений GitHub

Давайте настроим наш репозиторий GitHub для отправки HTTP-запросов, когда происходит фиксация на master:

  • 1. Зайдите в свой репозиторий и щелкнитеSettings.

  • 2. Затем перейдите кWebhooks и щелкнитеAdd Webhook в правом верхнем углу.

  • 3. ДляPayload URL введите адрес вашего сервера следующим образом:http://your_server_ip:9000/hooks/redeploy-app. Если у вас есть доменное имя, вы можете использовать его вместоyour_server_ip. Обратите внимание, что имя конечной точки соответствует свойствуid в определении ловушки. Это деталь реализаций веб-перехватчиков: все перехватчики, определенные вhooks.json, будут отображаться в URL-адресе какhttp://your_server_ip:9000/hooks/id, гдеid - этоid в файлеhooks.json.

  • 4. ДляContent type выберитеapplication/json.

  • 5. ДляSecret введите секрет (your-github-secret), который вы установили в определенииhooks.json.

  • 6. ДляWhich events would you like to trigger this webhook? выберитеJust push event.

  • 7. Щелкните кнопкуAdd webhook.

Теперь, когда кто-то отправляет коммит в ваш репозиторий, GitHub отправит запрос POST с полезной нагрузкой, содержащей информацию о событии коммита. Среди других полезных свойств он будет содержать свойства, которые мы определили в правиле триггера, поэтому наш сервер webhook может проверить, был ли запрос POST действительным. Если это так, он будет содержать другую информацию, напримерpusher.name.

Полный список свойств, отправленных с полезной нагрузкой, можно найти вGitHub Webhooks page.

[[step-5 -—- writing-the-deploy-redeploy-script]] == Шаг 5. Написание сценария развертывания / повторного развертывания

На этом этапе мы указали веб-перехватчик на скриптredeploy.sh, но мы не создали сам скрипт. Он выполнит работу по извлечению последней ветки master из нашего репозитория, установке модулей узлов и выполнению команды build.

Создайте скрипт: 

nano /opt/scripts/redeploy.sh

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

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
      echo "Error occoured"
      # !!Placeholder for Slack notification
}
trap cleanup ERR

Это сообщает интерпретаторуbash, что если сценарий завершился внезапно, он должен запустить код в функцииcleanup.

Затем извлеките параметры, которыеwebhook передает скрипту при его выполнении:

/opt/scripts/redeploy.sh

...

commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id


# !!Placeholder for Slack notification

Обратите внимание, что порядок параметров соответствует свойствуpass-arguments-to-command из файлаhooks.json.

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

/opt/scripts/redeploy.sh

...

cd ~/do-react-example-app/
git pull origin master
yarn && yarn build

# !!Placeholder for Slack notification

Сценарий в полном объеме будет выглядеть так:

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
      echo "Error occoured"
      # !!Placeholder for Slack notification
}
trap cleanup ERR

commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id

# !!Placeholder for Slack notification

cd ~/do-react-example-app/
git pull origin master
yarn && yarn build

# !!Placeholder for Slack notification

Сценарий перейдет в папку, извлечет код из последней основной ветки, установит свежие пакеты и соберет рабочую версию приложения.

Обратите внимание на!!Placeholder for Slack notification. Это заполнитель для последнего шага в этом уроке. Без уведомлений нет реального способа узнать, правильно ли выполнен скрипт.

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

chmod +x /opt/scripts/redeploy.sh

Поскольку Nginx настроен для обслуживания файлов из/var/www/do-react-example-app/build, при выполнении этого скрипта каталог сборки будет обновлен, и Nginx автоматически будет обслуживать новые файлы.

Теперь мы готовы протестировать конфигурацию. Давайте запустим сервер webhook: 

webhook -hooks /opt/hooks/hooks.json -verbose

Параметр-hooks сообщаетwebhook расположение файла конфигурации.

Вы увидите этот вывод: 

Output[webhook] 2017/12/10 13:32:03 version 2.6.5 starting
[webhook] 2017/12/10 13:32:03 setting up os signal watcher
[webhook] 2017/12/10 13:32:03 attempting to load hooks from /opt/hooks/hooks.json
[webhook] 2017/12/10 13:32:03 os signal watcher ready
[webhook] 2017/12/10 13:32:03 found 1 hook(s) in file
[webhook] 2017/12/10 13:32:03   loaded: redeploy-app
[webhook] 2017/12/10 13:32:03 serving hooks on http://0.0.0.0:9000/hooks/{id}

Это говорит нам, что все загружено правильно и что наш сервер теперь обслуживает ловушкуredeploy-app через URLhttp://0.0.0.0:9000/hooks/redeploy-app. Это выставляет путь или ловушку на сервере, который может быть выполнен. Если вы теперь делаете простой вызов REST (например, GET) с этим URL, ничего особенного не произойдет, потому что правила хуков не были выполнены. Если мы хотим, чтобы ловушка сработала успешно, мы должны выполнитьtrigger-rule, которые мы определили вhooks.json.

Давайте проверим это с помощью пустого коммита в локальной директории проекта. Оставив сервер webhook включенным, вернитесь на локальный компьютер и введите следующее: 

git commit --allow-empty -m "Trigger notification"

Вставьте коммит в ветку master: 

git push origin master

На вашем сервере вы увидите такой вывод: 

Output[webhook] 2018/06/14 20:05:55 [af35f1] incoming HTTP request from 192.30.252.36:49554
[webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app got matched
[webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app hook triggered successfully
[webhook] 2018/06/14 20:05:55 200 | 726.412µs | 203.0.113.0:9000 | POST /hooks/redeploy-app
[webhook] 2018/06/14 20:05:55 [af35f1] executing /opt/scripts/redeploy.sh (/opt/scripts/redeploy.sh) with arguments ["/opt/scripts/redeploy.sh" "Trigger notification" "sammy" "82438acbf82f04d96c53cd684f8523231a1716d2"] and environment [] using /opt/scripts as cwd

Давайте теперь добавим уведомления Slack и посмотрим, что происходит, когда ловушка запускает успешную сборку с уведомлениями.

[[step-6 -—- add-slack-notifications]] == Шаг 6 - Добавление уведомлений Slack

Чтобы получать уведомления Slack при повторном развертывании приложения, вы можете изменить скриптredeploy.sh для отправки HTTP-запросов в Slack. Также необходимо настроить Slack для получения уведомлений от вашего сервера, включивWebhook Integration на панели конфигурации Slack. ПолучивWebhook URL от Slack, вы можете добавить информацию о сервере веб-перехватчика Slack в свой скрипт.

Чтобы настроить Slack, сделайте следующее:

  • 1. На главном экране приложения Slack щелкните раскрывающееся меню в левом верхнем углу и выберитеCustomize Slack.

  • 2. Затем перейдите к разделамConfigure Apps, расположенным на левой боковой панелиMenu.

  • 3. На панелиManage выберитеCustom Integration из списка параметров слева.

  • 4. Найдите интеграциюIncoming WebHooks.

  • 5. ЩелкнитеAdd Configuration.

  • 6. Выберите существующий канал или создайте новый.

  • 7. ЩелкнитеAdd Incoming WebHooks integration.

После этого вам будет представлен экран с настройками Slack. Обратите внимание наWebhook URL, который является конечной точкой, созданной сервером веб-перехватчика Slack. Когда вы закончите записывать этот URL и вносить любые другие изменения, не забудьте нажать кнопкуSave Settings внизу страницы.

Вернитесь на свой сервер и откройте скриптredeploy.sh: 

nano /opt/scripts/redeploy.sh

На предыдущем шаге мы оставили в сценарии заполнители для уведомлений Slack, обозначенные как!!Placeholder for Slack notification. Теперь мы заменим их вызовамиcurl, которые отправляют HTTP-запросы POST к серверу веб-перехватчика Slack. Хук Slack ожидает тело JSON, которое затем проанализирует, отображая соответствующее уведомление в канале.

Замените!!Placeholder for slack notification следующими вызовамиcurl. Обратите внимание, что вам нужно будет заменитьyour_slack_webhook_url наWebhook URL, которое вы отметили ранее:

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
      echo "Error occoured"
      curl -X POST -H 'Content-type: application/json' --data "{
              \"text\": \"Error occoured while building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
              \"username\": \"buildbot\",
              \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
      }" your_slack_webhook_url
}
trap cleanup ERR

commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id

curl -X POST -H 'Content-type: application/json' --data "{
        \"text\": \"Started building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
        \"username\": \"buildbot\",
        \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url

cd ~/do-react-example-app/
git pull origin master
yarn && yarn build

curl -X POST -H 'Content-type: application/json' --data "{
        \"text\": \"Build and deploy finished with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
        \"username\": \"buildbot\",
        \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url

Мы заменили каждый заполнитель немного другим вызовомcurl:

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

  • Второй отправляет уведомление о том, что сборка приложения началась.

  • Третий отправляет уведомление, что сборка успешно завершена.

Подробнее о Slack-ботах и ​​интеграции можно найти вSlack webhooks documentation.

Опять же, мы можем проверить наш хук с пустым коммитом в локальной директории проекта. Оставив сервер webhook запущенным, вернитесь в этот каталог и создайте пустой коммит: 

git commit --allow-empty -m "Trigger notification"

Передайте коммит в ветку master, чтобы запустить сборку: 

git push origin master

Вывод, включая информацию о сборке, будет выглядеть так: 

Output[webhook] 2018/06/14 20:09:55 [1a67a4] incoming HTTP request from 192.30.252.34:62900
[webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app got matched
[webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app hook triggered successfully
[webhook] 2018/06/14 20:09:55 200 | 462.533µs | 203.0.113.0:9000 | POST /hooks/redeploy-app
[webhook] 2018/06/14 20:09:55 [1a67a4] executing /opt/scripts/redeploy.sh (/opt/scripts/redeploy.sh) with arguments ["/opt/scripts/redeploy.sh" "Trigger notification" "sammy" "5415869a4f126ccf4bfcf2951bcded69230f85c2"] and environment [] using /opt/scripts as cwd
[webhook] 2018/06/14 20:10:05 [1a67a4] command output:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   228    0     2  100   226     11   1324 --:--:-- --:--:-- --:--:--  1329
okFrom https://github.com/sammy/do-react-example-app
 * branch            master     -> FETCH_HEAD
   82438ac..5415869  master     -> origin/master
Updating 82438ac..5415869
Fast-forward
yarn install v1.7.0
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.16s.
yarn run v1.7.0
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.94 KB  build/static/js/main.a0b7d8d3.js
  299 B     build/static/css/main.c17080f1.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/2vY88Kr

Done in 7.72s.
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   233    0     2  100   231     10   1165 --:--:-- --:--:-- --:--:--  1166
ok
[webhook] 2018/06/14 20:10:05 [1a67a4] finished handling redeploy-app

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

Заключение

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

  • Настройте Nginx для работы с динамическими сборками вашего приложения.

  • Настройте сервер webhook и перехватывайте записи, которые срабатывают при запросах GitHub POST.

  • Написание скриптов, запускающих сборки приложений и уведомления.

  • Настройте Slack для получения этих уведомлений.

Система из этого руководства может быть расширена, поскольку сервер веб-перехватчиков является модульным и может быть настроен для работы с другими приложениями, такими какGitLab. Если настройка сервера веб-перехватчика через JSON слишком сложна, вы можете создать аналогичную настройку, используяHookdoo. Более подробную информацию о том, как настроить правила триггеров дляwebhook, можно найти в проекте веб-перехватчикаexample hooks page.

Related