Experience Edge の Preview を利用することで、公開前のデータを確認することが可能ということを前回確認をしました。そこで、Preview 用のインスタンスを Vercel で今回は用意してみます。
更新情報
JSS 21.6 以降は Context ID を利用して Preview も簡単に作ることができるようになりました新しい記事を参考にしてください。
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 を送れるようにしておくことができます。