Ubuntu 16.04でWebhookとSlackを使用してReactアプリケーションをデプロイする

_著者は、https://www.brightfunds.org/funds/tech-education [Tech Education Fund]を選択して、https://do.co/w4do-cta [Write for DOnations]プログラムの一環として寄付を受け取りました。 _

前書き

開発者がアプリケーションを継続的に変更している場合、webhookを備えた展開システムは、特にチーム向けに開発を効率化できます。 チームの一部がAPIなどのバックエンドソフトウェアに依存している場合、コードの変更に関するSlack通知をチームのワークフローに統合することも役立ちます。

このチュートリアルでは、https://github.com/facebook/create-react-app [+ create-react-app + `+ npm +`パッケージ]を使用してReactアプリケーションを構築します。 このパッケージは、構文を変換し、依存関係および前提条件ツールを使用して作業を合理化することにより、Reactプロジェクトのブートストラップ作業を簡素化します。 アプリケーションコードをGitHubリポジトリに追加した後、更新されたプロジェクトファイルを提供するようにNginxを構成します。 次に、webhookサーバーをダウンロードしてセットアップし、コードが変更されたときにGitHubと通信するように構成します。 最後に、Slackを別のwebhookサーバーとして機能するように設定します。これは、展開が正常にトリガーされたときに通知を受け取ります。

最終的に、この記事で構築する展開システムは次のようになります。

画像:https://assets.digitalocean.com/articles/react_deploy_webhooks/react-deploy.gif [展開例]

この短いビデオでは、空のコミットとGitHubリポジトリへのプッシュが示され、Slackでアプリケーションのビルドと通知がトリガーされます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • Ubuntu 16.04サーバー。https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04 [Ubuntu 16.04での初期サーバーセットアップチュートリアル]に従って設定できます。 このガイドに従うと、sudo特権を持つ非rootユーザーアカウントが必要になります。

  • https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-16-04 [Ubuntu 16.04にNginxをインストールする方法]の最初の2つの手順に従ってサーバーにインストールされたNginx 。

  • ローカルマシンとサーバーの両方で構成されたGit。 Gitのインストールと構成の手順については、https://www.digitalocean.com/community/tutorials/contributing-to-open-source-getting-started-with-git [getting started with Git]でこのチュートリアルをご覧ください。

  • ローカルマシンとサーバーにインストールされたNode.jsと + npm +。 サーバーについては、https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04#how-のPPAからNode.jsをインストールする手順に従ってくださいto-install-using-a-ppa [Ubuntu 16.04にNode.jsをインストールする方法]。 ローカルマシンでは、https://nodejs.org/en/download/ [プロジェクトのインストール手順]に従ってください。

  • https://yarnpkg.com/lang/en/docs/install/ [インストールヤーン]の公式ガイドに従って、サーバーにインストールされたヤーン。

  • Slackおよび通知用の個々のチャネルを構成する権限。 ロールと権限の詳細については、https://get.slack.help/hc/en-us/articles/201314026-Roles-and-permissions-in-Slack [Slack permissions docs]をご覧ください。

ステップ1-create-react-appを使用したReactアプリケーションの作成

最初に、 `+ create-react-app +`でWebhookをテストするために使用するアプリケーションを構築しましょう。 次に、GitHubリポジトリを作成し、プロジェクトコードをプッシュします。

ローカルマシンで、 + create-react-app`ノードモジュールをグローバルリポジトリに追加し、シェル環境で + create-react-app`コマンドを使用できるようにします。

sudo npm install -g create-react-app

次に、 + create-react-app`を実行して ++ `というプロジェクトを作成します。

create-react-app

ディレクトリ `++`に移動します。

cd

