Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Rout...
Search
hmatsu47
PRO
September 17, 2024
Technology
0
53
大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話
吉祥寺.pm36【オンライン】2024/9/17
hmatsu47
PRO
September 17, 2024
Tweet
Share
More Decks by hmatsu47
See All by hmatsu47
Aurora DSQL のトランザクション(スナップショット分離と OCC)
hmatsu47
PRO
0
3
いろんなところに居る Amazon Q(Developer)を使い分けてみた
hmatsu47
PRO
0
22
ゲームで体感!Aurora DSQL の OCC(楽観的同時実行制御)
hmatsu47
PRO
0
11
PostgreSQL+pgvector で GraphRAG に挑戦 & pgvectorscale 0.7.x アップデート
hmatsu47
PRO
0
28
LlamaIndex の Property Graph Index を PostgreSQL 上に構築してデータ構造を見てみる
hmatsu47
PRO
0
17
PostgreSQL+pgvector で LlamaIndex の Property Graph Index を試す(序章)
hmatsu47
PRO
0
16
HeatWave on AWS という選択肢を検討してみる
hmatsu47
PRO
0
12
HeatWave on AWS のインバウンドレプリケーションで HeatWave エンジン有効時のレプリケーションラグを確認してみた!
hmatsu47
PRO
0
22
CloudWatch Database Insights 関連アップデート
hmatsu47
PRO
0
56
Other Decks in Technology
See All in Technology
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
150
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
360
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
330
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
Webアクセシビリティ入門
recruitengineers
PRO
3
1.4k
TypeScript入門
recruitengineers
PRO
33
11k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
780
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
590
実践AIガバナンス
asei
3
250
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
3.8k
Kiroと学ぶコンテキストエンジニアリング
oikon48
4
820
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
360
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building an army of robots
kneath
306
46k
Gamification - CAS2011
davidbonilla
81
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Practical Orchestrator
shlominoach
190
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Writing Fast Ruby
sferik
628
62k
Transcript
大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、
Lambda Web Adapter を使って公開した話 吉祥寺.pm36【オンライン】2024/9/17 まつひさ(hmatsu47)
自己紹介 松久裕保(@hmatsu47) • https://qiita.com/hmatsu47 • 現在(最近): ◦ 名古屋で Web インフラのお守り係をしています
◦ SRE チームに所属しつつ技術検証の支援をしています ◦ 大吉祥寺.pm では当日スタッフとして主に受付係をしていました 2
大吉祥寺.pm にて • こんなことをやってました 3 色々反省点はありましたが それはそれとして、今日は ←これの話をします
投句箱の仕様・コンセプトなど • 認証なし・シンプルな入力項目 ◦ 一人一句まで ▪ 投句したらブラウザのローカルストレージに記録 ▪ 厳密な管理はしない(一人で複数端末を使い分けできるので) •
管理者(私)向けの一覧画面を用意 ◦ 投句者(詠み人)にプレゼントを渡したらチェック ◦ 投句を締め切ったら AI(?)による審査 ▪ こちらも厳密な認証などは設けない 4
画面イメージ 5
主な採用技術 • フロントエンドアプリケーション ◦ Next.js(14.2)App Router ◦ shadcn/ui ◦ Lambda
Web Adapter • サーバー環境 ◦ AWS Lambda ◦ Amazon RDS for PostgreSQL + pgvector 6
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
shadcn/ui • UI コンポーネント集(≠ UI ライブラリ) https://ui.shadcn.com/ ◦ Radix UI
+ Tailwind CSS で書かれている(依存が少ない) ◦ 必要なコンポーネントだけ取り出してカスタマイズして使う ◦ 最近 Vercel の v0 が待機リストなしで公開ベータ化して話題に ▪ shadcu/ui を使って UI デザインを作ってくれる生成 AI サービス https://v0.dev/chat ▪ 投句箱開発時点では v0 の存在は知らず(去年の冬頃も話題になっていた) →ビルド後のコード量・依存パッケージを増やしたくなかったので採用 8
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
Amazon RDS for PostgreSQL + pgvector • 投句の保存先 DB ◦
「一句」とともにそれをベクトル化して保存 ◦ AI 審査(?)のときにベクトル検索で「想定解」と比較 ◦ アクセス頻度はごく少なめの想定 →なんでも良かったが使い慣れたものを選択 10
ところで • 大吉祥寺.pm 開催前 ◦ LT ネタの仕入れ(?)のため全国各地の資料館などを行脚 ▪ 北九州・恵那・長野・川崎・京都・調布・多摩・刈谷 https://hmatsu47.hatenablog.com/dai_kichijojipm_2024_out_of_lt
▪ 「本丸」NTT 技術史料館(武蔵野)には 2 回訪問 ▪ なお LT は 5 分間(正味 4 分半?) ◦ 当日スタッフとしてのミーティングにも参加 ▪ オンライン 2 回+現地(吉祥寺遠征)1 回 →コーディングしている暇などない !? 11
というわけで • 頼みの綱は ChatGPT(GPT-4o)先生 ◦ でも、最近出たばかりの App Router を知ってるのか? →あまり期待しないで聞いてみた
12
すると、 • 意外と知ってた → Server Action(s) は fetch で API
に JSON を POST しようと したりいろいろ怪しかったが、 知識のカットオフ(2023/10) を考えるとやむなし? 13
調子に乗って • いろいろお願いしてみた ◦ バリデーションを頼んだら普通に Zod を持ってきたり 14
しかし、ある時点で • それまで完全に出力されていたコードが省略され始めた ◦ トークン数の壁? ▪ 裏側で履歴のチャンク分割→要約を経てプロンプトに渡し始めた? ▪ それとも履歴を「間引き」してプロンプトに渡し始めた? ◦
「急に物忘れが始まった ChatG(PT) さん」みたいになった ▪ 初見だと困惑 !? 15
そこからは手作業による微調整で • 一旦完成!…したはずだった ◦ ところが、いざ本番環境向けに build してみるとボタンクリック →画面再描画などがうまく動かず ▪ 開発環境(npm
run dev)では動いていたのに… 16
想定以上に静的生成(SG)されていた • App Router では build 時にできるだけ SG に寄せる仕様 ◦
DB アクセス(参照系)も初期表示用のデータ取得とみなされる ◦ 結果、思わぬところまで SG になっていた ▪ fetch で API からデータを読み取ってキャッシュするのが面倒だったので、 サーバー処理で DB からデータを読み取る処理を記述 ▪ ここでキャッシュ指定を何も書かなかったために SG とみなされた模様 17
修正して一応完成 • 一部セキュリティ的にアレな部分は残るが ◦ 使い道を考えればセーフ? https://github.com/hmatsu47/talkbox 18
やってみた感想 • ChatGPT(GPT-4o)先生、意外といける ◦ 思ったより新しい技術にも対応してくれた • ただし「おまかせで完成」までは難しそう ◦ コード量が多くなってくると壊れ始める? ◦
微調整を始めると「正解が出るまでガチャ」になりがち ▪ そしてガチャが始まると正解は(ほぼ)出ない ▪ 生成 AI 自身に ReAct をさせてもおそらく似たような状況になりそう →完成させるには人の側にも対象技術に対する最低限の知識が必要 19
最後に一句 • AI が 紡ぐ小箱で 句を募る ◦ ChatGPT 師範にスライド PDF を読み込ませて詠んでもらったら 今ひとつだったので修正
◦ ちなみに、Anthropic Claude 3 Haiku に詠んでもらったところ 「技術と詩心が 手を携えて花開く 新しい扉」 という自由律すぎる句が出てきた 20