大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話

1.1K Views

September 16, 24

スライド概要

吉祥寺.pm36【オンライン】2024/9/17

profile-image

Qiita や Zenn でいろいろ書いてます。 https://qiita.com/hmatsu47 https://zenn.dev/hmatsu47 MySQL 8.0 の薄い本 : https://github.com/hmatsu47/mysql80_no_usui_hon Aurora MySQL v1 → v3 移行計画 : https://zenn.dev/hmatsu47/books/aurora-mysql3-plan-book

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話 吉祥寺.pm36【オンライン】2024/9/17 まつひさ(hmatsu47)

2.

自己紹介 松久裕保(@hmatsu47) ● https://qiita.com/hmatsu47 ● 現在(最近): ○ 名古屋で Web インフラのお守り係をしています ○ SRE チームに所属しつつ技術検証の支援をしています ○ 大吉祥寺.pm では当日スタッフとして主に受付係をしていました 2

3.

大吉祥寺.pm にて ● こんなことをやってました 色々反省点はありましたが それはそれとして、今日は ←これの話をします 3

4.

投句箱の仕様・コンセプトなど ● 認証なし・シンプルな入力項目 ○ 一人一句まで ■ 投句したらブラウザのローカルストレージに記録 ■ 厳密な管理はしない(一人で複数端末を使い分けできるので) ● 管理者(私)向けの一覧画面を用意 ○ 投句者(詠み人)にプレゼントを渡したらチェック ○ 投句を締め切ったら AI(?)による審査 ■ こちらも厳密な認証などは設けない 4

5.

画面イメージ 5

6.

主な採用技術 ● フロントエンドアプリケーション ○ Next.js(14.2)App Router ○ shadcn/ui ○ Lambda Web Adapter ● サーバー環境 ○ AWS Lambda ○ Amazon RDS for PostgreSQL + pgvector 6

7.

Next.js(14.2)App Router ● React Server Components を取り入れたフレームワーク https://nextjs.org/docs/app ○ フロントエンドのサーバーから直接 DB アクセス ○ PHP の再来(?) ■ 言われてみれば確かにコンセプトが似てる…? ○ Next.js 14 で Server Actions も Stable に ■ (フロントエンド)サーバーサイドで実行する非同期関数でデータ更新処理 ■ Form を Submit →(フロントエンド)サーバーからデータ保存実行、など →今回はバックエンドサーバーを用意したくなかったので採用 7

8.

shadcn/ui ● UI コンポーネント集(≠ UI ライブラリ) https://ui.shadcn.com/ ○ Radix UI + Tailwind CSS で書かれている(依存が少ない) ○ 必要なコンポーネントだけ取り出してカスタマイズして使う ○ 最近 Vercel の v0 が待機リストなしで公開ベータ化して話題に ■ shadcu/ui を使って UI デザインを作ってくれる生成 AI サービス https://v0.dev/chat ■ 投句箱開発時点では v0 の存在は知らず(去年の冬頃も話題になっていた) →ビルド後のコード量・依存パッケージを増やしたくなかったので採用 8

9.

Lambda Web Adapter ● Web フレームワークを AWS Lambda で使うアダプタ https://github.com/awslabs/aws-lambda-web-adapter ○ Rust 製 ○ コンテナに組み込んで使う ○ Next.js 以外に Spring Boot や FastAPI などにも対応 →デプロイ先を Lambda@Edge や Cloudflare Workers などと迷ったが、 DB に近い場所にデプロイするために Lambda を選択 9

10.

Amazon RDS for PostgreSQL + pgvector ● 投句の保存先 DB ○ 「一句」とともにそれをベクトル化して保存 ○ AI 審査(?)のときにベクトル検索で「想定解」と比較 ○ アクセス頻度はごく少なめの想定 →なんでも良かったが使い慣れたものを選択 10

11.

ところで ● 大吉祥寺.pm 開催前 ○ LT ネタの仕入れ(?)のため全国各地の資料館などを行脚 ■ 北九州・恵那・長野・川崎・京都・調布・多摩・刈谷 https://hmatsu47.hatenablog.com/dai_kichijojipm_2024_out_of_lt ■ 「本丸」NTT 技術史料館(武蔵野)には 2 回訪問 ■ なお LT は 5 分間(正味 4 分半?) ○ 当日スタッフとしてのミーティングにも参加 ■ オンライン 2 回+現地(吉祥寺遠征)1 回 →コーディングしている暇などない !? 11

12.

というわけで ● 頼みの綱は ChatGPT(GPT-4o)先生 ○ でも、最近出たばかりの App Router を知ってるのか? →あまり期待しないで聞いてみた 12

13.

すると、 ● 意外と知ってた → Server Action(s) は fetch で API に JSON を POST しようと したりいろいろ怪しかったが、 知識のカットオフ(2023/10) を考えるとやむなし? 13

14.

調子に乗って ● いろいろお願いしてみた ○ バリデーションを頼んだら普通に Zod を持ってきたり 14

15.

しかし、ある時点で ● それまで完全に出力されていたコードが省略され始めた ○ トークン数の壁? ■ 裏側で履歴のチャンク分割→要約を経てプロンプトに渡し始めた? ■ それとも履歴を「間引き」してプロンプトに渡し始めた? ○ 「急に物忘れが始まった ChatG(PT) さん」みたいになった ■ 初見だと困惑 !? 15

16.

そこからは手作業による微調整で ● 一旦完成!…したはずだった ○ ところが、いざ本番環境向けに build してみるとボタンクリック →画面再描画などがうまく動かず ■ 開発環境(npm run dev)では動いていたのに… 16

17.

想定以上に静的生成(SG)されていた ● App Router では build 時にできるだけ SG に寄せる仕様 ○ DB アクセス(参照系)も初期表示用のデータ取得とみなされる ○ 結果、思わぬところまで SG になっていた ■ fetch で API からデータを読み取ってキャッシュするのが面倒だったので、 サーバー処理で DB からデータを読み取る処理を記述 ■ ここでキャッシュ指定を何も書かなかったために SG とみなされた模様 17

18.

修正して一応完成 ● 一部セキュリティ的にアレな部分は残るが ○ 使い道を考えればセーフ? https://github.com/hmatsu47/talkbox 18

19.

やってみた感想 ● ChatGPT(GPT-4o)先生、意外といける ○ 思ったより新しい技術にも対応してくれた ● ただし「おまかせで完成」までは難しそう ○ コード量が多くなってくると壊れ始める? ○ 微調整を始めると「正解が出るまでガチャ」になりがち ■ そしてガチャが始まると正解は(ほぼ)出ない ■ 生成 AI 自身に ReAct をさせてもおそらく似たような状況になりそう →完成させるには人の側にも対象技術に対する最低限の知識が必要 19

20.

最後に一句 ● AI が 紡ぐ小箱で 句を募る ○ ChatGPT 師範にスライド PDF を読み込ませて詠んでもらったら 今ひとつだったので修正 ○ ちなみに、Anthropic Claude 3 Haiku に詠んでもらったところ 「技術と詩心が 手を携えて花開く 新しい扉」 という自由律すぎる句が出てきた 20