Experience Edge の Preview を利用することで、公開前のデータを確認することが可能ということを前回確認をしました。そこで、Preview 用のインスタンスを Vercel で今回は用意してみます。

Preview ブランチを用意する

まず GitHub のリポジトリで Preview のブランチを用意します。Preview のブランチは main ブランチから今回は作成します。

続いてこのブランチを利用するドメインを Vercel に設定をします。まず、Domains の画面で以下のようにドメインを指定します（ vercel.app のドメインでも問題ありませんが、今回は preview.sitecoredemo.jp としています）。また、ブランチをここでは preview を指定しました。

最後に Environment Variables に関して以下の項目を変更していく必要があります。

• SITECORE_API_KEY

• GRAPH_QL_ENDPOINT

まず、すでに設定しているキーは Production のみの値として設定をします。続いて Preview に関してのキーを設定しますが、この際ブランチを指定します。

設定が完了した画面は以下の通りです。

GitHub の Preview ブランチに対して、ファイルを更新してください。コメントアウトしている文章を更新する程度で問題ありません。更新をすると、以下のように preview が build されます。

Deploy が完了した画面は以下の通りです。

ページを更新する

今回は、Pages でコンテンツの更新をします（ Display Name は Sitecore の中で利用している値のため、ページのプレビューではわからないため）。簡単な文字の変更をしました。

Preview のインスタンスにアクセスをすると、以下のようにページが変更されていることがわかります。

Publish をすることで外部に反映されます。このように、コンテンツデータベースは１つで、公開済、プレビューという形でサイトを作ることができました。

まとめ

今回は GitHub のブランチを用意して、Preview を用意しました。そしてその Preview が利用する Experience Edge の値を Preview の値にすることで、１つの CMS で編集中のデータをブラウザで確認することができるようになりました。GitHub の環境は main の前に preview を設定、preview からのみ pull request を送れるようにしておくことができます。