Next.jsマルチサイトアドオンのトラブルシューティング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このトピックでは、Next.jsマルチサイトアドオンに関する一般的な問題について説明し、可能な解決策を説明します。
サイト解決のデバッグ
特定のドメインで解決されたサイトが期待通りでない場合は、JSSデバッグツールを使ってトラブルシューティングが可能です。
マルチサイトアドオンのデバッグを有効にするには:
- マルチサイト用の デバッグログ をオンにして、 sitecore-jss 名前空間を有効にしてください。
- 必要に応じて、 DEBUG_DEPTH 環境変数を使ってデバッグの深さを増やしてください。
デバッグログが有効になっていると、アプリのブートストラップフェーズで取得されたサイト情報をSitecore確認できます。 SiteResolverはこの情報を使ってホスト名に基づいてサイトを特定します。
また、各リクエストMultisiteMiddleware解決済みサイト名を含む詳細な情報を示すデバッグトレースログも確認できます。
Vercel以外のホスティングサービス向けにNext.jsアセットのCORSエラーを解決する
Vercel以外のホスティングサービスを利用すると、Next.jsアセットリクエスト(
Next.jsアセットのCORSエラーを解決するには:
- PUBLIC_URL環境変数を設定しているか確認してください。この変数はSitecoreエディターとの統合に必要です(これがなければ、Pages/Experience Editorで相対Next.jsアセットリクエストが失敗します)。
- マルチサイト構成で使用されているすべてのドメインが、 PUBLIC_URL 変数に使われるドメインにアクセスできるようにしましょう。例えば、 Access-Control-Allow-Origin ヘッダーを使って。
!注この問題はVercel上でデプロイされたアプリケーションには影響しません。なぜならVercelデプロイメントではVERCEL_URL環境変数がパブリックURLとして使われているからです。 VERCEL_URLはデプロイ時に生成され、すべてのオリジンがアクセス可能です。
ホストドメイン名が欠落していることによるCORSの問題を解決してください
ドメイン名がCORSヘッダー設定に欠落している場合、CMホスト上でクロスオリジンリソースシェアリング(CORS)エラーが発生することがあります。この問題を軽減するために、sitecoreApiHostのヘッダーが欠落すると追加する新しいcors-header.jsプラグインを導入しました。
このプラグインはまた、SitecoreAIでリモートソースの異なるフォントを使おうとした際に発生する可能性のあるCORSの問題も修正できます。
Vercelでアプリをホスティングする際の不正エラーを解決する
Vercel新しいプロジェクトではデフォルトでデプロイメント保護を有効にします。SitecoreAI環境がデプロイメント保護に対応していなければ、VERCEL_URLを使って静的資産にアクセスする際にアプリで401 unauthorizedエラーが発生する可能性があります。
このエラーを解決するには、アプリをデプロイメント保護で動作させる か、デプロイ メント保護を無効にしてください。