こんにちは、広野です。
React アプリを AWS サーバーレスサービスリソースと統合するのに、AWS が提供する AWS Amplify モジュールは開発を大きく効率化してくれます。
しかしながら、モジュールのバージョンアップは頻繁に行われており、特にメジャーバージョンアップの際には React コードの変更を強いられることもあります。アップグレードは検証の手間を考えると気軽にはできるものではありません。
この度、少し時間ができたので、私が開発している React 18 アプリ環境で以下 2 つのモジュールをアップグレードしました。
- aws-amplify
- @aws-amplify/ui-react
環境
執筆時点、以下のような React 環境がありました。
- React 18.2.0
- Amazon Cognito との統合で aws-amplify および @aws-amplify/ui-react を使用
- AWS AppSync との統合で aws-amplify を使用
- Amazon S3 との統合で aws-amplify を使用
- Amazon Kinesis Data Firehose との統合で aws-amplify を使用
AWS リソースとの統合のため、以下の AWS ドキュメントに書かれていることをやっていました。
アップグレード対象
以下のモジュールをアップグレードしました。
- aws-amplify 4.3.46 -> 5.0.16
- @aws-amplify/ui-react 3.6.1 -> 4.3.8
@aws-amplify/ui-react は、以下のドキュメントでも紹介されている Amplify UI というものです。
アップグレード時の問題点
アップグレード時、インストールしているモジュール間の依存性のエラーが発生します。
GitHub のコミュニティで記載されていたのですが、エラーは出ても React 18 で問題なく動くというコメントがありましたので、npm で以下のようにオプションを付けてインストールしました。
npm install --save aws-amplify @aws-amplify/ui-react --legacy-peer-deps
依存性のエラーはこれでクリアできます。(解決というよりは回避ですが)
React コードの変更点
コードの変更点については、以下の AWS 公式ブログが参考になりました。
このブログに直接的には書いていないのですが、AWS リソースとの統合の設定をするコンポーネントの中で必ず書かれているであろう、Amplify.configure に関わる以下のコードを修正する必要があります。
- 修正前
import Amplify from 'aws-amplify';
- 修正後
import { Amplify } from 'aws-amplify';
波カッコが不要か必要かの違いですが、これを直さないとビルドが失敗しました。
Amazon Cognito、AWS AppSync、Amazon S3、Amazon Kinesis Data Firehose との統合に関するコードを変更する必要はありませんでした。今回のアップグレードの変更箇所には抵触しなかったものと思います。
デプロイ後の問題点
おそらくモジュールの問題ではないと思うのですが、デプロイが正常に完了した後に React アプリから Amazon Cognito と通信できなくなりました。ブラウザには以下のエラーメッセージが表示されました。
AuthError - Error: Amplify has not been configured correctly.
アップグレード作業の過程で、package.json と package-lock.json に不整合ができてしまったのかも。
と思い、一度インストールした全てのモジュールを全て削除して、ゼロから綺麗にインストールし直したところデプロイ後も動作するようになりました。私の環境ではこれが発生したのですが、他の方には発生しないかもしれません。
まとめ
いかがでしたでしょうか?
あまり細かく説明しておらず恐縮ですが、絶対に直さないといけないコード以外は変更点に抵触する可能性は少ないのかな、と思います。当たり前ですが検証をしっかりやってもらえれば、大丈夫と思います。
本記事が皆様のお役に立てれば幸いです。