チュートリアル: NetlifyへのJSS Next.jsアプリのデプロイ

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Netlifyは、Webアプリケーションや動的Webサイト向けのバックエンドサービスの構築、デプロイ、およびサーバーレスバックエンドサービスを含む開発プラットフォームを提供するクラウドコンピューティング企業です。Netlifyは、Next.jsをファーストクラスでサポートしています。

このチュートリアルでは、次の方法について説明します。

Next.js JSSアプリをNetlifyにデプロイします。
公開されたSitecoreデータが変更されたときにアプリを自動的に再デプロイするようにWebhookを設定します。

メモ

この手順では、Next.js JSSアプリが既に設定され、Sitecoreインスタンスに接続されていることを前提としています。

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

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

Next.js JSSアプリケーションの変更をコミットしてGitHubリポジトリにプッシュします。
ブラウザで、https://app.netlify.com/startに移動します。Netlifyアカウントにログインするか、サインアップします。
Netlifyで、プロジェクトがホストされているGitプロバイダーを選択し、リポジトリを選択します。
Base directoryフィールドに、Next.jsアプリケーションのルートフォルダへのパスを入力します。
「 Add environment variables」をクリックし、次の変数を入力します。
- 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キー、またはSitecore Edge Deliveryを使用している場合はSitecore Experience Edge APIキーです。
- SITECORE_API_HOST - Sitecore APIホスト名。
  
  手記
  
  Sitecore Experience EdgeにはSITECORE_API_HOSTは必要ありません。
- 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サイト設定に追加することをお勧めします。
「 Deploy site」をクリックします。
Netlifyのデプロイプロセスが完了したら、Netlifyによってホストされているデプロイされたアプリケーションが期待どおりにレンダリングされることを確認します。

更新されたコンテンツでアプリを再デプロイするようにWebhookを構成する

Webhookを使用して、JSS Next.jsアプリの自動再デプロイをトリガーできます。Sitecore Experience Edge for XMを使用すると、新しいデータがEdge Delivery Platformに到達したときにJSSアプリを再デプロイするWebhookを構成できます。または、Sitecoreインスタンスの公開プロセスが完了したときにトリガーされるSitecore Webhookを有効にすることもできます。

Sitecore Experience Edge for XMでWebhookを使用する

Experience Edge for XMを使用すると、データがEdge Delivery Platformに到達したときに、静的サイト生成、キャッシュクリア、およびその他の自動アクティビティをトリガーできます。

Webhookの登録、更新、削除、または一覧表示は、Experience Edge Admin APIを使用して行います。

手記

管理APIを操作に使用する前に、認証トークンを取得する必要があります。

データがEdge Delivery Platformに到達したときにNetlifyで新しいデプロイをトリガーするには:

Netlifyでビルドフックを作成し、ビルドフックのURLをコピーします。

Send、次の本文を含む「 POST 」API Webhookエンドポイントhttps://edge.sitecoreclo"d.io/"pi"admin/v1/webho"kAdmin リクエストを送信します。

{
   "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"
  } 
}

要求が正常に完了したことを確認するには、201 Created応答状態コードを受け取ったことを確認します。
Sitecoreでいくつかの変更を加え、公開します。

Experience Edgeが新しいデータの処理を終了し、Netlifyが新しいデプロイメントを開始すると、公開プロセスは完了します。

Sitecore XM publish:end Webhookを有効にする

Sitecore XM publish:end Webhookを使用すると、公開プロセスがSitecoreで完了したときに、静的サイトの生成、キャッシュのクリア、およびその他の自動化されたアクティビティを自動的にトリガーできます。

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

Netlifyでビルドフックを作成し、ビルドフックのURLをコピーします。
例に基づいてWebhook設定を作成し、/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.exampleをソリューションに含めます。
- 必要なurlオプションをNetlifyデプロイフックのURLに設定します。
- methodオプションをPOSTまたはGETの値で定義します。このオプションの設定では、Webhookを呼び出すためのHTTPメソッドを指定します。
- 公開の終了時にWebhookをトリガーするsiteを定義します。デフォルトでは、Sitecoreはパブリッシュされたすべてのアイテムに対してWebhookをトリガーします。 siteパラメーターを指定すると、公開済みアイテムのルートが先祖、子孫、または構成済みサイトのルートアイテムと等しい場合にWebhookが呼び出されます。
Webhook設定をSitecoreインスタンスにデプロイします。
アイテムを公開します。
Netlifyで、公開プロセスの最後に新しいデプロイメントがトリガーされたことを確認します。

この記事を改善するための提案がある場合は、お知らせください!