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

公開日 :

前回は 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 という名前で作成します。

random desc

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

random desc

Experience Edge の設定

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

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

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

random desc

Body に設定する項目は raw で 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 を選択してください。

random desc

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

random desc

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

random desc

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

random desc

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

random desc

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

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

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

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

random desc

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

random desc

動作確認

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

random desc

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

random desc

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

random desc

まとめ

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

参考サイト