---
title: "攻略:JSS Next.jsアプリをNetlifyにデプロイする方法"
slug: "walkthrough--deploying-jss-next-js-apps-to-netlify"
abstract: "JSS Next.jsアプリをNetlifyにデプロイし、ウェブフックを設定して自動再展開します。"
---
# 攻略:JSS Next.jsアプリをNetlifyにデプロイする方法

Netlifyはクラウドコンピューティング企業であり、ウェブアプリケーションや動的ウェブサイト向けのサーバーレスバックエンドサービスの構築、展開、サービスを含む開発プラットフォームを提供しています。NetlifyはNext.jsに対する一流のサポートを備えています。

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

-   NetlifyにNext.js JSSアプリをデプロイしてください。
-   公開されたSitecoreデータの変更時に自動的にアプリを再デプロイできるようWebhookを設定してください。

> !注この手順は、すでにNext.js JSSアプリが[Sitecoreインスタンス](https://doc.sitecore.com/xp/ja/developers/hd/21/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")に設定・接続されていることを前提としています。

## NetlifyにNext.js JSSアプリをデプロイする

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

1.  Next.js JSSアプリケーションの変更をコミットし、GitHubリポジトリにプッシュしてください。
2.  ブラウザで [https://app.netlify.com/start](https://app.netlify.com/start) に移動します。Netlifyアカウントにログインするか登録してください。
3.  Netlifyで、プロジェクトがホストされているGitプロバイダーを選択し、リポジトリを選択します。
4.  **Baseディレクトリ**欄で、Next.jsアプリケーションのルートフォルダへのパスを入力します。
5.  「 **環境変数を追加**」をクリックし、以下の変数を入力します:
    -   SITECORE\_SITE\_NAME (JSS 21.6.0以降の場合)またはJSS\_APP\_NAME(古いJSSバージョンの場合)- あなたのSitecoreサイトの名前です。これはconfig.appNameプロパティのpackage.jsonファイルに設定された値を上書きします。そのファイルには必ずしもあなたのサイト名が含まれていません。
        
    -   SITECORE\_API\_KEY - Sitecore APIキー。Sitecore XMの場合、SITECORE\_API\_KEYは[Sitecore SSC APIキー](https://doc.sitecore.com/xp/ja/developers/hd/21/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/21/sitecore-headless-development/create-the-api-key.html "Create the API key") Sitecore。
        
    -   SITECORE\_API\_HOST - あなたのSitecore APIホストネームです。
        
        > !注SITECORE\_API\_HOSTはSitecore Experience Edgeに必須ではありません。
        
    -   GRAPH\_QL\_ENDPOINT\- GraphQLエンドポイント。Sitecore Experience EdgeにはGRAPH\_QL\_ENDPOINTが必要です。Sitecore XMの場合、これは通常任意です。デフォルトでは、エンドポイントは解決されたSitecore APIホスト名とpackage.jsonファイルで定義されたconfig.graphQLEndpointPathオプションを使って計算されます。
        
    -   FETCH\_WITH - アプリケーションのデータ取得アプローチ。 GRAPHQLまたはRESTに設定されます。これはあなたのソリューションのenv. ファイルの値と一致しなければなりません。
        
    -   PUBLIC\_URL - Netlifyが提供するサイトURL(例: https://<SITE\_NAME>.netlify.app>)。
        
        > !重要これは、アプリケーションが21.3.0以前のJSSバージョンを使用している場合に必須です。
        
    -   .envファイルに追加した他のカスタム環境変数。Netlifyはすべての環境変数をNetlifyサイトの設定に追加することを推奨しています。
        
6.  **「Deploy site**」をクリックします。
7.  Netlifyの展開プロセスが完了したら、Netlifyがホストするデプロイ済みアプリケーションが期待通りにレンダリングされているか確認してください。

## 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/21/sitecore-headless-development/admin-api.html "Admin API")を使って行います。

> !注Admin APIを操作に使用する前に、[認証トークンを取得する](https://doc.sitecore.com/xp/ja/developers/hd/21/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に到達した際にNetlifyで新しい展開を起動するには:

1.  [Netlifyでビルドフックを作成し、そのURLをコピーします。](https://docs.netlify.com/configure-builds/build-hooks/)
    
2.  Send管理者APIウェブフックエンドポイントへのPOSTリクエストを次の「he」とhttps://edge.sitecoreclo"d.io/"pi"admin/v1/webho"kします:
    
    {
     "label": "My"new we"ho"k",
    "  "ur"": "<yo"r-netlify"build-hook-ur">""
       "method": "POST",
       "headers":"{
         "Authorizatio"":""Bearer: <edge-a"thentication-token>",
         "Content-Type": "application/json"
     } 
    }
    
3.  リクエストが成功裏に完了したことを確認するには、201 Created応答ステータスコードを受け取ったか確認してください。
    
4.  Sitecoreでいくつかの変更を加えて公開してください。
    

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

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

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

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

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