JSS Next.jsアプリのトラブルシューティング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSアプリケーションのデバッグに役立つように、JSSが提供するデバッグ・ロギング・ユーティリティーを使用することをお勧めします。
ほとんどのエラーは、次の手順で防ぐことができます。
-
アプリで使用されるすべての環境変数に値があることを確認します。サンプル アプリでは、次の順序で環境変数が検索されます。
-
scjssconfig.json.
-
.env.
-
.env.local (ローカル環境のみ)。
-
-
複数のファイルに同じ変数の定義が含まれている場合、アプリケーションは最後に検出した値を使用します。
変数の名前と説明については、サンプル .envファイルを参照してください。
-
APIキーが正しく設定されていることを確認します。
-
プロジェクトのサイト定義とアプリ定義がSitecore設定で正しいことを確認します。必要なプロパティのリストについては、Sitecoreアプリの設定 を参照してください。
-
JSS編集シークレットが設定されていることを確認します。Next.jsアプリで使用されるJSS_EDITING_SECRET値は、Sitecoreインスタンスで使用される値と一致する必要があります。
-
GraphQLエンドポイントがpackage.jsonとSitecoreアプリの設定で正しいことを確認します。ブラウザでGraphQL IDEを開き、設定の値 (<sitecore hostname + graphQL endpoint>/ui?sc_apikey=<api key>) を使用して、エンドポイントが機能していることを確認します。
サーバーサイドのJavaScriptエラー
npm installまたはbuildのステップで予期しないJavaScriptエラー、特に他のチームメンバーが再現できないエラーが発生した場合は、使用されているNodeとnpmのバージョンを確認してください。ターミナルから、次のコマンドを実行します。
node -v
npm -vJSSはLong Term Support (LTS) versions of Nodeを使用してテストします。これらは通常、最新の公式Nodeバージョンより1つのメジャー バージョンです。
CI/本番環境で使用されるNode/npmのバージョンは、ローカル環境で使用されるバージョンとは異なる場合があります。プロジェクト構成で特定のNode/npmバージョンがpackage.jsonで必要ない場合、デプロイ エージェントは通常、使用可能な最新バージョンまたは環境固有のデフォルト バージョンを使用してビルドされます。
テストのためにローカル環境上の複数のノードバージョンを切り替える必要がある場合は、nやnvmなどのサードパーティパッケージを使用できます。
SSL証明書に関するエラー
プライベート署名証明書を使用してローカルのSitecoreインスタンスを使用している場合、次のエラーが発生する可能性があります。
Error: unable to verify the first certificate
Error: UNABLE TO VERIFY LEAF SIGNATURE
UnauthorizedError: invalid signatureこのエラーを解決するには、Sitecore CA証明書をNode.jsに設定します。
JSSアプリケーションをローカルにデプロイする際のエラー
インポートロールに適切なアクセス許可がない場合、次のエラーが発生する可能性があります。
IMPORT ERROR(S) OCCURRED!
Exception thrown while importing JSS app
Exception: Sitecore.Exceptions.AccessDeniedException
Message: AddFromTemplate - Add access required解決策については、「 AzureでJSSアプリケーションをインポートする際のエラー 」を参照してください。
データ取得の問題
JSS Next.jsアプリの構築とレンダリングは、GraphQLを使用してデータを正常にフェッチできるかどうかにかかっています。ビルドの失敗や、ページをレンダリングできないアプリの最も一般的な原因は、データ取得プロセスの問題です。
GraphQL IDEを <sitecore hostname + graphQL endpoint>/ui?sc_apikey=<api key> 使用して、データ取得プロセスの問題を診断できます。
静的生成機能をサポートするために、Next.js JSSアプリはGraphQLクエリを使用してSitecoreパスを取得します。GraphQL IDEで次のクエリを実行してみてください。
# YOUR_PATH should be the ID of your site root (home page) in lower-case, with dashes removed.
# YOUR_LANGUAGE should be your default language, as defined in package.json
query{
search(where: {
AND:[
{
name:"_path",
value:"YOUR_PATH"
},
{
name:"_language",
value:"YOUR_LANGUAGE"
},
{
name:"_hasLayout",
value :"true"
}
]
})
{
total
results {
url {
path
}
}
}"
}期待どおりの結果が得られない場合は、次の手順を試してください。
-
Sitecore Control Panelで、Populate Solr Managed Schemaを使用してSolrスキーマを設定します。
-
Sitecore Control Panelでは、Indexing Managerを使用してインデックスを再構築します。
-
コンテンツアイテムに、クエリする言語のバージョンがあることを確認します。
Sitecoreでアイテムを編集しようとするとエラーが発生する
Sitecoreエディター ロールで新しいユーザーを作成した後、SitecoreでJSSアプリ アイテムを編集しようとすると、ユーザーに読み取りアクセス権がないという警告が表示される場合があります。
回避策は、System/Workflows/JSS development workflow項目のWorkflow State Writeを手動で設定し、最終的な発行済み状態を編集可能にすることです。これにより、ユーザーはLock and Editオプションを使用して編集用のアイテムの新しいバージョンを作成できます。
エクスペリエンス エディターでのレンダリング ホストのタイムアウトの問題
HTTPレンダリングエンジンを使用するように設定されたJSSアプリ (Next.jsアプリなど) をエクスペリエンスエディターで初めて開くと、レンダリングホストから 「 The operation has timed out」というメッセージでタイムアウトエラーが発生することがあります。ログには、次の情報が表示されます。
10292 10:51:16 ERROR [JSS] Error occurred during POST to remote rendering host: `http://localhost:3000/api/editing/render`
10292 10:51:16 ERROR The operation has timed out
Exception: System.Net.WebException
Message: The operation has timed out
Source: System
at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request)
at System.Net.WebClient.UploadString(Uri address, String method, String data)
at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)この問題を解決するには、\App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.configファイルを編集して、RequestTimeoutMs設定の値を増やします。例えば：
<!-- Specifies the maximum duration, in milliseconds, that your .NET code should wait for requests to the HTTP renderer (for example, the `EndpointUrl` setting) to respond. -->
<RequestTimeoutMs>10000</RequestTimeoutMs>ペイロード サイズが原因でレンダリング ホストへの接続に失敗しました
ペイロードをExperience Edgeに送信するときに (413) Payload Too Largeエラーが表示された場合は、アプリのsizeLimitプロパティ (サンプルNext.jsアプリでは既定で2 MBに設定されている) を増やすことをお勧めします。
この変更は、次のファイルで行う必要があります。
-
\src\pages\api\editing\render.ts
-
\src\pages\api\editing\key.ts
次の例は、ペイロード サイズの制限を5 MBに増やした後のrender.tsの関連部分を表しています。
...
export const config = {
api: {
bodyParser: {
sizeLimit: "5mb",
},
responseLimit: false,
},
};
...SitecoreインスタンスとSXAを使用してNext.jsアプリを起動しようとするとGraphQLクエリ エラーが発生する
SXAがヘッドレス サイトのSXAコレクションと統合されており、Next.jsアイテムをデプロイする場合、Next.jsアプリをプロダクション モードで起動しようとすると、GraphQLクエリ エラーが発生する可能性があります。
Error: Valid value for rootItemId not provided and failed to auto-resolve app root item.
このエラーは、ヘッドレス サイトのSXAコレクションにデプロイされたNext.jsアプリとNext.jsアプリのアイテムが異なるテンプレートを参照し、クエリが失敗するために発生します。
このエラーを回避するには、GraphQLサービスのインスタンスのrootItemIdを次のように定義します。
-
/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts.
-
/src/lib/dictionary-service-factory.ts.
GraphQLイントロスペクションデータを生成する際のエラー
GraphQLスキーマが変更された場合は、GraphQLイントロスペクション データを再生成する必要があります。
サンプル アプリでは、jss graphql:updateコマンドを使用してイントロスペクション データを再生成します。
このコマンドによって内部的に呼び出されるスクリプトは、scjssconfig.jsonファイルが取り込まれていることに依存します。ファイルを生成するには、JSSアプリをSitecoreに接続する必要があります。
VercelがローカルのSitecore環境からのデータを表示できない
ngrokを使用してローカルSitecoreエンドポイントをVercelに公開している場合は、host-headerフラグを使用していることを確認してください。例えば
ngrok http -host-header=rewrite <your-local-url>Sitecoreイメージがlocalhostに読み込まれない
アプリケーションにlocalhostドメインを使用しているときにSitecoreイメージが読み込まれない場合は、Next.jsプロキシ経由でイメージを要求しようとしているため、エラー 500 - Invalid URI: The hostname could not be parsedが発生している可能性があります。
Sitecoreイメージをlocalhostドメインにロードするには、コンテンツ リゾルバーのIncludeServerUrlInMediaUrls属性をtrueに設定して、イメージURLにSitecore URLを含める必要があります。例えば：
<config name="jss">
<rendering>
<renderingContentsResolver>
<IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>
</renderingContentsResolver>
</rendering>
</config>この設定を行うと、アプリケーションはSitecoreから直接イメージを要求します。
実稼働環境では、IncludeServerUrlInMediaUrls属性の値をfalseに変更する必要があります。
Experience Editorの統合がプロトコルの不一致エラーのために中断する
Vercel以外のプラットフォームでNext.jsアプリケーションをホストしているときに、プロトコルの不一致エラーが原因でエクスペリエンスエディターとの統合が機能しなくなった場合は、EditingRenderMiddlewareを使用してデフォルトのプロトコルを上書きします。
Experience Editorでのデータ キャッシュ ミスと断続的な500エラーの編集
Vercel以外のプラットフォームでNext.jsアプリケーションをホストしている場合、Node.js環境でキャッシュ ミス エラーが表示される場合があります。例えば：
2022-10-12 16:27:42: Error: Unable to get editing data for preview {"key":"0518d8c6-b7ca-4c73-86c2-a29d971ebeab-2xqnbg0jpx","serverUrl":"https://your-url.com"}
at SitecorePagePropsFactory.createPreviewModePage (/opt/web/.next/server/chunks/9694.js:1190:17)
at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async SitecorePagePropsFactory.create (/opt/web/.next/server/chunks/9694.js:1174:14)
at async getServerSideProps (/opt/web/.next/server/pages/[[...path]].js:1952:17)
at async Object.renderToHTML (/opt/web/.next/node_modules/next/dist/server/render.js:555:20)
at async doRender (/opt/web/.next/node_modules/next/dist/server/base-server.js:1406:38)
at async /opt/web/.next/node_modules/next/dist/server/base-server.js:1501:28
at async /opt/web/.next/node_modules/next/dist/server/response-cache.js:63:36この問題により、Content Managementインスタンスで次のような500エラーが発生します。
3112 16:27:42 ERROR The remote server returned an error: (500) Internal Server Error.
Exception: System.Net.WebException
Message: The remote server returned an error: (500) Internal Server Error.
Source: System
at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request)
at System.Net.WebClient.UploadString(Uri address, String method, String data)
at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)このようなエラーは、編集データキャッシュで使用される一時ディレクトリが不安定であることが原因です。エラーを解決するには、ディスクベースの編集キャッシュ実装で使用されるデフォルトディレクトリを上書きします。