はじめに
フロントエンド界隈はアップデートが早く、ライブラリのバージョンが目まぐるしくアップデートされていきます。
キャッチアップを怠るとすぐに置いてけぼりになってしまいます。
この記事は「Next.js × AWS Amplifyで作成した個人開発アプリを半年間塩漬けにした結果、キャッチアップにこれだけ苦労したよ！」という実体験に基づく作業ログです。
状況
2024年2月頃にAmplify Gen2を使ったアプリを作り（個人開発）、特に改修なしで数ヶ月稼働させていたのですが、最近になって新機能が欲しくなったのでソース改修ことにしました。
改修を始めたのは8月なので、およそ半年ぶりに改修をすることになります。
まずはnode-check-updateを使って、ライブラリの更新を行いました。
amplifyに関するライブラリのバージョンの遷移は下表のとおりです。
| 更新前 | 更新後 | |
|---|---|---|
| @aws-amplify/ui-react | ^6.1.5 | ^6.1.14 |
| aws-amplify | ^6.0.19 | ^6.4.3 |
| @aws-amplify/backend | ^0.13.0-beta.5 | ^1.0.4 |
| @aws-amplify/backend-cli | ^0.12.0-beta.5 | ^1.2.1 |
@aws-amplify/backendと@aws-amplify/backend-cliがbetaから1.X系にアップデートになっており、ここの影響がでかそうな予感がします。
実際にアプリをビルドしてみると色々怒られました。以下に怒られた内容と対処法を記載していきます。
npx amplify->npx ampxに修正
内容
amplify.ymlに記載しているデプロイコマンドでnpx amplify ~~~となっている箇所でエラーが出ました。
どうやらnpx ampx ~~~に変わったようでした。
InvalidCommandError: The Amplify Gen 2 CLI has been renamed to ampx
修正方法
- 修正前：
npx amplify pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID - 修正後：
npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
修正されたと思われる時期
どうやらAmplify Gen2がGAされたタイミングでamplify -> ampxにリネームされたようです。
以下のampx@0.2.0リリースのコミットで追加されてそうです。
amplify -> ampxにリネームしよう！というIssueややりとりは見つけられませんでした。
DynamoDBから取得したデータの型を修正
内容
DynamoDBのTodoテーブルからscanしたデータをTypeScriptで受け取る際、型をSchema["Todo"][]としていたのですが、ここが型エラーになりました。
修正方法
- 修正前：
Schema["Todo"][] - 修正後：
Schema["Todo"]["type"][]
※TodoはDynamoDBのテーブル名
修正されたと思われる時期
Amplifyの公式ドキュメントでは、該当箇所が5月頭に変更されていました。
これもGen2 GAのタイミングかなと思われます。
ソースコードレベルでの変更時期はわかりませんでした。
amplifyconfiguration.json -> amplify_outputs.jsonに修正
内容
"use client";
import config from "@/amplifyconfiguration.json";
import { Amplify } from "aws-amplify";
Amplify.configure(config, { ssr: true });
export default function ConfigureAmplifyClientSide() {
return null;
}
修正前のソースコードでは、Cognitoの認証処理をクライアントサイドで呼び出すために、上記のConfigureAmplifyClientSideコンポーネントをlayout.tsxで読み込んでいました。
amplifyconfiguration.jsonはAmplifyが自動生成するファイルなのですがある時からjsonが自動生成されなくなり、import config from "@/amplifyconfiguration.json";がエラーになりました。
修正方法
amplifyconfiguration.jsonの代わりにamplify_outputs.jsonが生成されるようになったので、このjsonを下記のように記述して読み込む必要がありました。
import { Amplify } from "aws-amplify";
import config from "../amplify_outputs.json";
Amplify.configure(config);
修正されたと思われる時期
こちらもGen2 GAのタイミングで公式ドキュメントに修正が入ってました。
該当のjsonファイルのファイル名はclinet-config-types/clinet_config.tsにenumで定義されていました。
https://github.com/aws-amplify/amplify-backend/blob/main/packages/client-config/src/client-config-types/client_config.ts#L70
export enum ClientConfigFileBaseName {
LEGACY = 'amplifyconfiguration',
DEFAULT = 'amplify_outputs',
}
しかし、元々はEnumではなくget_client_config_path.tsでハードコーディングされていました。
https://github.com/aws-amplify/amplify-backend/commit/5e12247bf72bbe636383fffca5fb4e8f69a465ea#diff-faceb3724a9d0ff82780b0e06032432279b1d1086f6c6288969223ef630eab21L5
const configFileName = 'amplifyconfiguration';
EnumにDEFAULT = 'amplify-outputs'が追加されたのは下記コミットのようです。しかし、この時点ではまだclinet_config.tsのDEFAULT_CLIENT_CONFIG_VERSIONがV0になっているため、amplifyconfiguration.jsonでファイル出力されます。
// Client config version that is generated by default if customers didn't specify one
export const DEFAULT_CLIENT_CONFIG_VERSION: ClientConfigVersion =
ClientConfigVersionOption.V0;
DEFAULT_CLIENT_CONFIG_VERSIONは下記コミットでV0->V1に更新されています。
コミット時期は2024/04/28なので、Amplify Gen2 GAの時期と近いかなと思います。
export const DEFAULT_CLIENT_CONFIG_VERSION: ClientConfigVersion =
- ClientConfigVersionOption.V0;
+ ClientConfigVersionOption.V1;
参考