v2 へのアップグレード

PWA Kit v2 以前に作成されたプロジェクトをアップグレードして、v2 で改善されたフレームワークやツールを利用できます。

PWA Kit v2 では、以下を含む多くの新機能が追加されました。

🥳 TypeScript のサポート。ビルドツールで TypeScript がデフォルトでサポートされるようになりました。Babel や Webpack のために構成ファイルを更新する必要はありません。

🧰 開発サーバーの更新により、サーバー側でホットリロードがサポートされ、将来のリリースでクライアント側のホットリロードをサポートすることが可能になりました。

🤓 まったく新しいコマンドラインツール、pwa-kit-dev。Webpack、Babel、Jest などの推奨開発ツールがバンドルされ、構成なしでプロジェクトテンプレートをサポートします。

🖌️ 非 React アプリの実験的なサポート。Managed Runtime を使用して、(Retail React App だけでなく) 他の Express ベースのアプリをホストしたいと考えるユーザーが対象です。

v1.5 から v2 へのアップグレードは、既存のプロジェクトファイルのいくつかを変更するだけなので、非常に簡単です。

v1.4 (またはそれ以前) からのアップグレードの場合は、v1.5 からのアップグレードと同じ手順ですが、1 つだけ追加手順があります。今後インポートパスに dist/ フォルダーが含められないように、pwa-kit-react-sdk を含むすべての import ステートメントを更新します。

続きを読み進め、残りのアップグレードタスク (v1.5 と v1.4 の両方のユーザー) を完了します。

アップグレードプロセスを開始するには、プロジェクトのルートディレクトリから package.json を開きます。

次の新しい 3 つの pwa-kit-* パッケージを追加してインストールします。

次の依存関係を削除します。今後は新しい pwa-kit-dev ツールが、これらの依存関係を処理します。(バージョン番号がプロジェクトにあるものと完全に一致しない場合でも、削除します。)

次の NPM スクリプトを新しい pwa-kit-dev を使用するように変換します。

プロジェクトのルートディレクトリから babel.config.js を開き、ファイル全体をこの一行に置き換えます:

Babel の構成にカスタマイズがある場合は、require() 関数の呼び出しの下に追加します。

プロジェクトのルートディレクトリにある webpack.config.js ファイルをカスタマイズしていない場合は、削除します。デフォルトの構成ファイルが自動的に読み込まれます。

カスタマイズしている場合は、最初に require() 関数を呼び出して基本構成を取得した後に、カスタマイズを追加します:

v2 では、Express サーバーの作成メソッドが変更されました。createApp メソッドは廃止となり、getRuntime と呼ばれるメソッドに置き換えられました。

getRuntime メソッドは、ランタイムオブジェクトを返します。createHandler メソッドを使用して、Managed Runtime と互換性のあるラムダハンドラーを作成できます。2 番目の引数は、Express アプリへのアクセスを許可するコールバック関数であり、Express アプリをカスタマイズできるようにします。たとえば、コールバック関数を使用してカスタムエンドポイントを実装できます。

v2 では、body-parser ライブラリが Express アプリから削除されています。req.body の解析と設定を必要とするカスタムエンドポイントがある場合は、npm install body-parser を実行して body-parser ライブラリをインストールし、ボディパーサーライブラリを ssr.js に含めます。

getConfig を使用する場合は、常に新しい pwa-kit-runtime パッケージからインポートします。

worker/main.js を開き、次の新しいルートを追加します。

v2 では、Managed Runtime 環境ごとにプロキシ設定を明示的に定義する必要があります。v1 では、Managed Runtime 環境がローカル開発環境と同じプロキシ設定を使用できるフォールバックメカニズムがありました。パフォーマンスとメンテナンスの問題により、v2 プロジェクトではフォールバック機構がサポートされていません。

Runtime Admin ツールまたは Managed Runtime API を使用して Managed Runtime のプロキシ設定を構成する方法については、リクエストのプロキシを参照してください。

v2 の新しい環境固有の構成機能を利用して、Managed Runtime 環境用のプロキシ設定を構成することもできます。

v2 以前の PWA Kit は Node 12.x をサポートしていました。v2 では、コードが Node 16 以降で動作することを確認する必要があります。

変更が正常に行われたかどうかをテストするには、次のコマンドを実行します。

1. npm start で、アプリがローカルで実行できることを確認します。
2. npm run build で、ビルド処理が正常に行われたことを確認します。
3. npm run push (および Runtime Admin 経由でのデプロイ) で、バンドルのデプロイが正常に行われたことを確認します。