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。

    • SITECORE_SITE_NAME(JSS 21.6.0以降の場合) またはJSS_APP_NAME(古いJSSバージョンの場合) - Sitecoreサイト名の値。これは、config.appNameプロパティのpackage.jsonファイルに設定されている値を上書きします。これには、サイト名が常に含まれているとは限りません。デプロイメントを使用して1つのサイトをレンダリングする場合は、この変数を指定します。

    • 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要求Sendします。

    {
    "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. 例に基づいてWebhook設定を作成し、/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.exampleをソリューションに含めます。

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

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

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

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

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

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

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