1. JSS Next.jsアプリのデプロイ オプション

チュートリアル: JSS Next.jsアプリをVercelにデプロイする

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

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

Vercelは、静的アプリとJamstackアプリのデプロイと配信をサポートするグローバルコンテンツ配信ネットワーク(CDN)を備えたオールインワンプラットフォームです。Vercelは、Next.jsに対するファーストクラスのサポートを備えています。

このチュートリアルでは、JSS Next.jsアプリをVercelにデプロイし、パブリッシュされたSitecoreデータが変更されたときにアプリケーションが自動的に再デプロイされるように必要なWebhookを設定する方法を示します。

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

  • Next.js JSSアプリをVercelにデプロイします。

  • Webhookを構成して、更新されたコンテンツでアプリを再デプロイします。

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

Next.js JSSアプリをデプロイする前に、次のビデオを見てデプロイ プロセスを確認してください。

続行する前に、Next.js JSSアプリをセットアップし、Sitecoreインスタンスに接続する必要があります。

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

  1. デプロイ を開始する ためのNext.jsガイドに記載されている手順を実行します。

  2. Vercelに 環境変数 を追加するか、JSS Next.jsアプリのルート フォルダにある .envファイルを変更します。

    メモ

    環境変数はVercelで設定することをお勧めします。

    • PUBLIC_URL - VercelデプロイURL。

    • JSS_APP_NAME - Sitecoreサイト名の値。これは、package.jsonファイルに設定されている値を上書きします。この変数は、1つのJSSアプリを使用して複数のサイトをレンダリングする場合に指定します。

    • 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は必要ありません。

    • JSS_EDITING_SECRET - あなたの秘密のトークン。このJSS_EDITING_SECRETはデプロイではオプションですが、VercelにデプロイされたJSS Next.jsアプリでSitecoreエディターを使用する場合は 必要です。

    • GRAPH_QL_ENDPOINT- GraphQLエンドポイント。Sitecore Experience EdgeにはGRAPH_QL_ENDPOINTが必要です。Sitecore XMの場合、これは通常オプションです。デフォルトでは、エンドポイントは、解決されたSitecore APIホスト名とpackage.jsonファイルで定義されているconfig.graphQLEndpointPathオプションを使用して計算されます。

  3. 変更をGitプロバイダーにプッシュします。

更新されたコンテンツでアプリを再デプロイするように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に到達したときにVercelで新しいデプロイをトリガーするには:

  1. Vercelでデプロイフックを作成し、WebhookのURLをコピーします。

  2. 次の本文を使用して、Admin API Webhookエンドポイント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でデプロイフックを作成し、WebhookのURLをコピーします。

  2. 例の /App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.exampleに基づいてWebhook設定を作成し、ソリューションに含めます。

    • 必要なurlオプションをVercelデプロイ フックのURLに設定します。

    • methodオプションをPOSTまたはGETの値で定義します。この設定はオプションです。Webhookを呼び出すためのHTTPメソッドを設定します。

    • 公開の終了時にWebhookをトリガーするsiteを定義します。デフォルトでは、Sitecoreはパブリッシュされたすべてのアイテムに対してWebhookをトリガーします。 siteパラメーターを指定すると、公開済みアイテムのルートが先祖、子孫、または構成済みサイトのルートアイテムと等しい場合にWebhookが呼び出されます。

  3. Webhook設定をSitecoreインスタンスにデプロイします。

  4. アイテムを公開します。

  5. Vercelで、公開プロセスの終了によって新しいデプロイがトリガーされたことを確認します。

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