microCMS の Webhooks と Lambda の連携方法

こんにちは！@Ryo54388667です。

今回は、microCMS の Webhook と Lambda を連携する手順を説明していきます！

https://twitter.com/Ryo54388667

🤔 背景

microCMSで記事を更新した際、特定のAPIを叩くユースケースがありました。
その際、Webhookの責務としてトリガーのみを担う場合、現状のmicroCMSのWebhookのみで事足ります。

しかし、トリガーだけではなく、APIのリクエストbodyのdataプロパティに特定のデータを格納する必要がありました。現在(2023/09)のmicroCMSのWebhookの仕様ではリクエストbodyにデータを格納することはできないようです。そのような背景から、microCMSのWebhookと何らかのAPIと連携する必要がありました。その結果、Lambdaとの連携が候補に挙がり、素振りを行いました。

Lambda以外でこういう方法で行っています！という方がいらしたら、コメントください🙏

 
 

📝 手順

構成図について

今回作成する構成の全体像は以下の通りです。

手順の概要は以下の通りです。

• Lambda の作成および設定
• API Gateway の作成および設定
• microCMSのWebhookの設定

【前提】

• microCMSに何らかのコンテンツが存在すること
• Lambda内でリクエストするAPIが存在すること

僕が執筆したのは2023年9月3日現在です。
AWS マネジメントコンソールのGUIに変更があるかもしれません🙏

 
 

1.Lambdaを作成する

まず、AWSマネジメントコンソールからLambdaのページに遷移します。
そして下記の画像のボタンを押下し、関数を作成します。

 

ボタンの押下後、Lambdaの基本的な設定の画面に遷移します。
続いて、下記の画像の赤枠の箇所を選択します。

 

今回、ランタイムは「Node.js 18.x」を選択します。
ここはバージョン18以前でも全く問題ありませんが、Lambda内でAPIリクエストを行うので、その際に便利なfetchメソッドを利用するためにNode.js18を選択しました。

詳しくは下記の公式ドキュメントをご覧ください。Node.js18以前の時の方法も記載されています。
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/nodejs-handler.html

 

その設定をした後、画面下部の「関数の作成」ボタンを押下します。
続いて、関数の作成後、画像の赤枠の「コード」のタブを確認します。

 

コードの箇所に下記のコードをコピー&ペーストします。
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))

 

【 余談 ☕️ 】
今回はAWS API Gateway を利用しましたが、不要なケースもあります!
Lambdaには 「関数URL」 という機能があります。僕はつい最近知りました〜
これを利用すれば、API Gatewayを仲介せず、より簡易的にmicroCMSと連携できます。

https://dev.classmethod.jp/articles/try-aws-lambda-function-urls/

 

以上がmicroCMS の Webhook と Lambda を連携する手順です！

最後まで読んでいただきありがとうございます!
気ままにつぶやいているので、気軽にフォローをお願いします！🥺

https://twitter.com/Ryo54388667