Tailwind Logo

Experience Edge と Netlify のサイトを連携させる

XM Cloud

公開日: 2023-12-19

前回は XM Cloud のサイトを Netlify に展開しましたが、サイトの更新という点では build を実行した時にページが生成される形となります。そこでページを更新したあと、Netlify のサイトも更新されるように Experience Edge に設定を追加します。

今回はページが更新された時に、Experience Edga が Webhook を利用して Netlify に対して実行するように設定をします。

Netlify に Webhook を作成

まず最初に Netlify 側で Webhook を受けることができるように、作成をします。メニューの項目としては以下のように選択をしていきます。

  • Site configuration
  • Build & Deploy
  • Continuous deployment

Build hooks の項目で追加します。今回は Experience Edge という名前で作成します。

xmcnetlify12.png

作成された URL が Webhook のポイントになります。

xmcnetlify13.png

Experience Edge の設定

設定に関する基本的な手順は以下のページで記載されています。実際には Postman を利用して作業をしていく形です。

まず最初に、Experience Edge を利用する際の Token を取得する必要があります。手順は以下のページに記載されています。

上記のページを参考にしながら進めていきます。Postman を起動して、Token 取得のための URL を POST として設定します。

xmcnetlify14.png

Body に設定する項目は raw で json として設定して、以下の json を設定することになります。

JSON 
{
    "audience" : "https://api.sitecorecloud.io",
    "grant_type" : "client_credentials",
    "client_id" : "",
    "client_secret" : ""
}

ここで設定をする client_id と client_secret は XM Cloud Deploy で作成することができます。Credientials の Environment のタブを選択、Edge Administration を選択してください。

xmcnetlify15.png

今回は以下のように設定をしました。

xmcnetlify16.png

作成をすると、以下のようにそれぞれのキーが出力されます。なお、client_secret に関してはこの画面以降表示されないため、大事に保管してください。

xmcnetlify17.png

実行すると、access_token を取得することができます。

xmcnetlify18.png

Webhook の情報を取得できるかを確認するために、新しく Postman で GET でデータを取得するリクエストを作成します。この際、上記で取得した Bearer token を設定してください。

xmcnetlify19.png

200 が返ってきていれば正しい結果で、かつ Experience Edge の結果としてはまだ何も設定していないため空で正解です。

では新しい Webhook を作成します。認証はそのままで、GET ではなく POST に切り替え、以下の Json のデータを body に設定します（url は Netlify の webhook と同じものを入れてください）。

JSON 
{
  "label": "Netlify Deploy",
  "uri": "https://api.netlify.com/build_hooks/yourapikey",
  "method": "POST",
  "createdBy": "Haramizu",
  "executionMode": "onEnd"
}

送信をすると、以下のように結果が返ってきます。

xmcnetlify20.png

実際に一覧に登録できているか、１つ前の手順で実行した GET で設定を取得すると以下のようになっています。

xmcnetlify21.png

動作確認

今回の編集サーバーとなっているサイトの CMS で、トップページのコンテンツを更新して公開します。

xmcnetlify22.png

しばらくすると Netlify にリクエストが送信され、サイトが更新される形です。Deploy を参照すると、以下のように Webhook で連携できているのがわかります。

xmcnetlify23.png

サイトにアクセスすると、ページが更新されているのがわかります。

xmcnetlify24.png

まとめ

CMS にてコンテンツの公開手続きをすると、Netlify 側でページが生成されていることを確認できました。今回は Netlify との連携という形になっていますが、その他の仕組みとの連携でも実現可能です。SSG モードで動いている場合は、ページの生成をしてホストする形ですので、この手順は非常に汎用性が高い形です。

参考サイト

関連タグ