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

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

Prologue - はじめに

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

• Azure App Service への継続的なデプロイ

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

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

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

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

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

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

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

Bitbucketのリポジトリにコミットした場合の例

{
    "id": "27cf7b...",
    "status": "success",
    "statusText": "",
    "authorEmail": "[e-mail]",
    "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 にはありません。

• Incoming Webhooks | Slack

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

Azure Logic Apps とは？

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

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

• Microsoft Azure ロジック アプリで使用できる Microsoft が管理するコネクタの一覧

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

手順

構成図

大まかな手順

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

手順の詳細

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

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

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

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

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応答アクションについての詳細はこちらをご参照くださいませ。

• 要求アクションと応答アクションの使用 |Microsoft Azure

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

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

• Slack への接続を作成する

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

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

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

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

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

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

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

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

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

動作確認

それでは早速！

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

いえーい！

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

簡単ですね！ヽ(☆’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

Epilogue - おわりに

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

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