GitHubのイベントをトリガーにしてAzure Functionsにある関数を実行する

Microsoft Learning で1通り学習したので流れを思い出しながらメモする。
サーバーレスアプリケーションの作成：https://docs.microsoft.com/ja-jp/learn/paths/create-serverless-applications/

目標

GitHubのイベントをトリガーにしてAzure Functionsと通信する。
→ GitHubのWikiが更新されたら、Azure Functionsにある関数を実行する。

前提

• Azure Functions作成したことがある。
• JavaScript書いたことがある。
• GitHubアカウントを持っている。

最低これがあれば、この記事を読み進めて目標を達成できるだろう。

GitHubアカウント作り方

GitHub：https://github.com/

サイトにとんでメールアドレス等必要事項を入力して進めればアカウント作成できるのでここでは詳しく書かない。
プランはFreeにしよう。

環境を構築

関数アプリを作る

1. Azureポータル開く：https://portal.azure.com/#home
2. リソースの追加をクリック。
3. 「Function App」で検索 → 作成
4. 必要事項を入力して確認および作成（入力項目の説明は割愛） → デプロイされるまで待つ。この間にGitHubでレポジトリを作っちゃおう。
5. Azure側構築完了。

GitHubでレポジトリを作成する

1. GitHubにサインイン
2. [Create a new Repository] or [New]をクリック
3. Repository Name を入力。（わかりやすいように「LearnWebhookTest」にでもしとこう）
4. Public　ot Privateを選ぼう。(料金プランFreeの場合、PrivateにするとWikiが無効になるので注意。)
5. [Create Repository]をクリック → Repositoryが作成される
6. [Wiki]タブをクリック → [New Page]をクリック → [Save Page]
7. 準備完了。

関数アプリに関数を追加する

Azure

1. 作成した関数アプリに移動。

2. 関数名の横の「+」をクリック。

3. [JavaScript用の～] → [ポータル内] → [webhook + API] → [作成]

4. ファイルindex.jsを開き以下のコードに変更する（if~else~の部分を以下に置き換える）

   if (req.body.pages[0].title){
       context.res = {
           body: "Page is " + req.body.pages[0].title + ", Action is " + req.body.pages[0].action + ", Event Type is " + req.headers['x-github-event']
       };
   }
   else {
       context.res = {
           status: 400,
           body: ("Invalid payload for Wiki event")
       }
   }
   

5. [Ctrl + S]で保存を忘れずに

6. 関数アプリを選択して[関数のURLを取得する]を選択して出てきたURLをコピーしておく。

GitHubにWebhookを追加する

GitHub

1. [Settings]タブ → [Webhook] → [Add Webhook] で追加する

   • Payload URL：さっきコピーした関数のURLを入力する。
   • Content type：データフォーマットの設定。今回はapplication/jsonを戦tなく
   • Secret：Webhookペイロードをセキュリティ保護できる。今回は未入力で大丈夫。
   • Which events would you like to trigger this webhook?：トリガーどれにするかを選択。一番下のLet me select individual events選択 → Wikiのみチェックしとく
   • Activeにはチェックをいれる。

2. Add webhookで追加

Wikiを編集する

準備は完了したのでWikiを更新してみる。

1. さっき作ったWikiをEdit
2. 適当にテキスト追加して保存
3. 関数呼び出しが行われている

動きを確認する

GitHub

1. [Settings]タブ → [Webhook] → [Edit] → 一番下の[Recent Deliveies] で省略記号「…」をクリック。

2. [Response]タブをクリック。下記のように応答が返っていたら成功だ。

   Page is Home, Action is edited, Event Type is gollum