Amplify Gen2のライブラリアップデートに半年遅れでキャッチアップします

# はじめに
フロントエンド界隈はアップデートが早く、ライブラリのバージョンが目まぐるしくアップデートされていきます。
キャッチアップを怠るとすぐに置いてけぼりになってしまいます。
この記事は「Next.js × AWS Amplifyで作成した個人開発アプリを半年間塩漬けにした結果、キャッチアップにこれだけ苦労したよ！」という実体験に基づく作業ログです。

# 状況
2024年2月頃にAmplify Gen2を使ったアプリを作り（個人開発）、特に改修なしで数ヶ月稼働させていたのですが、最近になって新機能が欲しくなったのでソース改修ことにしました。
改修を始めたのは8月なので、およそ半年ぶりに改修をすることになります。

まずは[node-check-update](https://www.npmjs.com/package/npm-check-updates)を使って、ライブラリの更新を行いました。
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 ~~~`に変わったようでした。

```sh:エラーメッセージ
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されたタイミング](https://aws.amazon.com/jp/about-aws/whats-new/2024/05/aws-amplify-gen-2-available/)でamplify -> ampxにリネームされたようです。

以下の`ampx@0.2.0`リリースのコミットで追加されてそうです。

https://github.com/aws-amplify/amplify-backend/releases/tag/ampx%400.2.0

amplify -> ampxにリネームしよう！というIssueややりとりは見つけられませんでした。

# DynamoDBから取得したデータの型を修正
### 内容
DynamoDBのTodoテーブルからscanしたデータをTypeScriptで受け取る際、型を`Schema["Todo"][]`としていたのですが、ここが型エラーになりました。
### 修正方法
- 修正前：`Schema["Todo"][]`
- 修正後：`Schema["Todo"]["type"][]`
※`Todo`はDynamoDBのテーブル名

### 修正されたと思われる時期
Amplifyの公式ドキュメントでは、該当箇所が5月頭に変更されていました。
これもGen2 GAのタイミングかなと思われます。

https://github.com/aws-amplify/docs/pull/7414

ソースコードレベルでの変更時期はわかりませんでした。

# amplifyconfiguration.json -> amplify_outputs.jsonに修正 
### 内容
```typescript:ConfigureAmplifyClientSide.tsx
"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を下記のように記述して読み込む必要がありました。
```typescript
import { Amplify } from "aws-amplify";
import config from "../amplify_outputs.json";

Amplify.configure(config);
```

### 修正されたと思われる時期
こちらもGen2 GAのタイミングで公式ドキュメントに修正が入ってました。

https://github.com/aws-amplify/docs/pull/7438

該当の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
```typescript:clinet_config.ts
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
```typescript:get_client_config_path.ts
const configFileName = 'amplifyconfiguration';
```

Enumに`DEFAULT = 'amplify-outputs'`が追加されたのは下記コミットのようです。しかし、この時点ではまだclinet_config.tsの`DEFAULT_CLIENT_CONFIG_VERSION`がV0になっているため、`amplifyconfiguration.json`でファイル出力されます。

https://github.com/aws-amplify/amplify-backend/commit/5e12247bf72bbe636383fffca5fb4e8f69a465ea#diff-dfa3b8b59e7ed9293e9dd7336903c6dfb48d635c92ecc37b044a811c12f81afe
```typescript:client_config_ts
// 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の時期と近いかなと思います。

https://github.com/aws-amplify/amplify-backend/commit/a817f2d1ddb7b0730dd9022e0bfcf26170be1e1c#diff-dfa3b8b59e7ed9293e9dd7336903c6dfb48d635c92ecc37b044a811c12f81afe
```diff
export const DEFAULT_CLIENT_CONFIG_VERSION: ClientConfigVersion =
-  ClientConfigVersionOption.V0;
+  ClientConfigVersionOption.V1;
```


# 参考

https://dev.classmethod.jp/articles/amplify-gen2-ga-cli/