---
title: "ウォークスルー:JSS Next.jsアプリをVercelにデプロイする方法"
slug: "walkthrough--deploying-jss-next-js-apps-to-vercel"
abstract: "JSS Next.jsアプリをVercelにデプロイし、ウェブフックを自動再デプロイできるように設定してください"
---
# ウォークスルー:JSS Next.jsアプリをVercelにデプロイする方法

Vercelは、静的および[Jamstack](https://jamstack.org/)アプリの展開と配信をサポートするグローバルなコンテンツ配信ネットワーク(CDN)を備えたオールインワンプラットフォームです。VercelはNext.jsに対する一流のサポートも備えています。

このウォークスルーでは、JSS Next.jsアプリをVercelにデプロイし、公開されたSitecoreデータが変更された際にアプリケーションが自動的に再デプロイされるよう必要なウェブフックを設定しています。

このウォークスルーでは、以下の方法を説明します:

-   VercelにNext.js JSSアプリを展開します。
-   ウェブフックを設定して、更新されたコンテンツでアプリを再デプロイします。

## Next.js JSSアプリをVercelにデプロイしてください

Next.js JSSアプリを展開する前に、以下の動画を見て展開プロセスをご覧ください:

:::youtube{id="s\_F5hoNsvOo"}

先に進む前に、Next.js JSSアプリを設定して[Sitecoreインスタンスに接続](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore")しておく必要があります。

アプリを本番環境にデプロイするには:

1.  展開を [始める](https://nextjs.org/docs/deployment#getting-started) には、Next.jsガイドに記載されている手順を実行してください。
    
2.  [環境変数](https://nextjs.org/docs/basic-features/environment-variables#environment-variables-on-vercel)を追加してVercelしたり、JSS Next.jsアプリのルートフォルダにある.envファイルを修正したりします:
    
    > !注環境変数はVercelで設定することをおすすめします。
    
    -   PUBLIC\_URL - あなたのVercelデプロイメントURLです。
        
    -   JSS\_APP\_NAME - Sitecoreサイト名の値。 package.jsonファイルで設定された値を上書きします。複数のサイトをレンダリングするために単一のJSSアプリを使用する場合は、この変数を指定してください。
        
    -   SITECORE\_API\_KEY - Sitecore APIキー。Sitecore XMの場合、SITECORE\_API\_KEYは[Sitecore SSC APIキー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-a-sitecore-services-client-api-key.html "Create a Sitecore services client API key") 、またはEdge Deliveryを使う場合は[Sitecore Experience Edge APIキー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-the-api-key.html "Create the API key") Sitecore。
        
    -   SITECORE\_API\_HOST - あなたのSitecore APIホストネームです。
        
        > !注SITECORE\_API\_HOSTはSitecore Experience Edgeに必須ではありません。
        
    -   JSS\_EDITING\_SECRET - シークレットトークン。 JSS\_EDITING\_SECRETはデプロイ時は任意ですが、JSS Next.jsアプリをVercelにデプロイしたときに[Sitecoreエディタを使い](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html "Walkthrough: Connecting a Next.js JSS app to Sitecore editors") たい場合は必要です。
        
    -   GRAPH\_QL\_ENDPOINT\- GraphQLエンドポイント。Sitecore Experience EdgeにはGRAPH\_QL\_ENDPOINTが必要です。Sitecore XMの場合、これは通常任意です。デフォルトでは、エンドポイントは解決されたSitecore APIホスト名とpackage.jsonファイルで定義されたconfig.graphQLEndpointPathオプションを使って計算されます。
        
3.  変更をGitプロバイダーにプッシュしてください。
    

## Webhookを設定して、更新されたコンテンツでアプリを再デプロイします

ウェブフックを使って、JSS Next.jsアプリの自動再展開をトリガーできます。Sitecore Experience Edge for XMを使う際は、新しいデータがエッジデリバリープラットフォームに届いた際にJSSアプリを再デプロイするウェブフックを設定することができます。あるいは、Sitecoreインスタンスの公開プロセスが完了したときにトリガーされるSitecoreウェブフックを有効にすることもできます。

### WebhookをSitecore Experience Edge for XMと組み合わせてください

Experience Edge for XMを使用すると、データがEdge Delivery Platformに届く際に静的サイト生成、キャッシュクリア、その他の自動化作業をトリガーできます。

Webhookの登録、更新、削除、リストは[Experience Edge Admin API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/admin-api.html "Admin API")を使って行います。

> !注Admin APIを操作に使用する前に、[認証トークンを取得する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/request-a-jwt-for-experience-edge-xm-using-oauth.html "Request a JWT for Experience Edge XM using OAuth")必要があります。

データがEdge Delivery Platformに届いた際にVercelで新しい展開を起動するには:

1.  [Vercelでデプロイフックを作成し、そのウェブフックのURLをコピーします。](https://vercel.com/docs/more/deploy-hooks#creating-a-deploy-hook)
    
2.  Send、以下の本文で管理者APIウェブフックエンドポイントhttps://edge.sitecorecloud.io/api/admin/v1/webhookへのPOSTリクエストを送ります。
    
    {
     "label": "My new webhook",
     "createdBy": "SOME\_USER\_ID",
     "uri": "YOUR\_VERCEL\_WEBHOOK\_URL",
     "method": "GET"
    }
    
3.  リクエストが正常に完了したことを確認するには、201 Created応答ステータスコードを受け取ったか確認してください。
    
4.  Sitecoreでいくつかの変更を加えて公開してください。
    

公開プロセスは、Experience Edgeが新しいデータの処理を終え、Vercelが新しいデプロイを開始するときに完了します。

### Sitecore XMのpublish:end webhookを有効にしてください

Sitecore XM publish:end webhookを使えば、Sitecore年に公開プロセスが完了した際に、静的サイト生成、キャッシュクリア、その他の自動化された操作を自動的にトリガーできます。

Publish:endフックを有効にするには:

1.  [Vercelでデプロイフックを作成し、そのウェブフックのURLをコピーします。](https://vercel.com/docs/more/deploy-hooks#creating-a-deploy-hook)
2.  例 /App\_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.exampleに基づいてウェブフック構成を作成し、それを解決策に組み込みます:
    -   必要な url オプションをVercelデプロイフックのURLに設定してください。
    -   methodオプションをPOSTまたはGETの数値で定義します。この構成は任意です。ウェブフックを呼び出すHTTPメソッドを設定します。
    -   公開が確定した際にウェブフックをトリガーする site を定義してください。デフォルトでは、Sitecore公開されたすべてのアイテムに対してウェブフックをトリガーします。 site パラメータを指定すると、公開されたアイテムのルートが祖先、子孫、または設定されたサイトのルート項目と同等であれば、ウェブフックが呼び出されます。
3.  Webhookの設定をSitecoreインスタンスに展開してください。
4.  記事を公開しましょう。
5.  Vercelで、公開プロセスの終了時に新しいデプロイメントがトリガーされているか確認してください。