演習 - GitHub リポジトリの Webhook を設定する

8 分

この演習では、GitHub リポジトリの Webhook を設定します。特定のイベント (このケースでは Gollum イベント) をリッスンする方法と、イベントがトリガーされたときに関数で Webhook のコールバックを行う方法を学習します。

セットアップ

Web ブラウザーを使用して、GitHub アカウントにサインインします。
左側のメニューウィンドウで [新規] を選択して、新しいリポジトリを作成します。 [Create a new repository](新しいリポジトリを作成する) ページが表示されます。
[リポジトリ名] ボックスに、わかりやすい名前 (「LearnWebhookTest」など) を入力します。
[Public](パブリック) を選択して wiki モジュールをアクティブにし、メニューからそれを見つけます。
[Create repository] (リポジトリの作成) を選択します。 [Quick setup](クイックセットアップ) ページが表示されます。
新しいファイルを作成するリンクを選択します。
上部のメニューバーで、[Wiki] を選択して、自分のリポジトリ ("リポジトリ") 内のページを表示します。 ウェルカム ページが表示されます。
[Create the first page](最初のページの作成) を選択します。 [Create new page](新しいページの作成) テンプレートが表示されます。
何かテキストを追加して、[Save Page](ページの保存) を選択します。 Wiki の最初のページは [ホーム] ページです。

Gollum イベントの Webhook を追加する

Gollum は、リポジトリの Wiki 内でページが作成または更新されるたびに発生する GitHub イベントの名前です。

Wiki ビューのホームページには、リポジトリ内のページを一覧表示する [ページ] サイドバーがあります。 [ホーム] を選択して、ホームページを表示します。
ホームページの上部のメニューバーで、[設定] を選択します。 [設定] ペインが表示されます。
[設定] サイドバーで、[Webhook] を選択します。 [Webhook] ペインが表示されます。
右上にある [Webhook の追加] を選択します。 GitHub から、GitHub 用のパスワードの確認を求められる場合があります。

[Webhook/Webhook の追加] ペインで、各設定に対して次の値を入力します。

設定	値
ペイロード URL	前の演習の Azure 関数アプリの URL。ヘルプについては、次の注を参照してください。
Content type	ドロップダウンリストで、[application/json] を選択します。
どのイベントによって、この Webhook をトリガーしますか?	[Let me select individual events] (個々のイベントを選択させてください) を選択してください。表示されるイベントリストで、下にスクロールし、[Wiki] チェックボックスをオンにします。その他のチェックボックスはオフのままにします。
アクティブ	オン。

ヒント

コマンドバーから [関数 URL の取得] を選択することで、[Azure HttpTrigger] ペインから関数 URL をコピーします。 URL は次のようになります: https://<your-functionapp-name>.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ==

[Add webhook](Webhook の追加) を選択します。 [Webhook] ペインが表示されます。
新しい Webhook が表示されることを確認します。その名前の末尾に (gollum) が付いているはずです。

Webhook をテストする

GitHub の上部のメニューバーで、[Wiki] を選択します。先ほど作成した [ホーム] ページが表示されます。
[編集] を選択します。 [Editing Home](ホームの編集中) ペインが表示されます。
ペインのテキスト領域に、次のテキストを入力します。
```
Testing Webhook
```
[ページの保存] を選択します。 [ホーム] ページが再び表示されます。
上部のメニューバーで、[Settings](設定) を選択します。 [設定] ペインが表示されます。
サイドバーで、[Webhooks] を選択します。 [Webhook] ペインが表示されます。
[編集] を選択します。 [Webhooks/Manage webhook](Webhook/Webhook の管理) ペインが表示されます。
[Recent Deliveries] (最近の配信) タブを選択します (ページの下部までスクロールする必要があることがあります)。

一覧の一番上 (最新) のデリバリエントリを選択するには、その省略記号 ([...]) を選択します。

Event を含むヘッダー セクションが表示されます。

Request URL: https://testwh123456.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ%3D%3D
Request method: POST
Accept: */*
content-type: application/json
User-Agent: GitHub-Hookshot/16496cb
X-GitHub-Delivery: 9ed46280-6ab3-11e9-8a19-f1a14922a239
X-GitHub-Event: gollum
X-GitHub-Hook-ID: 312141005
X-GitHub-Hook-Installation-Target-ID: 394459163
X-GitHub-Hook-Installation-Target-Type: repository

[ペイロード] セクションには、Wiki ページが編集されたことを示す情報が含まれていることもわかります。ペイロードには pages、repository、および sender のセクションが含まれており、次の例のようになります。

    "pages": [
        {
            "page_name": "Home",
            "title": "Home",
            "summary": null,
            "action": "edited",
            "sha": "04d012c5f92a95ae3f7721173bf9f2b1b35ea22f",
            "html_url": "https://github.com/.../wiki/Home"
        }
    ],
    "repository" : {
        "id": 176302421,
        "node_id": "MDEwOlJlcG9zaXRvcnkxNzYzMDI0MjE=",
        "name": "tieredstorage",
        ...
    },
    "sender" : {
        ...
    }

[Recent Deliveries](最近のデリバリ) タブで、[応答] タブを選択します。

Azure 関数によって生成された応答メッセージが表示されます。この例では、本文にメッセージを含める必要があります。 This HTTP triggered function executed successfully. クエリ文字列または要求本文に、パーソナライズされた応答の名前を渡します.

演習 - GitHub リポジトリの Webhook を設定する

セットアップ

Gollum イベントの Webhook を追加する

Webhook をテストする

フィードバック