`+ 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リポジトリを作成しましょう。 ガイダンスについては、https://help.github.com/articles/create-a-repo/ [GitHubリポジトリの作成]でこのチュートリアルに従うことができます。 リポジトリの起源に注意してください(つまり、 そのGitHub URL)。

`+`ディレクトリに戻り、リポジトリを ` git +`で初期化します:

git init

次に、GitHub URLでリモートオリジンを追加します。

git remote add origin

プロジェクトディレクトリ内のすべてのファイルをステージングします。

git add .

それらをコミットします。

git commit -m "initial commit"

そしてそれらをリポジトリにプッシュします:

git push origin master

GitHubリポジトリの作成および既存のアプリケーションの `+ git +`による初期化の詳細については、GitHubのhttps://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-lineを参照してください/[ドキュメンテーション]。

リポジトリのセットアップが完了したら、サーバーの構成の詳細の指定に進みます。

ステップ2-ディレクトリのセットアップとNginxの構成

リポジトリを配置したら、GitHubからアプリケーションコードを取得し、アプリケーションを提供するようにNginxを構成できるようになりました。

サーバーにログインし、ホームディレクトリに移動して、リポジトリのクローンを作成します。

cd ~
git clone

クローンプロジェクトに移動します。

cd

Nginxが提供するプロジェクトとファイル内にビルドディレクトリを作成するには、 `+ yarn build `コマンドを実行する必要があります。 これにより、プロジェクトのビルドスクリプトが実行され、ビルドディレクトリが作成されます。 このフォルダーには、とりわけ、 ` index.html `ファイル、JavaScriptファイル、CSSファイルが含まれます。 ` yarn +`コマンドは、プロジェクトに必要なすべてのノードモジュールをダウンロードします。

yarn && yarn build

次に、 `+ / var / www / `ディレクトリから `〜/ do-react-example-app `ディレクトリへのシンボリックリンクを作成しましょう。 これにより、アプリケーションがホームディレクトリに保持され、Nginxが ` / var / www +`ディレクトリからサービスを利用できるようになります。

sudo ln -s ~/ /var/www/

これは、より頻繁に変更されるビルドディレクトリではなく、プロジェクトディレクトリにリンクすることに注意してください。 このリンクの作成は、アプリケーションの新しいバージョンをデプロイするシナリオで特に役立ちます。安定したバージョンへのリンクを作成することにより、追加バージョンをデプロイする際に後でスワップアウトするプロセスを簡素化します。 問題が発生した場合も、同じ方法で以前のバージョンに戻すことができます。

Nginxが適切に提供できるように、シンボリックリンクにいくつかの権限を設定する必要があります。

sudo chmod -R 755 /var/www

次に、ビルドディレクトリを提供するNginxサーバーブロックを構成します。 次のように入力して、新しいサーバー構成を作成します。

sudo nano /etc/nginx/sites-available/

次の設定をコピーし、「++」をIPまたはドメインに置き換えます(該当する場合):

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

server {
       listen 80;

       root /var/www//build;
       index index.html index.htm index.nginx-debian.html;

       server_name ;

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

このファイルのディレクティブは次のとおりです。

  • * + listen + *:サーバーのリスニングポートを設定するプロパティ。

  • * + root + *:Nginxがファイルを提供するフォルダーへのパス。

  • * + index + *:サーバーが最初に提供しようとするファイル。 + / var / www // build`ディレクトリから次のファイルを提供しようとします: + index.html`、 + index.html、` + index.nginx-debian.html`、優先度付き最初から最後まで。

  • * + server_name + *:サーバーのドメイン名またはIP。

次に、 `+ sites-enabled +`ディレクトリにシンボリックリンクを作成します:

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

これにより、Nginxは、 `+ sites-available +`フォルダーからサーバーブロック構成を有効にします。

設定が有効かどうかを確認します。

sudo nginx -t

最後に、Nginxを再起動して新しい構成を適用します。

sudo systemctl restart nginx

これらの構成の詳細を設定したら、webhookの構成に進むことができます。

ステップ3-Webhookのインストールと構成

Webhookは、_hooks_と呼ばれる構成可能なエンドポイントを持つ単純なHTTPサーバーです。 HTTPリクエストを受信すると、webhookサーバーは、構成可能な一連のルールに準拠するカスタマイズ可能なコードを実行します。 Slackを含む、インターネット上のアプリケーションに統合された多くのwebhookサーバーが既にあります。

Webhookサーバーの最も広く使用されている実装は、Goで記述されたhttps://github.com/adnanh/webhook[Webhook]です。 このツールを使用して、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

次に、サードパーティアプリケーションのファイルが通常配置される「+ / opt 」ディレクトリに「 hooks 」および「 scripts 」フォルダを設定しましょう。 ` / opt `ディレクトリは通常 ` 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

