v2 へのアップグレード

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

アップグレードしても、Retail React App テンプレートから新しいストアフロント機能は自動的に追加されませんが、最新の Retail React App のコードを参考に手動で追加することは可能です。

Note

新機能

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

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

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

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

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

アップグレードプロセス

PWA Kit のプロジェクトをまだ生成していない場合は、クイックスタートガイドを参照して、v2 を使用して新しいプロジェクトを生成します。

Note

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

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

1// Import with old path
2- import {getAssetUrl} from 'pwa-kit-react-sdk/dist/ssr/universal/utils'
3
4// Import with new path
5+ import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'

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

package.json への変更

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

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

1"pwa-kit-dev": "2.0.0",
2"pwa-kit-react-sdk": "2.0.0",
3"pwa-kit-runtime": "2.0.0",

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

1"@babel/cli": "^7.4.4",
2"@babel/core": "^7.4.5",
3"@babel/parser": "^7.5.5",
4"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
5"@babel/plugin-transform-async-to-generator": "^7.7.0",
6"@babel/plugin-transform-modules-commonjs": "^7.4.4",
7"@babel/plugin-transform-object-assign": "^7.2.0",
8"@babel/plugin-transform-runtime": "^7.6.2",
9"@babel/preset-env": "^7.4.5",
10"@babel/preset-react": "^7.0.0",
11"@babel/register": "^7.4.4",
12"@babel/runtime": "^7.7.2",
13"@babel/runtime-corejs2": "^7.4.5",
14"@babel/traverse": "^7.5.5",
15"babel-eslint": "^10.1.0",
16"babel-jest": "^26.6.3",
17"babel-loader": "^8.0.6",
18"babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
19"babel-plugin-formatjs": "^10.2.3",
20"@loadable/babel-plugin": "^5.13.2",
21"@loadable/server": "^5.15.0",
22"@loadable/webpack-plugin": "5.15.0",
23"eslint": "7.31.0",
24"eslint-config-prettier": "4.0.0",
25"eslint-import-resolver-webpack": "0.10.0",
26"eslint-plugin-header": "^3.1.1",
27"eslint-plugin-import": "2.23.4",
28"eslint-plugin-jsx-a11y": "6.4.1",
29"eslint-plugin-prettier": "3.0.1",
30"eslint-plugin-react": "7.24.0",
31"jest": "^26.6.3",
32"jest-cli": "^26.6.3",
33"webpack": "^5.39.1",
34"webpack-cli": "^4.7.2"

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

1"scripts": {
2    ...
3    "format": "pwa-kit-dev format '\"**/*.{js,jsx}\"'",
4    "lint": "pwa-kit-dev lint '\"**/*.{js,jsx}\"'",
5    "prod:build": "npm run build-translations && pwa-kit-dev build",
6    "push": "npm run prod:build && pwa-kit-dev push",
7    "save-credentials": "pwa-kit-dev save-credentials",
8    "start": "cross-env NODE_ICU_DATA=node_modules/full-icu pwa-kit-dev start",
9    "test": "pwa-kit-dev test",
10    ...
11},

babel.config.js への変更

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

1module.exports = require('pwa-kit-dev/configs/babel/babel-config')

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

webpack.config.js への変更

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

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

1const config = require('pwa-kit-dev/configs/webpack/config')
2
3// Add your customizations here
4const clientConfig = config.find((cnf) => cnf.name === 'client')
5
6module.exports = config

ssr.js への変更

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

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

1- import {createApp} from 'pwa-kit-react-sdk/ssr/server/express'
2+ import {getRuntime} from 'pwa-kit-runtime/ssr/server/express'
3
4const options = {
5    // For example, if you have a different build directory, make sure this buildDir is correct
6    buildDir: path.resolve(process.cwd(), 'my-build-dir'),
7    ...
8}
9
10- const app = createApp(options)
11+ const runtime = getRuntime()
12
13const {handler} = runtime.createHandler(options, (app) => {
14    ...
15    // For example, if you have added a custom endpoint, you can bring its implementation to here
16    app.get('/custom-endpoint', () => {})
17
18    app.get('*', runtime.render)
19})
20// SSR requires that we export a single handler function called 'get', that
21// supports AWS use of the server that we created above.
22export const get = handler

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

1import bodyParser from 'body-parser'
2
3const {handler} = runtime.createHandler(options, (app) => {
4  // add this before the custom endpoints which access `req.body`
5  app.use(bodyParser.json())
6})

異なる方法による getConfig のインポート

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

1- import {getConfig} from 'pwa-kit-react-sdk/ssr/universal/utils' // Old package
2+ import {getConfig} from 'pwa-kit-runtime/utils/ssr-config' // New package

worker/main.js への変更

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

1// Place your Workbox route configurations here, eg:
2// workbox.routing.registerRoute(...)
3
4// Never cache dev-server internals.
5workbox.routing.registerRoute(
6  /^http:\/\/localhost:3000\/__mrt/,
7  new workbox.strategies.NetworkOnly()
8)

プロキシ設定

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

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

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

Node 14 のサポート

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

変更内容のテスト

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

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