XM Cloud で利用する Rendering を追加する
Sitecore のツールと Next.js のプロジェクトが連携をして、見たまま編集を実現しています。XM Cloud ではデフォルトで１つの Rendering のインスタンスを用意していますが、別途外部で用意することができます。今回は、前回作成をした別のサイトを利用して手順を確認していきます。
Vercel
Vercel はサーバーレスでホスティングすることができるサービスです
Preview 用のサーバーを用意する
Experience Edge の Preview を利用することで、公開前のデータを確認することが可能ということを前回確認をしました。そこで、Preview 用のインスタンスを Vercel で今回は用意してみます。
Vercel Deployment Protection を有効にして JSS のアプリを展開する
前回は Vercel の設定の際に Vercel Deployment Protection に関して簡単に紹介をしましたが、アプリの動作を変更することで正しく Vercel Deployement Protection を利用できるようになります。
XM Cloud を展開した後の Vercel 設定のポイント
これまで Vercel に展開する手順を紹介していましたが、今回は展開後のいくつかの設定を紹介していきます。Edition による違いも今回は取り上げます。
Sitecore XM Cloud - Vercel との連携
Sitecore XM Cloud で作成をした CMS のデリバリー環境として Vercel を選択することが可能ですが、この作業を簡単にするための Sitecore XM Cloud との連携機能を提供しています。今回は、この機能を利用して、Web サイトを Vercel に展開する手順を紹介します。
Vercel に XM Cloud のサイトを展開する
XM Cloud をこれまで紹介してきましたが、これまで CMS の環境を操作しているだけでした。実際に Web サイトとして公開をする際には、ヘッドレスとして実装しているので別のサービスと連携させる必要があります。今回は、Vercel にサイトを展開する手順を紹介します。
Experience Edge を利用して Vercel に展開する
これまでサーバーとして Sitecore を仮想マシンとして起動していましたが、エンドポイントとして Sitecore Experience Edge というサービスを展開しており、これを利用することで Next.js のアプリを Vercel に簡単に展開することができます。今回はその展開手順に関して紹介をします。
エクスペリエンス エディターを利用できるようにする
前回は Vercel に新しいサイトを展開することができました。このインスタンスを利用して、エクスペリエンスエディターでページの編集をできるように進めていきます。
Vercel に展開する
これまで作成をしてきた Web サイトを Vercel に展開したいと思います。シリーズの最初の頃に立ち上げたサーバーに対してサンプルのデータを展開、合わせて Vercel に展開する手順を紹介していきます。