次に、 + hooks.json +`ファイルを作成して、 `+ webhook +`サーバーを設定しましょう。 `+ nano +`またはお気に入りのエディターを使用して、 `+ / opt / hooks`ディレクトリに + hooks.json`ファイルを作成します。

nano /opt/hooks/hooks.json

GitHubがHTTPリクエストを送信したときに `+ webhook +`がトリガーされるようにするには、ファイルにルールのJSON配列が必要です。 これらのルールは、次のプロパティで構成されています。

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

具体的には、これらのルールは次の情報を定義します。

  • * + id + *:webhookサーバーが提供するエンドポイントの名前。 これを「++」と呼びます。

  • * + execute-command + *:フックがトリガーされたときに実行されるスクリプトへのパス。 私たちの場合、これは `+ / opt / scripts / redeploy.sh `にある ` redeploy.sh +`スクリプトになります。

  • * + command-working-directory *:コマンドの実行時に使用される作業ディレクトリ。 `+ redeploy.sh `がある場所であるため、 ` / opt / scripts +`を使用します。

  • * + pass-arguments-to-command + *:HTTPリクエストからスクリプトに渡されるパラメーター。 HTTPリクエストのペイロードからコミットメッセージ、プッシャー名、コミットIDを渡します。 これと同じ情報がSlackメッセージにも含まれます。

`+ / opt / hooks / hooks.json +`ファイルには次の情報が含まれている必要があります。

/opt/hooks/hooks.json

[
 {
   "id": "",
   "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 +」プロパティが含まれます。 GitHubリポジトリで設定されたイベント(PUSHなど)が発生すると、GitHubはイベントに関する情報を含むJSON本体を含むPOSTリクエストを送信します。 これらのPOSTペイロードの例は、https://developer.github.com/v3/activity/events/types/ [GitHubイベントタイプのドキュメント]にあります。

設定ファイルの最後のプロパティは `+ trigger-rule `プロパティで、これはフックがトリガーされる条件の下でwebhookサーバーに伝えます。 空のままにすると、フックが常にトリガーされます。 この例では、GitHubがWebhookサーバーにPOSTリクエストを送信したときにトリガーされるようにフックを設定します。 具体的には、HTTPリクエストのGitHubシークレット(ここでは「+」と表示)がルール内のシークレットと一致し、コミットが「+ master +」ブランチに対して発生した場合にのみトリガーされます。

次のコードを追加して、「+ trigger-rule 」を定義し、「+」を選択したパスワードに置き換えます。

...
   "trigger-rule":
   {
     "and":
     [
       {
         "match":
         {
           "type": "payload-hash-sha1",
           "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": "",
   "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": "",
           "parameter":
           {
             "source": "header",
             "name": "X-Hub-Signature"
           }
         }
       },
       {
         "match":
         {
           "type": "value",
           "value": "refs/heads/master",
           "parameter":
           {
             "source": "payload",
             "name": "ref"
           }
         }
       }
     ]
   }
 }
]

確認する最後の構成項目の1つは、サーバーのファイアウォール設定です。 webhookサーバーはポート `+ 9000 +`でリッスンします。 つまり、サーバーでファイアウォールが実行されている場合、このポートへの接続を許可する必要があります。 現在のファイアウォールルールのリストを表示するには、次のように入力します。

sudo ufw status

ポート `+ 9000 +`がリストに含まれていない場合、有効にします:

sudo ufw allow 9000

「+ ufw +」の詳細については、https://www.digitalocean.com/community/tutorials/ufw-essentials-common-firewall-rules-and-commands [ufw essentials]の紹介を参照してください。

次に、GitHubリポジトリを設定して、このエンドポイントにHTTPリクエストを送信します。

ステップ4-GitHub通知の構成

