webhook の作成とトリガーのチュートリアル

Webhook を作成し、トリガーできるかどうかを確認してみましょう。操作のテスト用に、シンプルな Flask サーバーで Bitbucket の Webhook を受信するリポジトリを作成しました。

開始する前に、次の要件を満たしていることを確認します。

• Python & Pip

• ngrok

ステップ 1: Webhook の URL を作成する

Webhook を追加する前に、サーバーの準備を開始します。

1. ローカル システムでサーバーをセットアップするために、まず、次のリポジトリhttps://bitbucket.org/atlassianlabs/webhook-listener のクローンを作成します。Webhook Listener リポジトリでクローン URL をコピーします。リポジトリの保存先にするディレクトリで、ターミナルにクローン コマンドと URL を入力します。

   1 $ git clone git@bitbucket.org:atlassianlabs/webhook-listener.git

2. ディレクトリを webhook-listener ディレクトリに変更します。

   1 $ cd ~/<repos_directory>/webhook-listener

3. 先ほどクローンした REQUIREMENTS.txt ファイルをインストールします。

   1 $ pip install -r REQUIREMENTS.txt

4. ローカル システムの webhook-listener リポジトリで .env ファイルを開きます。ファイルには、1 つの行 (NGROK_SUBDOMAIN=bbwebhook) が含まれます。この行の NGROK_SUBDOMAIN を、サーバーの任意のサブドメインに設定します。このチュートリアルでは作業者の名前に変更します。

   1 NGROK_SUBDOMAIN=<first_name>

5. 次のコマンドで ngrok トンネルおよび Flask サーバーを開始します。

   1 $ honcho start

   このコマンドを実行する前に、または、honcho start が動作しない場合、ngrok ディレクトリが PATH のディレクトリにあることを確認します。

   honcho start コマンドを実行すると、コマンド ラインに以下が返されます。

   1 2 You can access this webhook publicly via at http://<first_name>.ngrok.io/webhook You can access ngrok's web interface via http://localhost:4040

   これらの両方の URL を記録します。最初の URL は、サーバーへのアクセスに使用する Webhook URL です。最初の URL を送信するリクエストを表示するには、2 番目の URL を使用します。

ステップ 2: Webhook を作成する

1. 次に、独自のリポジトリの Webhook を作成します。Bitbucket のリポジトリで、左側のサイドバーの [リポジトリ設定] > [Webhook] の順に選択します。

2. [Webhook の追加] ボタンをクリックしてリポジトリに Webhook を作成します。

3. [タイトル] に「Webhook Listber」と入力します。

4. [URL] フィールドに、サーバーの URL (例: http://<first_name>.ngrok.io/webhook) を入力します。

5. [保存] をクリックします。このチュートリアルでは、[トリガー] を [リポジトリ プッシュ] のままにします。

6. これで Webhook を作成したので、Webhook の URL を開きます。

7. ngrok の Web インターフェイスの URL を開きます (http://localhost:4040/)。ブラウザーがサーバーに対して行った GET リクエストが表示されます。
   
   

ステップ 3: Webhook をトリガーする

1. 次に、リポジトリにオブジェクトをプッシュして、Webhook がトリガーされるかどうかを確認します。最初に、次のテキストで新しいファイルを作成します。

   1 Let's try out a webhook.

2. ファイルを file.txt としてローカル システムのリポジトリ ディレクトリに保存します。

3. Bitbucket リポジトリにファイルを追加し、コミット、プッシュします。

   1 2 3 $ git add file.txt $ git commit -m 'Initial commit' $ git push

4. ngrok URL に戻ると、Bitbucket がサーバーに送信したイベント ペイロードの POST リクエストが表示されます。

これで、Webhook を正常に作成およびトリガーしました。

ステップ 4: Webhook リスナーを更新する

1. ローカル システムのクローンされたリポジトリで、listener.py ファイルを開きます。

2. このファイルをお読みください。このファイルは、honcho start を実行した後にコマンド ラインに表示される内容と、Webhook URL に表示される内容を説明しています。
   また、このファイルには、POST ペイロードのデータを使用して通知を出力するコードも含まれます。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 @app.route('/webhook', methods=['GET', 'POST']) def tracking(): if request.method == 'POST': data = request.get_json() commit_author = data['actor']['username'] commit_hash = data['push']['changes'][0]['new']['target']['hash'][:7] commit_url = data['push']['changes'][0]['new']['target']['links']['html']['href'] if _platform == "darwin": from pync import Notifier Notifier.notify('%s committed %s\nClick to view in Bitbucket' % (commit_author, commit_hash), title='Webhook received!', open=commit_url) else: print 'Webhook received! %s committed %s' % (commit_author, commit_hash) return 'OK' else: return displayHTML(request)

3. tracking() 関数を変更し、Webhook Listener の POST データの使用方法を更新します。使用するペイロード パラメーターや、関数によるデータの処理方法を更新できます。

4. listener.py ファイルを保存します。

5. honcho start を再度実行し、webhook を使用して別のファイルをリポジトリにプッシュします。

listener.py  ファイルに行った変更が反映されます。