Published on

Experience Edge を利用して Vercel に展開する

Authors

これまでサーバーとして Sitecore を仮想マシンとして起動していましたが、エンドポイントとして Sitecore Experience Edge というサービスを展開しており、これを利用することで Next.js のアプリを Vercel に簡単に展開することができます。今回はその展開手順に関して紹介をします。

前提条件

今回は以下のような環境が整っているとします。

  • Sitecore Experience Managar にコンテンツの展開をしていr
  • Next.js のプロジェクトに関しては GitHub に同期している
  • Sitecore Experience Manager は Sitecore Experience Edge と連携している

Sitecore Experience Edge は Sitecore が提供する SaaS のサービスで、Sitecore Experience Manager/Platform でヘッドレスで実装する際に利用可能なサービスです。これを利用することで、コンテンツ管理サーバーからコンテンツを公開すると、Experience Edge を通じて外部にコンテンツを公開することができます。

Vercel に展開する

Sitecore Experience Manager でページの編集ができるようになっている状況を前提としているため、今回は Experience Edge と Vercel を接続する手順を紹介します。

なお、Experience Manager から Experience Edge には該当するコンテンツの Publish が完了していることとします。

まず最初に、連携している GitHub のリポジトリを指定します。今回は Sitecoredemo-sxa を選択します。

vercel

Root Directory として Next.js が展開しているディレクトリを指定してください。

vercel

Environment Value としては以下の3つの項目が必要となります。

項目
SITECORE_API_KEY提供されている Experience Edge にアクセスするキー
JSS_APP_NAMENext.js の Package.json に指定しているアプリ名
GRAPH_QL_ENDPOINT提供されている Experience Edge のエンドポイント
vercel

上記の設定が完了したところで Deploy ボタンをクリックすると展開します。

vercel

しばらくすると、展開が完了して以下のように画面が切り替わります。

vercel

まとめ

Sitecore Experience Edge を利用することで、ヘッドレスでサイトを展開する際のサービスを SaaS 化することができます。そして Vercel に展開することで、Web サイト自体をサーバーレスの環境で展開しつつ、コンテンツが更新されればサイトの更新ができるようになります。