前回は XM Cloud のサイトを Netlify に展開しましたが、サイトの更新という点では build を実行した時にページが生成される形となります。そこでページを更新したあと、Netlify のサイトも更新されるように Experience Edge に設定を追加します。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4SgSN5iBZDWwTs87nf5JfC%2Fccdbfd7cb1ed848019547354c0562fcb%2Felena-mozhvilo-CwIOnANQW-A-unsplash.jpg&w=3840&q=75)
今回はページが更新された時に、Experience Edga が Webhook を利用して Netlify に対して実行するように設定をします。
Netlify に Webhook を作成
まず最初に Netlify 側で Webhook を受けることができるように、作成をします。メニューの項目としては以下のように選択をしていきます。
- Site configuration
- Build & Deploy
- Continuous deployment
Build hooks の項目で追加します。今回は Experience Edge という名前で作成します。
![xmcnetlify12.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4miWiZvgk0y8c0R11f0bCo%2Fe257dc80b1c95842f7c6af50a428f92d%2Fxmcnetlify12.png&w=3840&q=75)
作成された URL が Webhook のポイントになります。
![xmcnetlify13.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F9LeroS6aNgoS5sxu1N0XM%2F5090436e9736f605386d5914caddc22e%2Fxmcnetlify13.png&w=3840&q=75)
Experience Edge の設定
設定に関する基本的な手順は以下のページで記載されています。実際には Postman を利用して作業をしていく形です。
まず最初に、Experience Edge を利用する際の Token を取得する必要があります。手順は以下のページに記載されています。
上記のページを参考にしながら進めていきます。Postman を起動して、Token 取得のための URL を POST として設定します。
![xmcnetlify14.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7K5EqI7YvjYMb4DN4spMYW%2F408b242b455149693eb02664a6df8c6e%2Fxmcnetlify14.png&w=3840&q=75)
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 を選択してください。
![xmcnetlify15.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F45Qcq2tNNV7DMl1z62ij9R%2Ff5317c84003781d31bf7bc922aa1641d%2Fxmcnetlify15.png&w=3840&q=75)
今回は以下のように設定をしました。
![xmcnetlify16.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5Epr0oSwJKulwjIxARlTsl%2F5f3227fe94239dd36237b5a0f61adbb1%2Fxmcnetlify16.png&w=3840&q=75)
作成をすると、以下のようにそれぞれのキーが出力されます。なお、client_secret に関してはこの画面以降表示されないため、大事に保管してください。
![xmcnetlify17.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2sE1wfqKzbnrusrZOBTNAs%2Ff65d1408403fe9cd6d68c08956757ee4%2Fxmcnetlify17.png&w=3840&q=75)
実行すると、access_token を取得することができます。
![xmcnetlify18.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5sAfbtTcRPwl86PFMJBuiI%2F066db7be25ef33a063734ad87ca6b06e%2Fxmcnetlify18.png&w=3840&q=75)
Webhook の情報を取得できるかを確認するために、新しく Postman で GET でデータを取得するリクエストを作成します。この際、上記で取得した Bearer token を設定してください。
![xmcnetlify19.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4Z0wjWM4gMmwMWlF9gOnOI%2F7cd841ce0cf3d78753ec083db09eb61f%2Fxmcnetlify19.png&w=3840&q=75)
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"
}
送信をすると、以下のように結果が返ってきます。
![xmcnetlify20.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2oe0L40RCxg1SjNBYwSWVC%2F96436e3a8007f4ff57e03b956248a457%2Fxmcnetlify20.png&w=3840&q=75)
実際に一覧に登録できているか、1つ前の手順で実行した GET で設定を取得すると以下のようになっています。
![xmcnetlify21.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1FHcYj80iJFUM9Qw35eXvO%2F07b8ea9fb7f1ff3b03a6bd7682157d55%2Fxmcnetlify21.png&w=3840&q=75)
動作確認
今回の編集サーバーとなっているサイトの CMS で、トップページのコンテンツを更新して公開します。
![xmcnetlify22.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3EBU14N8aU3cxIaxVyJk0i%2Ff9ed602af5aae5d5f49f593b8fb76495%2Fxmcnetlify22.png&w=3840&q=75)
しばらくすると Netlify にリクエストが送信され、サイトが更新される形です。Deploy を参照すると、以下のように Webhook で連携できているのがわかります。
![xmcnetlify23.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7AmCBEurgg5XxEYZSEs1AO%2Fb9ea25cdf970a15b3a3578607197f2ba%2Fxmcnetlify23.png&w=3840&q=75)
サイトにアクセスすると、ページが更新されているのがわかります。
![xmcnetlify24.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F65Hsa9Rx6mi2zDyGN7M9Qp%2F35865db5e403a528bbf81e2d23c417b5%2Fxmcnetlify24.png&w=3840&q=75)
まとめ
CMS にてコンテンツの公開手続きをすると、Netlify 側でページが生成されていることを確認できました。今回は Netlify との連携という形になっていますが、その他の仕組みとの連携でも実現可能です。SSG モードで動いている場合は、ページの生成をしてホストする形ですので、この手順は非常に汎用性が高い形です。
参考サイト
- Walkthrough: Deploying your front-end application to Netlify
- Admin API
- Request a JWT for Experience Edge XM using OAuth