mottox2 blog

Netlifyのデプロイ通知をDiscordで受け取る方法

blogdiscordnetlify

thumbnail

Netlifyでサイトをホスティングしていると、デプロイ開始から完了までのタイムラグがあることでデプロイの完了を把握するにはWeb UIを確認する必要があります。
しかし、デプロイごとにWeb UIを確認するのは面倒です。そんな人のためにNetlifyでは外部のアプリケーションに通知する方法が用意されています。
今回はゲーマー向きチャットとして誕生し、最近はオープンソースのプロジェクトで利用されることが多くなってきたDiscordでの設定方法を説明します。

設定方法

Discordには、特定のチャンネルにメッセージを投稿するWebhook URLを生やす機能があります。DiscordのWebhookはSlack-Compatible Webhookという機能が用意されており、Slackと同じ形式のリクエストでメッセージの投稿ができます。
この機能とNetlifyのSlackインテグレーションを利用することでDiscordにNetlifyのデプロイ通知を投稿することができます。

それでは設定をはじめましょう。

Discord側での設定

Discordで投稿したいチャンネルの設定画面を開いてください。左サイドバーにある「Webhooks」をクリックするとWebhooksの一覧画面が表示されるので「Create Webhook」ボタンをクリックしましょう。

ボタンをクリックすると次のようなモーダルが出現するので、「WEBHOOK URL」の欄に表示されているURLをコピーしておきましょう。Netlify側の設定で使用します。

スクリーンショット 2019-02-02 16.09.37.png (128.6 kB)

Netlifyでの設定

設定はサイト詳細ページの「Settings > Build & Deploy > Deploy notification」から行います。
Outgoing notificationをクリックすると通知方法の一覧が表示されるのでSlack integrationを選択しましょう。

選択したタイミングでモーダルが表示されるので「Event to listen for」には通知を受けたいタイミング、「Slack incoming webhook URL」には次のURLを入力しましょう。「Save」を押せば設定は完了です。

入力するURL
[先程取得したURL]/slack
例) https://discordapp.com/api/webhooks/xxxxxxxxxxxxxxxxx/slack
スクリーンショット 2019-02-02 15.19.30.png (89.3 kB)

通知の確認

最後に、デプロイを行い通知が正しく送信されているかを確認しましょう。
正しく設定されていれば次のように通知が行われます。

スクリーンショット 2019-02-02 16.12.06.png (72.5 kB)

おわりに

このように非常に簡単に通知を設定することができます。Netlifyではビルドで失敗しても、以前のサイトが表示されているためエラーに気づきにくいと思います。Deploy Faildのタイミングでなんらかの通知を設定しておき、ストレスレスなNetlify運用を目指しましょう。

B!
event

技術書典6にサークル参加したけど反省点が多すぎた

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そうい

技術書典
summary

最近見つけた気になる作図系Webサービス3選

今年に入って見つけた作図、画像生成系のサービスをまとめてみました。 > BlobmakerBlobmaker 最近見かけることが多くなった、丸みのある形状をランダムで生成する画像メーカー。

dev

技術書典6でNetlifyとGatsby本を頒布します

技術書典6「か67」でNetlifyとGatsbyの本を頒布します。 Netlifyは92ページ、Gatsbyは100ページ超(執筆中)でどちらとも¥1,000で頒布を予定しています。 興味のあ

gatsbynetlify技術書典