Tailwind Logo

Preview 用のサーバーを用意する

XM CloudVercel

公開日: 2023-12-17

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

更新情報

JSS 21.6 以降は Context ID を利用して Preview も簡単に作ることができるようになりました新しい記事を参考にしてください。

Preview ブランチを用意する

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

postmanedge13.png

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

postmanedge15.png

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

  • SITECORE_API_KEY
  • GRAPH_QL_ENDPOINT

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

postmanedge16.png

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

postmanedge17.png

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

postmanedge18.png

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

postmanedge19.png

ページを更新する

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

postmanedge20.png

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

postmanedge21.png

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

まとめ

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

関連タグ