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

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

Prologue - はじめに
====
[Azure Web Apps](https://azure.microsoft.com/ja-jp/services/app-service/web/ "Web App Service | Microsoft Azure") は、GitHub などと連携して継続的インテグレーションを行うことができます。

- [Azure App Service への継続的なデプロイ](https://azure.microsoft.com/ja-jp/documentation/articles/app-service-continuous-deployment/ "Azure App Service への継続的なデプロイ | Microsoft Azure")

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

Azure Web Apps とその基盤についてちょっと解説
=============================================
*すぐに設定したい人は、後述の[手順](#%E6%89%8B%E9%A0%86)にお進みください～*

Azure Web Apps は、 [Kudu](https://github.com/projectkudu/kudu "projectkudu/kudu: Kudu is the engine behind git/hg deployments, WebJobs, and various other features in Azure Web Sites. It can also run outside of Azure.") という デプロイメントシステムの上で動いています。ちなみに、この Kudu は、 Azure 以外の環境でも動かすことができ、オープンソースとして運用されています。

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

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

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

```json: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` にはありません。


- [Incoming Webhooks | Slack](https://api.slack.com/incoming-webhooks "Incoming Webhooks | Slack")

そこで、Kudu → payload変換 → Slack を実現するために結局スクリプトを書く…という手間をさけるべく、辿り着いたのは [Azure Logic Apps](https://azure.microsoft.com/ja-jp/services/logic-apps/ "Logic App Service | Microsoft Azure") でした！

Azure Logic Apps とは？
-------------------------

GUI でワークフローをつなげて、様々な処理を作ることができます。Azure 版 [Node-RED](http://nodered.org/ "Node-RED") といったところです。

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

- [Microsoft Azure ロジック アプリで使用できる Microsoft が管理するコネクタの一覧](https://azure.microsoft.com/ja-jp/documentation/articles/apis-list/ "Microsoft Azure ロジック アプリで使用できる Microsoft が管理するコネクタの一覧 | Microsoft Azure App Service | Microsoft Azure")

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

手順
==============
構成図
----------

![20161009_azure-Kudu_logic-app_000.png](https://qiita-image-store.s3.amazonaws.com/0/3812/692a0d93-bbea-d19c-7580-efc0799ec80a.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](https://qiita-image-store.s3.amazonaws.com/0/3812/e1c75ab9-3f4f-8a1f-3310-f39a0ec8b604.png)

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

![20161009_azure-kudu_logic-app_003.png](https://qiita-image-store.s3.amazonaws.com/0/3812/0f2d7c49-348a-d321-28e7-fb242dd17682.png)

```json: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](https://azure.microsoft.com/ja-jp/documentation/articles/connectors-native-reqres/ "要求アクションと応答アクションの使用 |Microsoft Azure")

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

![20161009_azure-kudu_logic-app_004.png](https://qiita-image-store.s3.amazonaws.com/0/3812/2f33091b-8ccf-25de-10ac-b473546e16d0.png)

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

- [Slack への接続を作成する](https://azure.microsoft.com/ja-jp/documentation/articles/connectors-create-api-slack/#slack-2 "Slack への接続を作成する | ロジック アプリで Slack コネクタを使用する | Microsoft Azure")

![20161009_azure-kudu_logic-app_005.png](https://qiita-image-store.s3.amazonaws.com/0/3812/4e6cc638-54b7-d88a-58f7-68cea4a9d5b0.png)

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

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

![20161009_azure-kudu_logic-app_013.png](https://qiita-image-store.s3.amazonaws.com/0/3812/61bdecc0-76a9-14b1-926e-621f15948ce1.png)

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

![20161009_azure-kudu_logic-app_014.png](https://qiita-image-store.s3.amazonaws.com/0/3812/c19cb301-5b7e-450d-ebeb-4ee2ecd206f1.png)


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

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

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

![20161009_azure-kudu_logic-app_015.png](https://qiita-image-store.s3.amazonaws.com/0/3812/aeff771a-00a0-d2d6-5328-e9b125546471.png)

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

![20161009_azure-kudu_logic-app_016.png](https://qiita-image-store.s3.amazonaws.com/0/3812/93a6aa0e-53c3-3ab9-82b8-0f8be3d110b3.png)

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

![20161009_azure-kudu_logic-app_017.png](https://qiita-image-store.s3.amazonaws.com/0/3812/b57bc4c7-97da-c8fa-5be7-e1ad20d1db5b.png)

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

### 動作確認

それでは早速！

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

![20161009_azure-kudu_logic-app_019.png](https://qiita-image-store.s3.amazonaws.com/0/3812/3b65b03d-6d79-73a9-1aed-30cfbbd215c9.png)

いえーい！


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

![20161009_azure-kudu_logic-app_020.png](https://qiita-image-store.s3.amazonaws.com/0/3812/7ec07ecb-2018-afb7-3ecb-96b83b7398af.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](https://qiita-image-store.s3.amazonaws.com/0/3812/e3bfe0b6-dd7b-89df-2308-bf4c3a60800d.png)

![20161009_azure-kudu_logic-app_011.png](https://qiita-image-store.s3.amazonaws.com/0/3812/c4ef8181-2eff-a8de-181d-120b8292055a.png)

![20161009_azure-kudu_logic-app_012.png](https://qiita-image-store.s3.amazonaws.com/0/3812/b6ebf791-c506-8c7e-a3bf-1601ab1f3a15.png)


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

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