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

Let's create a webhook and see if we can trigger it! We have created a repository with a simple Flask server (that receives Bitbucket webhooks) for you to play with.

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

• Python & Pip

• ngrok

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

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

1. Start by cloning the following repository to set up the server on your local system: https://bitbucket.org/atlassianlabs/webhook-listener. From the Webhook Listener repository and copy the clone URL. From the directory where you keep your repositories, enter the clone command and URL into your terminal.

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

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

   $ cd ~/<repos_directory>/webhook-listener

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

   $ pip install -r REQUIREMENTS.txt

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

   NGROK_SUBDOMAIN=<first_name>

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

   $ honcho start

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

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

   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. Next to the name of your repository in the left sidebar, select More actions (…), and then select Settings.

2. Then select Webhooks under Workflow.

3. Select the Add webhook button to create a webhook for the repository.

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

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

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

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

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

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

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

   Let's try out a webhook.

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

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

   $ 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 ペイロードのデータを使用して通知を出力するコードも含まれます。

   @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  ファイルに行った変更が反映されます。