JSSアプリをJSS 22.4にアップグレードする

Version:

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

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

Sitecore JavaScriptレンダリングSDKバージョン22.4では、アプリにいくつかの変更を加える必要があります。

他の変更点の中でも、22.4リリースでは、すべてのコア @sitecore-jssパッケージからAxiosの依存関係が削除されています。この依存関係はJSSのコア機能に深く根付いており、その削除により、ネイティブノードフェッチ、代替フェッチライブラリ、または現在のセキュリティ修正や機能を含むAxiosの最新バージョンの1つなど、JSSアプリがSitecoreと通信する方法の柔軟性が向上します。

メモ

デフォルトのフェッチャーとしてのAxiosの削除に関連する変更の完全な概要については、関連するchangelogエントリを参照してください。

始める前に

まだアップグレードしていない場合は、アプリをJSS 22.3にアップグレードします。
JSS 22.4リリース・ノートをよく理解して、アップグレードの意味を理解してください。

このトピックでは、次の方法について説明します。

手記

JSS Next.jsアプリケーションを更新するには、このトピックではなく、JSS 22.3から22.4へのJSS Next.jsアプリの詳細なアップグレードガイドに従ってください。

Angularアプリを更新する

Angularアプリケーションを更新するには:

すべてのAxiosインポートステートメントが存在する場合は、次のように置き換えます。

既存のインポート	交換輸入
AxiosDataFetcher	NativeDataFetcher
AxiosResponse	NativeDataFetcherResponse
AxiosDataFetcherConfig	NativeDataFetcherConfig

アプリケーションのJSSパッケージを更新し、依存関係をインストールします。

Reactアプリを更新する

Reactアプリケーションを更新するには:

アプリケーション全体 ( src/dataFetcher.jsを除く) で、すべてのAxiosインポートステートメントを次のように置き換えます。

既存のインポート	交換輸入
AxiosDataFetcher	NativeDataFetcher
AxiosResponse	NativeDataFetcherResponse
AxiosDataFetcherConfig	NativeDataFetcherConfig

アプリケーションのJSSパッケージを更新し、依存関係をインストールします。

さらに、データ取得ロジックをAxiosからJSSネイティブ実装 (Node.jsの組み込みロジックに基づく) に切り替える場合は、次の変更を行います。

server/server.jsで、次の手順を実行します。
- Axiosのimportステートメントを削除します。
  import axios from 'axios';
- 次のエクスポートステートメントを見つけます。
  export const setUpDefaultAgents = (httpAgent, httpsAgent) => { ... };
- その文内から次の行を削除します。
  axios.defaults.httpAgent = httpAgent; axios.defaults.httpsAgent = httpsAgent;

src/dataFetcher.jsで、次の手順を実行します。

AxiosFetcher importステートメントを見つけます。
そのステートメントを削除し、次のように置き換えます。
import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss-react';
dataFetcher関数を見つけます。

その関数を削除し、次のように置き換えます。

export async function dataFetcher(url, data) {
  const fetcher = new NativeDataFetcher({ credentials: 'include' });
  const response = await fetcher.fetch(url, {
    method: data ? 'POST' : 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    body: data ? JSON.stringify(data) : undefined,
  });
  return response.data;
}

package.jsonで、次の手順を実行します。
1. 次の依存関係を削除します。
  "axios": "^1.2.3",
2. npm installで変更を適用します。

Vue.jsアプリを更新する

Vue.jsアプリケーションを更新するには:

アプリケーション全体 ( src/dataFetcher.jsを除く) で、すべてのAxiosインポートステートメントを次のように置き換えます。

既存のインポート	交換輸入
AxiosDataFetcher	NativeDataFetcher
AxiosResponse	NativeDataFetcherResponse
AxiosDataFetcherConfig	NativeDataFetcherConfig

アプリケーションのJSSパッケージを更新し、依存関係をインストールします。

さらに、データ取得ロジックをAxiosからJSSネイティブ実装 (Node.jsの組み込みロジックに基づく) に切り替える場合は、次の変更を行います。

server/server.jsで、次の手順を実行します。
- Axiosのimportステートメントを削除します。
  import axios from 'axios';
- 次のエクスポートステートメントを見つけます。
  export const setUpDefaultAgents = (httpAgent, httpsAgent) => { ... };
- その文内から次の行を削除します。
  axios.defaults.httpAgent = httpAgent; axios.defaults.httpsAgent = httpsAgent;

src/dataFetcher.jsで、次の手順を実行します。

Axios importステートメントを見つけます。
そのステートメントを削除し、次のように置き換えます。
import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss-vue';
dataFetcher関数を見つけます。

その関数を削除し、次のように置き換えます。

export async function dataFetcher(url, data) {
  const fetcher = new NativeDataFetcher({ credentials: 'include' });
  const response = await fetcher.fetch(url, {
    method: data ? 'POST' : 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    body: data ? JSON.stringify(data) : undefined,
  });
  return response.data;
}

package.jsonで、次の手順を実行します。
1. 次の依存関係を削除します。
  "axios": "^1.2.3",
2. npm installで変更を適用します。

アプリケーションの依存関係を更新する

アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。

依存関係を更新するには:

既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.4に更新します。
次のコマンドを使用して依存関係をインストールします。
npm install

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