JSS Next.jsアプリのデプロイメントオプション

JSSアプリでVercelデプロイメント保護機能を活用してください

Version:

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

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

デプロイメント保護はVercelクラウドプラットフォームの機能で、開発者や編集者が自社のサイト展開へのアクセスを制限できます。

このトピックでは、JSSのバージョンに応じてデプロイメント保護の使い方について説明します:

21.2から21.5までのJSSバージョンでデプロイメント保護を使用してください

JSSのバージョン21.2から21.5でデプロイメント保護を使用するには:

例えば、src/tempフォルダに新しいファイルを作成します。例えばget-public-url.jsは以下の内容です。

const { getPublicUrl: defaultGetPublicUrl } = require('@sitecore-jss/sitecore-jss-nextjs');

const getPublicUrl = () => { return process.env.NODE_ENV !== 'production' ? defaultGetPublicUrl() : '';

}

module.exports = getPublicUrl;

!注JSS SDK 21.2以降を使用する場合は、@sitecore-jss/sitecore-jss-nextjs(非推奨)ではなく@sitecore-jss/sitecore-jss-nextjs/utilsからインポートまたはgetPublicUrl関数を要求してください。
アプリ内の静的アセットリンクを使用しているすべてのコンポーネントやファイルについて、getPublicUrlのインポートを ./temp/get-public-url.jsからのインポートに置き換えてください。例えば、foundation-headを使う場合は、既存のインポート/要求文を次のように置き換えます。
- next.config.jsファイルでは
  getPublicUrl = require('./src/temp/get-public-url');
- src/Layout.tsxファイルでは
  getPublicUrl from 'temp/get-public-url';
- src/Navigation.tsxファイルでは
  getPublicUrl from 'temp/get-public-url';
!注sitemap.tsファイルのインポート文を変更する必要はありません。
他のファイルやコンポーネントで静的アセットURLを使う場合は、インポート/要求の文getPublicUrlを ./temp/get-public-url.jsからのインポートに置き換えてください。

ローカルgetPublicUrl実装は必要に応じて変更可能です。この関数の主な目的は、Vercelデプロイメントで絶対リンクを相対的なURLに変換することです。

!重要Vercel Deployment Protectionは編集モードでは動作しません。Experience EditorやPagesをサイト設定で動作させる必要がある場合は、デフォルトのXM Cloud編集ホスト、自社の編集ホスト、またはデプロイメント保護されていないVercelデプロイメントのいずれかをご利用ください。

通常モードでプロテクションバイパストークンを使ってサイトにアクセスする場合、すべての静的資産を正しくレンダリングするためにx-vercel-protection-bypassとx-vercel-set-bypass-cookieヘッダー(またはクエリ文字列パラメータ)の両方を使う必要があります。

JSSバージョン21.6または21.7でデプロイメント保護を使用してください

JSSバージョン21.6または21.7でデプロイメント保護を使用するには:

アプリのscripts\config\plugins\fallback.tsファイルで、publicUrlの設定方法を変更してください。例えば:

const publicUrlFallback = (process.env.NODE_ENV !== 'production' ? getPublicUrl() : ''); return Object.assign({}, config, { publicUrl: config.publicUrl || publicUrlFallback, });

!重要もしDeployment Protection対応のVercel URLのいずれかを編集のレンダリングホストエンドポイントとして使用している場合、Sitecoreの編集ツールが保護バイパス付きのVercelデプロイメントを使えるようにするために、この手順の残りのステップを完了する必要があります。それ以外は、これ以上の変更は必要ありません。
VercelでProtection Bypassトークンを設定してください。
SXAを使うかローカルファイル編集を使ってサイト設定をするかによって、レンダリングホストの設定にバイパストークンを追加してください:

SXAサイト設定
1. SXAでは、/sitecore/system/Settings/Services/Rendering Hosts/にあるレンダリングホストの定義を開きます。例えば、定義がvercelの場合、/sitecore/system/Settings/Services/Rendering Hosts/vercelを開きます。
2. 以下のフィールドのURLにクエリ文字列パラメータx-vercel-protection-bypass=<bypass_token> を追加し、Vercelのバイパストークン値を含めるようにしてください。
  - Server side rendering engine endpoint URL
  - Server side rendering engine application URL
  - Server side rendering engine configuration URL
  以下の例はServer side rendering engine application URLの更新URLを示しています:
  
  https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>
設定ファイルサイト設定

アプリの設定ファイルを開き、アプリケーションのノードでクエリ文字列パラメータx-vercel-protection-bypass=<bypass_token> を以下の属性の値に追加し、Vercelのバイパストークン値も必ず含めてください。
- serverSideRenderingEngineEndpointUrl
- serverSideRenderingEngineApplicationUrl
以下の例はserverSideRenderingEngineApplicationUrlの更新URLを示しています:

https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>
自動生成URL以外の展開URLでVercel Deployment Protectionが有効で、そのURLをレンダリングホストエンドポイントとして使用している場合、Vercelで以下の手順を行ってください。
1. 環境変数 PUBLIC_URL 追加します。
2. 新しい変数の値は、レンダリングホストの設定で使われているプロトコルとホスト名(例: https://<vercel_deployment_url>)に設定してください。

!重要通常モードでプロテクションバイパストークンを使ってサイトにアクセスする場合、すべての静的資産を正しくレンダリングするために、x-vercel-protection-bypassとx-vercel-set-bypass-cookieヘッダーの両方を使うか、クエリ文字列パラメータを使う必要があります。

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