React 18 で aws-amplify v5 と AWS Amplify UI v4 にアップグレードしてみた

こんにちは、広野です。

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
AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled applications.. Latest vers...
@aws-amplify/ui-react
(]( ( Latest version: 6.1.6, last published: a month ago. Start using @aws-amplify/ui-react in your project by running `...

@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 に不整合ができてしまったのかも。

と思い、一度インストールした全てのモジュールを全て削除して、ゼロから綺麗にインストールし直したところデプロイ後も動作するようになりました。私の環境ではこれが発生したのですが、他の方には発生しないかもしれません。

まとめ

いかがでしたでしょうか?

あまり細かく説明しておらず恐縮ですが、絶対に直さないといけないコード以外は変更点に抵触する可能性は少ないのかな、と思います。当たり前ですが検証をしっかりやってもらえれば、大丈夫と思います。

本記事が皆様のお役に立てれば幸いです。

著者について
広野 祐司

AWS サーバーレスアーキテクチャを駆使して社内クラウド人材育成アプリとコンテンツづくりに勤しんでいます。React で SPA を書き始めたら快適すぎて、他の言語には戻れなくなりました。サーバーレス & React 仲間を増やしたいです。AWSは好きですが、それよりもフロントエンド開発の方が好きでして、バックエンド構築を簡単にしてくれたAWSには感謝の気持ちの方が強いです。
取得資格:AWS 認定は13資格、ITサービスマネージャ、ITIL v3 Expert 等
2020 - 2024 Japan AWS Top Engineer 受賞
2022 - 2024 AWS Ambassador 受賞
2023 当社初代フルスタックエンジニア認定
好きなAWSサービス:AWS Amplify / AWS AppSync / Amazon Cognito / AWS Step Functions / AWS CloudFormation

広野 祐司をフォローする

クラウドに強いによるエンジニアブログです。

SCSKクラウドサービス(AWS)は、企業価値の向上につながるAWS 導入を全面支援するオールインワンサービスです。AWS最上位パートナーとして、多種多様な業界のシステム構築実績を持つSCSKが、お客様のDX推進を強力にサポートします。

AWSアプリケーション開発クラウドソリューション
シェアする
タイトルとURLをコピーしました