マスターへのコミットが発生したときにHTTPリクエストを送信するようにGitHubリポジトリを設定しましょう:

  • 1. リポジトリに移動して、[設定]をクリックします。

  • 2. 次に、* Webhooks に移動し、右上隅にある Webhookの追加*をクリックします。

  • 3. * Payload URL *には、次のようにサーバーアドレスを入力します: + http://:9000 / hooks / +。 ドメイン名がある場合は、「」の代わりにそれを使用できます。 エンドポイント名は、フック定義の `+ id +`プロパティと一致することに注意してください。 これはwebhook実装の詳細です: `+ hooks.json +`で定義されたすべてのフックはURLに `+ http://:9000 / hooks / +`として表示されます。ここで、 `は `+ id +`です+ hooks.json +`ファイル。

  • 4. * Content type には、 application / json *を選択します。

  • 5. * Secret *には、 + hooks.json +`定義で設定したシークレット( `++)を入力します。

  • 6. このWebhookをトリガーするイベントを選択してください。* Just push event *を選択します。

  • 7. [ウェブフックを追加]ボタンをクリックします。

これで、誰かがリポジトリにコミットをプッシュすると、GitHubはコミットイベントに関する情報を含むペイロードを含むPOSTリクエストを送信します。 他の便利なプロパティの中でも、トリガールールで定義したプロパティが含まれるため、WebhookサーバーはPOSTリクエストが有効かどうかを確認できます。 そうである場合、 `+ pusher.name +`のような他の情報が含まれます。

ペイロードとともに送信されるプロパティの完全なリストは、https://developer.github.com/webhooks/ [GitHub Webhooks page]にあります。

手順5-展開/再展開スクリプトの作成

この時点で、webhookに `+ redeploy.sh +`スクリプトを指定しましたが、スクリプト自体は作成していません。 リポジトリから最新のマスターブランチを取得し、ノードモジュールをインストールし、ビルドコマンドを実行します。

スクリプトを作成します。

nano /opt/scripts/redeploy.sh

まず、作成したファイルをクリーンアップする関数をスクリプトの先頭に追加します。 再デプロイが正常に完了しなかった場合、Slackなどのサードパーティソフトウェアに通知する場所としてこれを使用することもできます。

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
     echo "Error occoured"
     #
}
trap cleanup ERR

これは、スクリプトが突然終了した場合、「+ cleanup 」関数でコードを実行する必要があることを「 bash +」インタープリターに伝えます。

次に、スクリプトを実行するときに `+ webhook +`がスクリプトに渡すパラメーターを抽出します。

/opt/scripts/redeploy.sh

...

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


#

パラメータの順序は、 + hooks.json`ファイルの + pass-arguments-to-command a`プロパティに対応していることに注意してください。

最後に、アプリケーションの再デプロイに必要なコマンドを呼び出しましょう。

/opt/scripts/redeploy.sh

...

cd ~//
git pull origin master
yarn && yarn build

#

完全なスクリプトは次のようになります。

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
     echo "Error occoured"
     #
}
trap cleanup ERR

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

#

cd ~//
git pull origin master
yarn && yarn build

#

スクリプトはフォルダーに移動し、最新のマスターブランチからコードを取得し、新しいパッケージをインストールし、アプリケーションの製品バージョンをビルドします。

「++」に注意してください。 これは、このチュートリアルの最後のステップのプレースホルダーです。 通知がなければ、スクリプトが適切に実行されたかどうかを知る本当の方法はありません。

フックが実行できるようにスクリプトを実行可能にします。

chmod +x /opt/scripts/redeploy.sh

Nginxは `+ / var / www // 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}

これは、すべてが適切にロードされ、サーバーがURL `+ http://0.0.0.0:9000 / hooks / `を介してフック `+`を提供していることを示しています。 これにより、実行可能なサーバー上のパスまたはフックが公開されます。 このURLで単純なREST呼び出し(GETなど)を実行すると、フックルールが満たされないため、特別なことは何も起こりません。 フックを正常にトリガーする場合は、「+ hooks.json 」で定義した「 trigger-rule +」を実行する必要があります。

