これまでサーバーとして Sitecore を仮想マシンとして起動していましたが、エンドポイントとして Sitecore Experience Edge というサービスを展開しており、これを利用することで Next.js のアプリを Vercel に簡単に展開することができます。今回はその展開手順に関して紹介をします。
前提条件
今回は以下のような環境が整っているとします。
- Sitecore Experience Manager にコンテンツの展開をしている
- 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 を選択します。
![vercel07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2gYqNsTQzodwcAickkM01g%2Fc165663553533ca2c00b23f23b3a45ca%2Fvercel07.png&w=3840&q=75)
Root Directory として Next.js が展開しているディレクトリを指定してください。
![vercel08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4r237tteL3ZDk6tGifhaq0%2Fe9e1f00cc0fafe311b9ab156bd8703bf%2Fvercel08.png&w=3840&q=75)
Environment Value としては以下の3つの項目が必要となります。
項目 | 値 |
---|---|
SITECORE_API_KEY | 提供されている Experience Edge にアクセスするキー |
JSS_APP_NAME | Next.js の Package.json に指定しているアプリ名 |
GRAPH_QL_ENDPOINT | 提供されている Experience Edge のエンドポイント |
![vercel09.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1mF4dkeByvwvG2lXdXGy6V%2F58c0440a9e5452fa88ac13113997ee73%2Fvercel09.png&w=3840&q=75)
上記の設定が完了したところで Deploy ボタンをクリックすると展開します。
![vercel10.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5BEnMMukTDmasoeE6DOdZ6%2F46945cee856e2392daaa51846d0963cf%2Fvercel10.png&w=3840&q=75)
しばらくすると、展開が完了して以下のように画面が切り替わります。
![vercel11.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F47SReZGlYc8fujmYbln5dZ%2Fbe853eab0bd4c67c8206cc4966f7df02%2Fvercel11.png&w=3840&q=75)
まとめ
Sitecore Experience Edge を利用することで、ヘッドレスでサイトを展開する際のサービスを SaaS 化することができます。そして Vercel に展開することで、Web サイト自体をサーバーレスの環境で展開しつつ、コンテンツが更新されればサイトの更新ができるようになります。