先日、Amplifyで検証用に作成していた以下のプログラムが動かなくなった。コンソールを見てみると以下のエラーが発生していた。
[WARN] 04:22.376 DataStore - subscriptionError Connection failed: UnauthorizedException原因は、先日のAmplifyの大胆なバージョンアップの影響である。かなり大幅に機能変更が加わっており、当初は何が起こったのかわからず戸惑った。何がどう変わったのか？その情報を残しておく。
まずは前述のエラーの原因から。
目次
APIの有効期限切れが発覚
Amplify Gen1 では、ほぼ何も考えずにAmplify Stuidoを使ってテーブルを作成し、DataStoreを使ってDB取得・更新できることに何の疑いも持っていなかったが、実は認証モードにAPIキーが使われていたようである。
Amplify Gen1 では、AWS AppSyncが裏側で作成されていることを意識することはなく、まさかAPIキーの最大有効期限が365日だとは知らなかった。もちろん有効期限を延長すれば利用できるのだが、忘れた頃にサイトが動かなくなるため、このAPIキー方式を使い続けることは怖すぎる。
さらにCSR（Client Side Rendering）にてDB取得・更新する際、そのAPIキーは理論上クライアント側に存在して動作するため、何らかの形で漏洩する可能性がある。そうすると攻撃者が自由にDB操作することができ、セキュリティ的にも問題がある。
そのため、APIキーの有効期限の最大日数は365日という仕様になっており、あくまで開発し始めの時のみ使って（最初から認可ルールでつまづくと先に進めなくなるので）、と暗に言っている。企業サイトに導入する場合そのような危なっかしい手法は使わないだろうと。
2023年11月24日のAmazon Web Services ブログ「AWS Amplify の次世代フルスタック開発体験の紹介」において、以下の記述がある。
Amplify Gen 2 のビジョンは、開発者からのフィードバックに直接触発されたものです。バックエンドのコードの透明性と制御性を高めたいという要望がありましたので、TypeScript ファーストのアプローチでそれを実現しました。
■AWS Amplify の次世代フルスタック開発体験の紹介https://aws.amazon.com/jp/blogs/news/introducing-amplify-gen2/
つまり、Amplify Gen 1 は、あまりにもバックエンドがブラックボックス化されすぎていたため、Amplify Gen 2 は、もう少しバックエンドで何が行われているのかを理解しないと使えない仕組みとなった。
Amplify Gen1とGen2のイメージ
Amplify Gen 1 と Gen 2 の違いを図にすると以下のようなイメージになる（※2024/2/4 修正）。
Amplify Gen1 では当初使われていたDataStoreではなく、いつの頃からかGraphQLを直接利用するよう促されるようになった。というのも、Amplify Studio のサンプルコードがそのように変わってしまったのである。
当初、シンプルなサンプルコードのDataStoreに頼ってしまったが、途中でGraphQLへの理解が必須となった。
Amplify Gen 2 では、Amplify Studioを使うことなく開発ができるようになったので、これまでのAmplify Studioへの依存から（良くも悪くも）抜け出すことになる。また、DBへのアクセス時、GraphQLを意識せずに扱えるようにもなっている。
Next.js 14 App Routerの衝撃
2023年10月26日に、Next.jsのv14が公開された。
何といってもこの Next.js v14 の仕様変更のインパクトが非常に大きい。最もわかりやすいのはApp Router の導入である。そして、React Server Component (RSC)の導入により、意識しない限り全てサーバーサイドで処理が実行されることになる。
今まではCSR・フロントエンドを起点に開発するような流れであったが、ここに来てPHPのようにサーバーサイドでの処理を中心とした考え方になった。
そしてなんと、Next.js で開発したことがある人なら知っている「getServerSideProps」と「getStaticProps」が廃止となり、「getStaticPaths」は「generateStaticParams」に代わったようである・・。つまり、App Routerの導入により、今までCSR中心だった方式（Page Router）が唐突に陳腐化したのである。Next.js での開発方法・概念が以前と大きく異なるため、本やWebサイトで学んだあの時間は何だったのか・・と愕然とした。
以下の記事がわかりやすく参考になった。
■ざっくりApp Router入門【Next.js】
https://zenn.dev/yamadadayo123/articles/6cb4f586de0183
AWS Amplify JavaScript v6 の追随
Next.jsのv14 公開から20日後の2023年11月15日、追随するように AWS Amplify JavaScript v6が一般提供された。
Amplify JavaScript v6 では、App Router、ミドルウェア、API ルート、サーバー関数などの Next.js サーバー側の機能との統合も導入されています。
■AWS Amplify JavaScript v6 の一般提供を発表
https://aws.amazon.com/jp/about-aws/whats-new/2023/11/aws-amplify-javascript-v6/
技術の進化スピードが早すぎる。
Amplify Gen2の学び方
Amplify Gen 2 のやり方を学ぼうとするなら、まずは以下のリファレンスを読むのがよい。
■Amplify Docs (Gen 2) – AWS Amplify Gen 2 Documentation
https://docs.amplify.aws/gen2/
ただ範囲が広く、なかなか最初から読み始めると実装するまで辿り着くのに時間がかかりそうである。
そのため、次回の記事では上記サイトを参考にしつつPostテーブルをCreate・Selectするプログラムを最短距離で開発し、まずは動かしてみてから考えることにする。