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!
dev

WordPressをSifterでホスティングする際の検討メモ

Shifterは株式会社デジタルキューブ が運営する「Serverless Static WordPress ホスティング」と銘打っているサービスです。 通常用途でWordPressをする際は常

shifterwordpress
tips

Production modeでもVue.js Devtoolsを有効にする方法

今年のWWDCは熱かったですね!その中でもSwiftでReactのように宣言的にUIを記述できるSwiftUIの発表はこれからのiOSアプリに変革をもたらす存在だと思います。 そのSwiftUIの

chromevue
event

『初夏のJavaScript祭』でSPAのSSR, SSGについて話してきました

メンバーズキャリアさんのオフィスで開催された『初夏のJavaScript祭 in メンバーズキャリア』で登壇の枠を頂いたのでSPAをリリースする際によく検討されるSSR(Server Side Red