攻略 Next.jsアプリをNetlifyにデプロイする方法
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Netlifyはクラウドコンピューティング企業であり、ウェブアプリケーションや動的ウェブサイト向けのサーバーレスバックエンドサービスの構築、展開、サービスを含む開発プラットフォームを提供しています。NetlifyはNext.jsに対する一流のサポートを備えています。
このウォークスルーでは、以下の方法を説明します:
- NetlifyにNext.js JSSアプリをデプロイしてください。
- 公開されたSitecoreデータの変更時に自動的にアプリを再デプロイできるようWebhookを設定してください。
!注この手順は、すでにNext.js JSSアプリがSitecoreインスタンスに設定・接続されていることを前提としています。
NetlifyにNext.js JSSアプリをデプロイする
アプリを本番環境にデプロイするには:
- Next.js JSSアプリケーションの変更をコミットし、GitHubリポジトリにプッシュしてください。
- ブラウザで https://app.netlify.com/start に移動します。Netlifyアカウントにログインするか登録してください。
- Netlifyで、プロジェクトがホストされているGitプロバイダーを選択し、リポジトリを選択します。
- Baseディレクトリ欄で、Next.jsアプリケーションのルートフォルダへのパスを入力します。
- 「 環境変数を追加」をクリックし、以下の変数を入力します:
-
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キー 、またはEdge Deliveryを使う場合はSitecore Experience Edge APIキー 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サイトの設定に追加することを推奨しています。
-
- 「Deploy site」をクリックします。
- 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を使って行います。
!注Admin APIを操作に使用する前に、認証トークンを取得する必要があります。
あなたのデータがEdge Delivery Platformに到達した際にNetlifyで新しい展開を起動するには:
-
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" } }
-
リクエストが成功裏に完了したことを確認するには、201 Created応答ステータスコードを受け取ったか確認してください。
-
Sitecoreでいくつかの変更を加えて公開してください。
公開プロセスは、Experience Edgeが新しいデータの処理を終え、Netlifyが新しい展開を開始するときに完了します。
Sitecore XMのpublish webhookを有効にしてください
Sitecore XM publish
webhookを使えば、Sitecore年に公開プロセスが完了した際に、静的サイト生成、キャッシュクリア、その他の自動化された操作を自動的にトリガーできます。Publish:endフックを有効にするには:
- Netlifyでビルドフックを作成し、そのURLをコピーします。
- 例 /App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.exampleに基づいてウェブフック構成を作成し、それを解決策に組み込みます:
- NetlifyデプロイフックのURLに必要な url オプションを設定してください。
- methodオプションをPOSTまたはGETの数値で定義します。この任意の設定は、ウェブフックを呼び出すHTTPメソッドを指定します。
- 公開が確定した際にウェブフックをトリガーする site を定義してください。デフォルトでは、Sitecore公開されたすべてのアイテムに対してウェブフックをトリガーします。 site パラメータを指定すると、公開されたアイテムのルートが祖先、子孫、または設定されたサイトのルート項目と同等であれば、ウェブフックが呼び出されます。
- Webhookの設定をSitecoreインスタンスに展開してください。
- 記事を公開しましょう。
- Netlifyで、公開プロセスの終了時に新しいデプロイメントがトリガーされたか確認してください。