Netlify functionsでSlackにメッセージを投稿するAPIを作成した際の忘備録です。
やりたい事
NetlifyでホスティングしているWebページのデプロイが成功したら、Slackにメッセージを投稿する。
ちなみに、Netlifyの有料プランならSlack notificationsで簡単に設定できるようです。
（以前は無料プランでも使えていた…？）
Netlify functionsとは
- AWS LambdaをNetlify上で使えるようにしたもの（AWSアカウント不要）
- JavaScript または Go で書ける。
- 無料プランでは、リクエスト数125,000／月と制限がある
リクエスト数の上限を越えると、自動的に次のレベルまたはパッケージにアップグレードされるようなので注意！
構成
- ホスティング： Netlify
- SSG： Next.js
- ソース管理： Github
フローとしては、次の通りです。
- Next.jsで静的出力したソースをGithubリポジトリへプッシュ
- Githubへのプッシュをトリガーに、Netlifyが自動ビルド＆デプロイ
- デプロイが成功したら、Slackに「デプロイが成功しました」とメッセージ投稿
前提条件
- NetlifyとGitリポジトリの連携設定が完了している
- メッセージを投稿したいSlackチャンネルが既に用意されている
環境
- macOS Mojave 10.14.6
- Next.js 9.4.4
- Node.js v12.12.0
実装
1. Slackでの設定
SlackのIncoming Webhook URLを取得します。
Incoming Webhook URL作成方法
- Slackにログインした状態で
https://slack.com/services/new/incoming-webhook にアクセス - 通知を送りたいチャンネルを選択し、「Incoming Webhookインテグレーションの追加」ボタンを押す
- 作成されたWebhook URLをコピーして控えておく
2. APIの作成
※今回はNext.jsを使用しているので、ディレクトリ構成などはNext.jsの仕様に従っています。
2-1. 必要なnpmパッケージのインストール
yarn add node-fetch
yarn add netlify-lambda
2-2. /functions/slack.jsを作成
先ほど作成したWebhook URLへPOSTリクエストを投げるAPIを作ります。
import fetch from "node-fetch";
exports.handler = async (event, context) => {
if (event.httpMethod !== "POST") {
return { statusCode: 405, body: "Method Not Allowed" };
}
return fetch(process.env.SLACK_WEBHOOK_URL, {
headers: {
"content-type": "application/json"
},
method: "POST",
body: JSON.stringify({ text: `デプロイが成功しました` })
})
.then(() => ({
statusCode: 200,
body: `Your message has been sent to Slack.`
}))
.catch(error => ({
statusCode: 422,
body: `Oops! Something went wrong. ${error}`
}));
};
2-3. Netlify functionを生成するnpmコマンドの追加
以下のようにlambda-buildコマンドを追加します。
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"export": "next export",
"lambda-build": "netlify-lambda build functions/"
}
コマンドを追加したら、lambda-buildを叩きます。
yarn lambda-build
すると、先ほど作成した/functions/slack.jsがビルドされ、/apiに吐き出されます。
2-4. APIディレクトリの設定
どのディレクトリに格納されているファイルをNetlifyがAPIとして認識するかをnetlify.tmlファイルで設定します。（この設定は恐らくNetlifyダッシュボードからでも可能）
今回だとapiディレクトリを指定します。
functions = "api"
3. Netlifyダッシュボードでの設定
3-1. 環境変数の設定
NetlifyダッシュボードからSettings > Build & Deploy > Build environment variablesと進み、SlackのWebhook URLを環境変数として設定します。
3-2. Netlifyのイベント設定
このイベントが発生したら、このサーバーレス関数呼んでね！という設定をします。
-
「Site settings」を開き、
メニューからBuild & deploy>Deploy notificationsを選択 -
「Add notification」のプルダウンから
Outgoing webhookを選択 -
「Event to listen for」でイベント発火のトリガーを選択
今回はデプロイ成功時（Deploy succeeded） -
「URL to notify」にはAPIのエンドポイントを設定します。
Netlify functionsのエンドポイントについて
https://ドメイン/.netlify/functions/APIファイル名
例）
サイトのURLがhttps://hoge-hoge.netlify.app
APIプログラムのファイル名がslack.jsだとすると、
APIエンドポイントは
https://hoge-hoge.netlify.app/.netlify/functions/slack となる。
動作確認
Gitリポジトリへpushし、Netlifyでのビルド・デプロイが成功すると…
無事に通知がきました〜！
参考
https://docs.netlify.com/functions/overview/
https://functions-playground.netlify.app/