ローカルプロジェクトディレクトリで空のコミットを使用してこれをテストしてみましょう。 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" "" "82438acbf82f04d96c53cd684f8523231a1716d2"] and environment [] using /opt/scripts as cwd

それでは、Slack通知を追加して、フックが通知付きのビルドの成功をトリガーしたときの動作を見てみましょう。

ステップ6-Slack通知を追加する

アプリが再デプロイされたときにSlack通知を受信するには、 `+ redeploy.sh +`スクリプトを変更してHTTPリクエストをSlackに送信できます。 Slack設定パネルで* Webhook統合*を有効にして、サーバーから通知を受信するようにSlackを設定する必要もあります。 Slackから* Webhook URL *を取得したら、Slack Webhookサーバーに関する情報をスクリプトに追加できます。

Slackを構成するには、次の手順を実行します。

  • 1. Slackアプリケーションのメイン画面で、左上にあるドロップダウンメニューをクリックし、* Slackのカスタマイズ*を選択します。

  • 2. 次に、左側のサイドバーの[メニュー]にある[アプリの設定]セクションに移動します。

  • 3. [管理]パネルで、オプションの左側のリストから[カスタム統合]を選択します。

  • 4. * Incoming WebHooks *統合を検索します。

  • 5. [構成の追加]をクリックします。

  • 6. 既存のチャネルを選択するか、新しいチャネルを作成します。

  • 7. [着信WebHooks統合の追加]をクリックします。

その後、Slack webhook設定を表示する画面が表示されます。 * Webhook URL *をメモします。これは、Slack webhookサーバーによって生成されたエンドポイントです。 このURLを書き留めて他の変更を行ったら、ページの下部にある[設定を保存]ボタンを押してください。

サーバーに戻り、 `+ redeploy.sh +`スクリプトを開きます。

nano /opt/scripts/redeploy.sh

前のステップでは、Slack通知用のスクリプトにプレースホルダーを残しました(「+」と表記)。 これらをSlack WebhookサーバーにPOST HTTPリクエストを行う ` curl +`呼び出しに置き換えます。 SlackフックはJSONボディを予期し、それを解析して、チャネルに適切な通知を表示します。

``を次の `+ curl +`呼び出しに置き換えます。 ``を前述の* 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\"
     }"
}
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\"
}"

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\"
}"

各プレースホルダーをわずかに異なる `+ curl +`呼び出しに置き換えました:

  • 1つ目は、スクリプトの実行中に発生したエラーの通知を受け取ることを保証します。

  • 2番目は、アプリケーションのビルドが開始されたという通知を送信します。

  • 3番目は、ビルドが正常に終了したという通知を送信します。

Slackボットと統合の詳細については、https://api.slack.com/incoming-webhooks [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" "" "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//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では、選択したチャンネルにメッセージが届き、アプリケーションのビルドが開始したことと終了したことを通知します。

結論

これで、webhook、Nginx、シェルスクリプト、およびSlackを使用した展開システムのセットアップが完了しました。 次のことができるはずです。

  • アプリケーションの動的ビルドで動作するようにNginxを構成します。

  • webhookサーバーをセットアップし、GitHub POSTリクエストでトリガーするフックを作成します。

  • アプリケーションのビルドと通知をトリガーするスクリプトを作成します。

  • これらの通知を受信するようにSlackを構成します。

webhookサーバーはモジュール式であり、https://about.gitlab.com/ [GitLab]などの他のアプリケーションと連携するように構成できるため、このチュートリアルのシステムを拡張できます。 JSONを介したwebhookサーバーの設定が多すぎる場合は、https://www.hookdoo.com [Hookdoo]を使用して同様のセットアップを構築できます。 `+ webhook +`のトリガールールを設定する方法の詳細については、webhookプロジェクトhttps://github.com/adnanh/webhook/wiki/Hook-Examples [フックページの例]を参照してください。

前の投稿:CentOS 7にElasticsearch、Logstash、Kibana(Elastic Stack)をインストールする方法
次の投稿:CentOS 7にApache Tomcat 8をインストールする方法