Content Hub ONE のサンプル作成 - Next.js
Content Hub ONE と連携するサンプルアプリケーションとして、Next.js を利用してデモを作成していきます。
Vercel
Vercel はサーバーレスでホスティングすることができるサービスです
コンポーネント開発用の Next.js プロジェクトを Vercel に展開する
今回は少し趣向を変えて、Storybook のプロジェクトを Vercel に展開をして参照できるようにしてみたいと思います。
Context ID Preview を利用しているときの動作確認
Context ID を利用して Live および Preview のサイトを Vercel で展開する方法を以前紹介をしました。今回は、この Preview の動作を少し確認していきます。
Vercel CLI を利用して環境変数を同期する
前回は Context ID を利用して Vercel に Web サイトを展開しました。今回は Vercel CLI を利用して Vercel に設定した環境変数を手元の開発環境でも利用できるように、同期する手順を確認していきます。
Context ID を利用して Vercel に環境を構築する
これまで Vercel での展開やローカルの Next.js を利用して XM Cloud に接続する際には、API キーとエンドポイントを利用して展開していました。JSS 21.6 以降はこの部分を変更して Context ID を利用できるようになりました。今回はこれを紹介します。
Auth0 を追加した Next.js App Router のアプリを Vercel に展開する
前回作成をしたアプリはローカルで動作していました。今回はローカルではなく Vercel に展開してログインできるように進めていきます。
XM Cloud で利用する Rendering を追加する
Sitecore のツールと Next.js のプロジェクトが連携をして、見たまま編集を実現しています。XM Cloud ではデフォルトで１つの Rendering のインスタンスを用意していますが、別途外部で用意することができます。今回は、前回作成をした別のサイトを利用して手順を確認していきます。
Preview 用のサーバーを用意する
Experience Edge の Preview を利用することで、公開前のデータを確認することが可能ということを前回確認をしました。そこで、Preview 用のインスタンスを Vercel で今回は用意してみます。
Vercel Deployment Protection を有効にして JSS のアプリを展開する
前回は Vercel の設定の際に Vercel Deployment Protection に関して簡単に紹介をしましたが、アプリの動作を変更することで正しく Vercel Deployement Protection を利用できるようになります。
XM Cloud を展開した後の Vercel 設定のポイント
これまで Vercel に展開する手順を紹介していましたが、今回は展開後のいくつかの設定を紹介していきます。Edition による違いも今回は取り上げます。
Sitecore XM Cloud - Vercel との連携
Sitecore XM Cloud で作成をした CMS のデリバリー環境として Vercel を選択することが可能ですが、この作業を簡単にするための Sitecore XM Cloud との連携機能を提供しています。今回は、この機能を利用して、Web サイトを Vercel に展開する手順を紹介します。
Vercel に XM Cloud のサイトを展開する
XM Cloud をこれまで紹介してきましたが、これまで CMS の環境を操作しているだけでした。実際に Web サイトとして公開をする際には、ヘッドレスとして実装しているので別のサービスと連携させる必要があります。今回は、Vercel にサイトを展開する手順を紹介します。
Previous
NextShowing 1 to 12 of 16 results