こんにちは！！バックエンドコースのakinoriです
PlayGroundアドベントカレンダー14日目の記事になります。
アプリケーション開発・サイト制作に取り組んでいる際に、テストやデプロイにGitHub Actionsを使うことがあると思いますが、Slackに通知したいと考えたことはありませんか、僕はあります。
今回の記事は、GitHub Actionsを実行し、Slackにリッチに通知する方法を解説していきたいと思います
下準備として通知先のワークスペースとチャンネルを用意・確認しておきます。今回は「MyTodo」というワークスペースと#notifyチャンネルを作成しておきます。
SlackのWebhook URLを取得する
SlackのIncoming Webhookは、チャンネルにメッセージテキストを送信する機能を提供しています。この章では、次の章で用いるWebhook URLを取得します。
- Slack APIのページを開き、「Create an app」ボタンをクリックします。
Slack
2. 「From scratch」でアプリ名の設定とワークスペースの選択をします。今回はアプリ名を「alert」にします。設定が完了したら「Create App」を押下します。
3. 遷移先の「Basic Information」ページで「Incoming Webhooks」を開き、デフォルトではOffになっているIncoming WebhooksをOnにします。
4. 下部にある「Add New Webhook to Workspace」を押下すると、権限のリクエストが表示されますので、投稿先チャンネルに#notifyを指定し、許可します。
5. Webhook URLを取得できますので、メモしておきます。
CURLでSlack通知
curlは、サーバーにリクエストを送信し、レスポンスを受信するツールです。
お気に入りのシェル(Bashなど)を開いて以下のコマンドを実行してみましょう。様々な情報がレスポンスとして表示されるはずです。実行コマンドと表示内容のサンプルです。
curl google.com
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 219 100 219 0 0 3842 0 --:--:-- --:--:-- --:--:-- 3910<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>301 Moved</TITLE></HEAD><BODY>
<H1>301 Moved</H1>
The document has moved
<A HREF="http://www.google.com/">here</A>.
</BODY></HTML>
リクエストとレスポンスについてもう少し深堀りします。リクエストとレスポンスは主に開始行、ヘッダー、ボディの3つに構成されます。
開始行（スタートライン）
開始行ではリクエストではメソッドを、レスポンスではステータスコードを意識する必要があります。
代表的なメソッドはGET/POST/PUT/DELETEの４つです。GETはリソースの取得（例えばHTMLの取得）、POSTはリソースの登録・送信（例えば会員登録）、PUTはリソースの更新（例えば会員情報の更新）、DELETEはリソースの削除（例えば退会）にあたります。他にもPATCHなどのメソッドがありますので、気になる方は調べてみてください。
ステータスコードは非常に沢山ありますが、400番台と500番台の二つに分けることが可能です。400番台のエラーはユーザー側の問題であり、代表的には404 Not Foundが挙げられます。このエラーは指定のURLのページが存在しないことを指しており、適切なURLを指定することで解決できます。500番台のエラーはサーバー側の問題であり、代表的には503 Service Unavailabelが挙げられます。このエラーは指定のサイトでアクセス集中が発生しており、ユーザーが時間をおいてアクセスしたりサーバーのスペックを上げることで解決できます。
ヘッダー
ヘッダーはkey: valueの形式で格納されます。例えばコンテンツのタイプをJSONで指定したい場合は、Content-Type: application/jsonとします。
少し話がそれますが、JSONとは「JavaScriptのオブジェクトの書き方を用いたデータフォーマット」になります。（JavaScriptのオブジェクトの書き方と完全に一致しているわけではありませんが。）バックエンドとフロントエンドでデータをやりとりする際に使用する機会が多いと思います。
ボディ
ボディには、メッセージテキストが入ります。POSTでサーバーにデータを登録するためのデータや、GETでサーバーから返されるデータが含まれています。
例えば、ログインする際のデータはJSON形式で以下のようになるでしょう。
{
"email": "user@sample.com",
"password": "Password"
}
さて本題に戻り、curlでslack通知しましょう。サンプルは以下ですので、WEBHOOK_URLにご自身で設定したWehhook URLを入れてあげてください。
curl -X POST -H 'Content-type: application/json' -d '{"text":"Hello, World!"}' WEBHOOK_URL
これでSlackにAlertアプリより「Hello, World!」というメッセージが送信されたはずです。XオプションでHTTPメソッドにPOSTを、HオプションによりヘッダーでコンテンツのタイプをJSONで指定し、dオプションで送信するボディを設定しています。
GitHub ActionsでSlackに通知する
今回は「test-notify」という名前でGitHubでリポジトリを作成します。README.mdも一緒に作成しておきましょう。
GitHub Actionsは、repository/.github/workflowsディレクトリにYAMLファイルを作成することで使えます。YAMLファイル名は任意ですが、今回はslack_notifiy.ymlにします。
中身はこんな感じにしましょう。
name: SLACK NOTIFY
on:
workflow_dispatch:
jobs:
notify:
runs-on: ubuntu-latest
steps:
- run: echo Hello
今回は「workflow_dispatch」をトリガーにすることでGitHub Actionsを手動で実行できます。Actionsタブを開き、Actionsメニューから「SLACK NOTIFY」を開いてあげます。「Run workflow」とありますので押下して実行します。
簡単なActionsなのですぐにcompleteになるはずです。
次はSlackに通知してみましょう。Slackの通知ではHTTPリクエストするのでHTTP Request Actionを用います。
name: SLACK NOTIFY
on:
workflow_dispatch:
jobs:
notify:
runs-on: ubuntu-latest
steps:
- name: Notify
uses: fjogeleit/http-request-action@v1
with:
url: ${{ secrets.WEBHOOK_URL }}
customHeaders: '{"Content-Type": "application/json"}'
data: '{"text":"Hello, World!"}'
Webhook URLはURLさえ分かってしまえば、簡単に送信できてしまいます。そのため外部に漏らさぬように秘密にする必要があります。リポジトリのSettingsを開き、「Actions secrets」でWEBHOOK_URLという変数にWebhook URLを設定してあげましょう。
手動で実行するとSlackに通知がなされるはずです。さて次はもう少しリッチでお洒落なテキスト送ってあげます。
お洒落なメッセージを送信する
SlackはBlock Kit Builderを提供しています。これを使うことでメッセージをお洒落にカスタマイズできます。
まずは以下のようにサンプルを用いてメッセージを送信しましょう。stepsのdataでは複数行になるため、|を挿入しています。
name: SLACK NOTIFY
on:
workflow_dispatch:
jobs:
notify:
runs-on: ubuntu-latest
steps:
- name: Notify
uses: fjogeleit/http-request-action@v1
with:
url: ${{ secrets.WEBHOOK_URL }}
customHeaders: '{"Content-Type": "application/json"}'
data: |
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello, Assistant to the Regional Manager Dwight! *Michael Scott* wants to know where you'd like to take the Paper Company investors to dinner tonight.\n\n *Please select a restaurant:*"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Ler Ros*\n:star::star::star::star: 2082 reviews\n I would really recommend the Yum Koh Moo Yang - Spicy lime dressing and roasted quick marinated pork shoulder, basil leaves, chili & rice powder."
},
"accessory": {
"type": "image",
"image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/DawwNigKJ2ckPeDeDM7jAg/o.jpg",
"alt_text": "alt text for image"
}
},
{
"type": "divider"
}
]
}
今回はクリスマスも近いことですし、メリークリスマスのメッセージを送ることにしましょう。こんな感じにします。
name: SLACK NOTIFY
on:
workflow_dispatch:
jobs:
notify:
runs-on: ubuntu-latest
steps:
- name: Notify
uses: fjogeleit/http-request-action@v1
with:
url: ${{ secrets.WEBHOOK_URL }}
customHeaders: '{"Content-Type": "application/json"}'
data: |
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*メリークリスマス！！*"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*自分へのプレゼントメッセージだよ！* \n 今年も終わりが近いから健康に過ごしてね。美味しい食べ物沢山食べるんだ！"
},
"accessory": {
"type": "image",
"image_url": "https://shop.letao.jp/client_info/LETAO/itemimage/R802/PC/R802_01.jpg",
"alt_text": "alt text for image"
}
},
{
"type": "divider"
}
]
}
さてクリスマス当日にGitHubを開いて、メッセージ送信のトリガーを実行しましょう。これで最高の一日を過ごせますね！ケーキ沢山食べるぞ！！
念のため
もし万が一実行に失敗したらどうしましょうか。怖くなってきました。一年で一回きりのクリスマスです、準備には念を入れておきたいです。
怖くなってきたので、「メリークリスマス」と言って貰いましょう。
stepsに以下を追加しておきましょう。通知は届きませんが、メリークリスマスは言って貰えます。
- run: echo Merry Christmas
これで安心です。後は当日にトリガーを実行するだけです。忘れそうなのでタスク化しておきます。
終わりに
実際には手動トリガーを使うことはなく、PUSHなどのなんらかのイベントをトリガーに自動実行してもらうことが多いと思います。
さらに言えば、Slack通知をするのは何らかのテストに失敗した時が多いでしょう。もし失敗した時・成功した時だけSlackに通知してもらいたい場合は、if: ${{ failure() }}やif: ${{ success() }}を使うと良いと思います。
GitHub Actionsで外部の自動テスト実行をリクエストし、そのレスポンスに含まれるテスト番号をSlackに通知することもできます。このようにすることで、テスト終了までGitHub Actionsを待機させる必要がなくなります。
使い方は様々あると思いますが、今後も創意工夫していきたいと思います。
最後まで読んでくださりありがとうございます。
