1. フロントエンドホスティングアプリケーション

フロントエンドアプリケーションをNetlifyにDeployしてください

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

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

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

Netlifyで継続的デプロイ(CD)を設定し、ソース管理リポジトリにコード変更を公開するたびにContent SDK Next.jsアプリを再デプロイできます。この手順は、インスタンスとフロントエンドソリューションを含むプロジェクトリポジトリからNext.jsアプリケーションをデプロイすることを前提としています。

この手順は、SitecoreAIコンテンツの変更時に自動再デプロイを実装する方法を説明していません。Netlifyの推奨に従って、どのように実装するのが最適かはご自身で判断できます。

始める前に

  • ログインしているNetlifyアカウントを持っていることを確認してください。

  • デプロイメント用のSITECORE_EDGE_CONTEXT_IDとNEXT_PUBLIC_DEFAULT_SITE_NAMEの環境変数、その他関連する変数(カスタム変数も含む)を必ず用意してください。

  • ローカル開発環境でコードを変更した場合は、コミットしてコードをプッシュしてください。設定済みブランチに変更をプッシュする際に環境を再デプロイするように設定した場合は、再デプロイが完了するまで待ちましょう。

  • ローカル環境でコンテンツやレイアウトを変更した場合は、Sitecore CLIを使って変更を公開し、コンテンツがEdge上にあるか確認してください。

  • SitecoreAIの場合は、ウェブサイト上で提供したい変更をすべて公開してください。

  • Next.jsアプリケーションで、変更をコミットしてソース管理リポジトリにプッシュしてください。

フロントエンドアプリケーションをNetlifyにデプロイするには:

  1. Netlifyアカウントでは 、既存のリポジトリを基に新しいサイトを追加するためのNetlifyのドキュメントに従ってください。デフォルトのブランチからアプリケーションを展開したくない場合は別のブランチを選んでください。

  2. Build settingsセクションのBase directoryフィールドで、Next.jsアプリケーションのルートフォルダへのパスを入力します。私たちは、パスがexamples/kit-nextjs-skate-parkされているスターターJSリポジトリのSkate Parkの例を使用しています。

    Netlifyはベースのディレクトリに基づいて追加のフィールドを埋めようとします。自動補完値が以下の通りであることを確認してください:

    • ディレクトリ公開: examples/kit-nextjs-skate-park/.next。

    • Functionsディレクトリ: examples/kit-nextjs-skate-park/netlify/functions.もし別のディレクトリでカスタムサーバーレス関数を作成しているなら、そのディレクトリをここで指定してください。

    • ビルドコマンド: npm run build。

    詳細については、Netlify Buildの設定ドキュメントをご覧ください。

    大事な

    Skate Parkのサンプルは、いくつかのコンポーネントが標準装備されているため、スターターリポジトリに配布しています。本格的なプロジェクトなら、examples/basic-nextjs (Next.jsプロジェクト)やexamples/basic-spa (Angularプロジェクト)のような空のプロジェクトから始めることが多いです。

  3. Add environment variablesをクリックして、以下の変数を入力してください:

    • SITECORE_EDGE_CONTEXT_ID - 統一 コンテキストID。すべてのコンテンツおよびレイアウトデータにはプレビューコンテキストIDを使用し、公開データにはライブコンテキストIDを使用します。

    • NEXT_PUBLIC_DEFAULT_SITE_NAME - サイトの名前。

    • .envファイルに追加したカスタム環境変数を含め、他の環境変数(SITECORE_EDGE_URL、NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID、SITECORE_EDITING_SECRET)を追加してください。Netlifyはすべての環境変数をNetlifyサイト設定に追加することを推奨しています。

      注記

      Personalizeや他のSitecore製品統合のために環境変数を設定する必要はありません。これらはSitecoreコンテキストに含まれ、アプリケーションや統合に自動的に提供されます。例外はSitecore Searchです。

  4. クリックDeploy site。

  5. Netlifyの展開プロセスが完了したら、Netlifyがホストするデプロイ済みアプリケーションが期待通りにレンダリングされているか確認してください。

CDセットアップのトラブルシューティング

展開プロセスの最後に、Netlifyがサイトが正常に構築・展開されたと報告しても、予想されたページではなくNetlify 404エラーページが表示されることがあります。

最も可能性が高い理由は、Next.js Content SDKアプリのプロジェクトリポジトリ内にあるネストされた場所のため、NetlifyがアプリケーションがNext.jsアプリケーションであることを検出できず、正しい実行時間を設定できなかったことです。

Netlifyでサイトを作成した後:

  1. Netlifyのダッシュボードで、サイトの設定エリアに移動します。

  2. Build & DeployセクションのBuild settingsで、Configureをクリックしてください。

  3. Runtime設定を見つけてNext.jsを選択します。

  4. サイトを再展開してください。

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