---
title: "フロントエンドアプリケーションをVercelにデプロイしてください"
slug: "deploy-your-front-end-application-to-vercel"
abstract: "ソース管理リポジトリにコード変更をプッシュする際に、Content SDK Next.jsアプリケーションを継続的にVercelにデプロイするように設定してください。"
---
# フロントエンドアプリケーションをVercelにデプロイしてください

VercelはGlobal Content Delivery Networks(CDN)を備えたオールインワンプラットフォームです。フロントエンドアプリケーションの展開と配信をサポートし、Next.jsへの一流のサポートも備えています。

Vercelで継続的デプロイ(CD)を設定し、ソース管理リポジトリにコード変更を公開するたびにContent SDK Next.jsアプリを再デプロイできます。この手順は、インスタンスとフロントエンドソリューションを含むプロジェクトリポジトリからNext.jsアプリケーションをデプロイすることを前提としています。

> !ヒントこの手順はVercelを例にしていますが、[Netlify](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/deploy-your-front-end-application-to-netlify.html)など他のプラットフォームを使ってNext.jsアプリケーションをホストすることも可能です。 [セルフホスト型のNode.jsサーバーやDockerイメージ](https://nextjs.org/docs/deployment#self-hosting)、または[Next.js展開をサポートするサービス](https://nextjs.org/docs/deployment#other-services)を使ってホストすることができます。

この手順は、コンテンツに変更を加えた際の自動再デプロイの実装方法を説明していません。Vercelが提供する推奨に従って、どのように実装するかはご自身で判断できます。

> !注**始める前に**
> 
> -   ログインしている[Vercel](https://vercel.com/)アカウントを持っていることを確認してください。
>     
> -   デプロイメント用のSITECORE\_EDGE\_CONTEXT\_IDとNEXT\_PUBLIC\_DEFAULT\_SITE\_NAMEの環境変数、その他関連する変数(カスタム変数も含む)を必ず用意してください。
>     
> -   ローカル開発環境でコードを変更した場合は、コミットしてコードをプッシュしてください。設定済みブランチに変更をプッシュする際に環境を再デプロイするように設定した場合は、再デプロイが完了するまで待ちましょう。
>     
> -   ローカル環境でコンテンツやレイアウトを変更した場合は、[Sitecore CLIを使って変更を公開し、コンテンツがEdge上にあるか確認](https://doc.sitecore.com/sai/ja/developers/sitecoreai/sitecore-command-line-interface/publish-and-validate-content-for-testing-purposes-using-the-sitecore-cli.html "Publish and validate content for testing purposes using the Sitecore CLI")してください。
>     
> -   [SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)のインスタンスでは、ウェブサイト上で公開したい変更をすべて公開します。
>     
> -   Next.jsアプリケーションで、変更をコミットしてソース管理リポジトリにプッシュしてください。
>     

フロントエンドアプリケーションをVercelにデプロイするには:

1.  Vercelダッシュボードで、ソリューションリポジトリをインポートして新しいプロジェクトを作成します。
    
2.  ここでプロジェクト **名**が登場します。
    
3.  **Rootディレクトリ**欄で、Next.jsアプリケーションのrootフォルダへのパスを入力します。StartのJSリポジトリにあるSkate Parkの例を使っており、パスはexamples/kit-nextjs-skate-park。
    
    > !重要Skate Parkのサンプルは、いくつかのコンポーネントが標準装備されている [ため、スターターリポジトリ](https://github.com/Sitecore/xmcloud-starter-js/) に配布しています。本格的なプロジェクトなら、examples/basic-nextjs (Next.jsプロジェクト)やexamples/basic-spa (Angularプロジェクト)など、空のプロジェクトから始めることが多いです。
    
4.  **環境変数**パネルを展開し、以下の変数を入力します:
    
    -   SITECORE\_EDGE\_CONTEXT\_ID - 統一 [コンテキストID](https://doc.sitecore.com/sai/ja/developers/sitecoreai/deploying-sitecoreai/deploy-app/manage-an-environment/context-id-environment-variables.html "Context ID environment variables")。すべてのコンテンツおよびレイアウトデータにはプレビューコンテキスト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です。
        
5.  **展開**をクリックします。ウェブサイトの展開プレビューを見ることができます。
    
6.  Vercelの展開プロセスが終了したら、Vercelがホストする展開アプリケーションが期待通りにレンダリングされているか確認してください。