Check! Azure Web App のデプロイ完了を Slack に通知する!(Logic App を使ってノンプログラミングで)

  • 10
    いいね
  • 0
    コメント

こんにちは、オークファンの @dz_ こと大平かづみです。

Prologue - はじめに

Azure Web Apps は、GitHub などと連携して継続的インテグレーションを行うことができます。

このとき、もうデプロイが完了したかなーどうかなー?と、いちいちポータルを確認するのが面倒なので、Slack に通知するようにしてみました!

Azure Web Apps とその基盤についてちょっと解説

すぐに設定したい人は、後述の手順にお進みください~

Azure Web Apps は、 Kudu という デプロイメントシステムの上で動いています。ちなみに、この Kudu は、 Azure 以外の環境でも動かすことができ、オープンソースとして運用されています。

Kudu は、 webhook を利用できます。 GUI または API で設定し、以下の契機で発火されます。

  • デプロイが完了したとき
  • Webジョブが完了したとき

発火すると、設定した URL に以下の payload をが送信されます。

Bitbucketのリポジトリにコミットした場合の例
{
    "id": "27cf7b...",
    "status": "success",
    "statusText": "",
    "authorEmail": "xxx@mail.com",
    "author": "Kadumi Oohira",
    "message": "Fixed a bug.",
    "progress": "",
    "deployer": "Bitbucket",
    "receivedTime": "2016-10-08T07:48:30.3872521Z",
    "startTime": "2016-10-08T07:48:30.5192005Z",
    "endTime": "2016-10-08T07:48:32.3003878Z",
    "lastSuccessEndTime": "2016-10-08T07:48:32.3003878Z",
    "complete": true,
    "siteName": "some-site-name"
}

Slack へ通知するには?

Slack への通知も、 webhook を設定すれば即完了♪ …

というわけにはいきませんでした (σ´・ω・`●)

というのも、試したところ、イベントが発火すると InternalServerError が発生することがわかりました。

原因はおそらく、webhook に通知されるデータ形式が、Slack の Webhook が期待するものと異なるためでした。Slack に通知する payload には text が必要ですが、Kudu が送信する payload にはありません。

そこで、Kudu → payload変換 → Slack を実現するために結局スクリプトを書く…という手間をさけるべく、辿り着いたのは Azure Logic Apps でした!

Azure Logic Apps とは?

GUI でワークフローをつなげて、様々な処理を作ることができます。Azure 版 Node-RED といったところです。

特徴は、Azure 内のほかのリソースや、Microsoft 製品からの入力、出力が豊富に用意されていることですが、 Google Calendar や SendGrid, Twilio, Trello, Wunderlist, Instagram など外部サービスとの連携も多く用意されています。

今回は、Slack への出力を利用します。

手順

構成図

20161009_azure-Kudu_logic-app_000.png

大まかな手順

  1. Azure Logic App に Slack に通知するワークフローを作成する
  2. Azure Web App (Kudu) に Webhook を設定する

手順の詳細

Azure Logic App に Slack に通知するワークフローを作成する

Logic App で、「httpの要求」を受けて「Slackに通知」する処理を作ります。

まず Logic App を新規作成し、「Logic Apps デザイナー」ブレードの「空のLogicApp」に進みます。

20161009_azure-kudu_logic-app_002.png

トリガーとして「要求」を選択し、「要求本文のJSONスキーマ」に、Kudu から送信されるデータ構造をもとにスキーマを設定します。

20161009_azure-kudu_logic-app_003.png

Kuduのpayloadに沿ったスキーマの例
{
  "properties": {
    "author": {
      "type": "string"
    },
    "authorEmail": {
      "type": "string"
    },
    "complete": {
      "type": "string"
    },
    "deployer": {
      "type": "string"
    },
    "endTime": {
      "type": "string"
    },
    "id": {
      "type": "string"
    },
    "lastSuccessEndTime": {
      "type": "string"
    },
    "message": {
      "type": "string"
    },
    "progress": {
      "type": "string"
    },
    "receivedTime": {
      "type": "string"
    },
    "siteName": {
      "type": "string"
    },
    "startTime": {
      "type": "string"
    },
    "status": {
      "type": "string"
    },
    "statusText": {
      "type": "string"
    }
  },
  "required": [
    "status",
    "author",
    "message",
    "endTime",
    "complete",
    "siteName"
  ],
  "type": "object"
}

なお、HTTP応答アクションについての詳細はこちらをご参照くださいませ。

次のアクションを設定します。 slack で検索して、「Slack - Post Message(プレビュー)」を選択しましょう。

20161009_azure-kudu_logic-app_004.png

利用する Slack に接続するため、「サインイン」します。「サインイン」の正常な操作方法はこちらのページをご参照ください。

20161009_azure-kudu_logic-app_005.png

もし上図のようにエラーが出る場合は、後述のトラブルシューティングをご参考くださいませ。

Slack のアクションが追加されたら、通知内容を設定しましょう。

20161009_azure-kudu_logic-app_013.png

Slack への通知設定を保存したら、このロジックへのURLを取得しておきます。

20161009_azure-kudu_logic-app_014.png

Azure Web App (Kudu) に Webhook を設定する

次に、Webhook に Logic App でつくったロジックの URL を設定してみましょう。

まず、対象の Web App のブレードから、「Advanced Tools」で「Go」をクリックして、Kudu の画面を開きます。

20161009_azure-kudu_logic-app_015.png

「Tools」>「Web hooks」を開きます。

20161009_azure-kudu_logic-app_016.png

「Add Subscriber Url」に Logic App で作った URL を入力し、「PostDeployment」のまま「Add Url」をクリックし、Web hook を追加します。

20161009_azure-kudu_logic-app_017.png

これで準備は完了です!!

動作確認

それでは早速!

Web Apps に連携させてあるリポジトリにコミットしてみましょう!

20161009_azure-kudu_logic-app_019.png

いえーい!

また、Kudu や Logic App の管理画面でも、実行結果を確認することができます。

20161009_azure-kudu_logic-app_020.png

簡単ですね!ヽ(☆’v`)★’v`)ノ

トラブルシューティング

「Logic Apps デザイナー」で Slack のサインインに失敗したとき

このようなエラーが表示され、Slack へのサインインが失敗した場合は、リソースグループ一覧に戻ってから、「API接続」のブレードでサインイン操作を完了できます。

Failed to get the consent url for connection id '/subscriptions/xxx/resourceGroups/some-resource-group/providers/Microsoft.Web/connections/slack'. Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

20161009_azure-kudu_logic-app_010.png

20161009_azure-kudu_logic-app_011.png

20161009_azure-kudu_logic-app_012.png

Epilogue - おわりに

はじめて Logic App を触りましたが、いろいろと便利そうです。

たとえば、カレンダーに予定が登録されたことを気づかずにいることがあるので、Slack 通知してみようかな~と思っています。