フロントエンドアプリケーションをVercelにDeploy
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
VercelはGlobal Content Delivery Networks(CDN)を備えたオールインワンプラットフォームです。フロントエンドアプリケーションの展開と配信をサポートし、Next.jsへの一流のサポートも備えています。
Vercelで継続的デプロイ(CD)を設定し、ソース管理リポジトリにコード変更を公開するたびにContent SDK Next.jsアプリを再デプロイできます。この手順は、インスタンスとフロントエンドソリューションを含むプロジェクトリポジトリからNext.jsアプリケーションをデプロイすることを前提としています。
この手順はVercelを例にしていますが、Netlifyなど他のプラットフォームを使ってNext.jsアプリケーションをホストすることも可能です。 セルフホスト型のNode.jsサーバーやDockerイメージ、またはNext.js展開をサポートするサービスを使ってホストすることができます。
この手順は、コンテンツに変更を加えた際の自動再デプロイの実装方法を説明していません。 Vercelが提供する推奨に従って、どのように実装するかはご自身で判断できます。
-
ログインしているVercelアカウントを持っていることを確認してください。
-
デプロイメント用のSITECORE_EDGE_CONTEXT_IDとNEXT_PUBLIC_DEFAULT_SITE_NAMEの環境変数、その他関連する変数(カスタム変数も含む)を必ず用意してください。
-
ローカル開発環境でコードを変更した場合は、コミットしてコードをプッシュしてください。設定済みブランチに変更をプッシュする際に環境を再デプロイするように設定した場合は、再デプロイが完了するまで待ちましょう。
-
ローカル環境でコンテンツやレイアウトを変更した場合は、Sitecore CLIを使って変更を公開し、コンテンツがEdge上にあるか確認してください。
-
SitecoreAIの場合は、ウェブサイトに掲載したい変更をすべて公開してください。
-
Next.jsアプリケーションで、変更をコミットしてソース管理リポジトリにプッシュしてください。
フロントエンドアプリケーションをVercelにデプロイするには:
-
Vercelダッシュボードで、ソリューションリポジトリをインポートして新しいプロジェクトを作成します。
-
ここで登場するProject name。
-
Root directoryフィールドで、Next.jsアプリケーションのルートフォルダへのパスを入力します。私たちは、パスがexamples/kit-nextjs-skate-parkされているスターターJSリポジトリのSkate Parkの例を使用しています。
大事なSkate Parkのサンプルは、いくつかのコンポーネントが標準装備されている ため、スターターリポジトリ に配布しています。本格的なプロジェクトなら、examples/basic-nextjs (Next.jsプロジェクト)やexamples/basic-spa (Angularプロジェクト)など、空のプロジェクトから始めることが多いです。
-
Environment variablesパネルを展開し、以下の変数を入力してください:
-
SITECORE_EDGE_CONTEXT_ID - 統一 コンテキストID。すべてのコンテンツおよびレイアウトデータにはプレビューコンテキストIDを使用し、公開データにはライブコンテキストIDを使用します。
-
NEXT_PUBLIC_DEFAULT_SITE_NAME - サイトの名前。
-
.envファイルに追加したカスタム環境変数を含め、他の環境変数(SITECORE_EDGE_URL、NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID、SITECORE_EDITING_SECRET)を追加してください。Vercelは、すべての環境変数をVercelサイト構成に追加することを推奨しています。
注記Personalizeや他のSitecore製品統合のために環境変数を設定する必要はありません。これらはSitecoreコンテキストに含まれ、アプリケーションや統合に自動的に提供されます。例外はSitecore Searchです。
-
-
クリックDeploy。ウェブサイトの展開プレビューを見ることができます。
-
Vercelの展開プロセスが終了したら、Vercelがホストする展開アプリケーションが期待通りにレンダリングされているか確認してください。