microCMS の Webhooks と Lambda の連携方法
こんにちは！@Ryo54388667です。
今回は、microCMS の Webhook と Lambda を連携する手順を説明していきます！
🤔 背景
microCMSで記事を更新した際、特定のAPIを叩くユースケースがありました。
その際、Webhookの責務としてトリガーのみを担う場合、現状のmicroCMSのWebhookのみで事足ります。
しかし、トリガーだけではなく、APIのリクエストbodyのdataプロパティに特定のデータを格納する必要がありました。現在(2023/09)のmicroCMSのWebhookの仕様ではリクエストbodyにデータを格納することはできないようです。そのような背景から、microCMSのWebhookと何らかのAPIと連携する必要がありました。その結果、Lambdaとの連携が候補に挙がり、素振りを行いました。
Lambda以外でこういう方法で行っています！という方がいらしたら、コメントください🙏
📝 手順
構成図について
今回作成する構成の全体像は以下の通りです。
手順の概要は以下の通りです。
- Lambda の作成および設定
- API Gateway の作成および設定
- microCMSのWebhookの設定
1.Lambdaを作成する
まず、AWSマネジメントコンソールからLambdaのページに遷移します。
そして下記の画像のボタンを押下し、関数を作成します。
ボタンの押下後、Lambdaの基本的な設定の画面に遷移します。
続いて、下記の画像の赤枠の箇所を選択します。
今回、ランタイムは「Node.js 18.x」を選択します。
ここはバージョン18以前でも全く問題ありませんが、Lambda内でAPIリクエストを行うので、その際に便利なfetchメソッドを利用するためにNode.js18を選択しました。
詳しくは下記の公式ドキュメントをご覧ください。Node.js18以前の時の方法も記載されています。
その設定をした後、画面下部の「関数の作成」ボタンを押下します。
続いて、関数の作成後、画像の赤枠の「コード」のタブを確認します。
コードの箇所に下記のコードをコピー&ペーストします。
APIコールするエンドポイントとCMS側から渡されるデータの箇所を変更してください。
const url = "https://aws.amazon.com/"; // APIのエンドポイント
export const handler = async(event) => {
console.log(“ログの確認用 : ”, JSON.stringify(event, null, 2))
const data = event.data // CMSから渡されるデータを抽出
try {
// fetch is available with Node.js 18
const res = await fetch(url, {
method: "POST",
body: JSON.stringify(data) // bodyに必要なデータを格納
});
console.info("status", res.status);
return res.json();
}
catch (e) {
console.error(e);
return 500;
}
};
コードを貼り付けた後、必ず保存(command + s) を行ってください。
2.API Gatewayの設定をする
ここで一度、Lambdaのページを離れ、AWSのAPI Gateway のページに遷移します。
一覧ページで「APIを作成」ボタンを押下します。
「統合」のセレクトボックスで「Lambda」を選択します。
統合って何なん？
APIが通信するバックエンドサービスを指定します。この指定は統合と呼ばれます。
接続先のことを指すようです。
すると、新たなセレクトボックスが表示され、Lambdaの箇所を選択すると、先ほど作成したLambda関数が候補として表示されます。該当するLambda関数を選択します。
そのあと、「API名」を決めます。こちらはダッシュボードに表示させるためのラベルなので、任意の命名で構いません。「次へ」ボタンを押下してください。
押下後、「ルートの設定」ページに遷移します。
このページでHTTP メソッドとエンドポイントのパスの設定を行います。
microCMSのWebhookはpostメソッドでアクセスする仕様なので、メソッドの箇所を「POST」と設定します。 リソースパスには、アクセスするためのエンドポイントの末尾(任意の文字列) を入力します。デフォルト値はAPI名です。ここは適宜変更してください。「次へ」ボタンを押下してください。
その後のページはデフォルト値で「次へ」を押下し、確認ページで「作成」を押下して、API Gatewayを完成させます。
ここでAPI Gateway のダッシュボードに戻り、作成した API を押下してください。
あとでエンドポイントとして利用する文字列を取得します。
画像の赤枠の箇所をコピーしておきます。
再度、先ほど作成したLambdaのページを開きます。
すると、下記の画像のように、LambdaとAPI Gateway が接続されています。
それが確認できた後、画像の「Deploy」ボタンを押下して公開します。
これで、LambdaとAPI Gateway で一連のAPIの完成です🎉
3.microCMSのWebhooksの設定
あとは、microCMSのWebhookの設定だけです！
microCMSのダッシュボードを開き、Webhookを作成したいAPIの設定画面を開きます。
Webhooks設定のモーダルが表示されるので、その中の「カスタム通知」を押下します。
Lambdaの連携はmicroCMS公式では行っていないからですね。
あとは、こちらの入力を行っていけば設定完了です。
留意する必要があるのは、URLの箇所です。
先ほど、API Gateway のページでコピーしておいたエンドポイントを利用します。
合わせて、こちらで設定したリソースパスも入力に必要です。ヘッダーに利用するデータをタグとして入力しても構いません。
(コピーしておいたエンドポイント) / (リソースパス)
👀 確認方法
設定としてはすでに完了していますが、一応確認したい場合もありますよね！
Webhookの通知が来ているかどうかを確認する方法があります。
まず、AWS のLambdaのページを開き、作成した関数のページに遷移します。
そして、下の画像の「モニタリング」タブを押下すると、「Cloudwatchログを表示」のボタンが表示されるので、そちらを押下します。
Cloudwatchのロググループのページが開きます。画像の赤枠の箇所のログストリームをどれか押下してください。Webhookが発火したであろう時刻のものを選ぶと良いと思います。
いくつかログが表示されているので、確認ができます!
ログが表示されるのは、Lambdaで下記のコードを書いているためです。
console.log(“ログの確認用 : ”, JSON.stringify(event, null, 2))
以上がmicroCMS の Webhook と Lambda を連携する手順です！
最後まで読んでいただきありがとうございます!
気ままにつぶやいているので、気軽にフォローをお願いします！🥺
Discussion