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
2
大吉祥寺.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
ある日突然 DB の性能が 1/2(サイズのインスタンス相当)になった話
hmatsu47
PRO
0
22
pgvectorscale と pgai の話(ざっくり)
hmatsu47
PRO
0
19
pgvector 0.7.0 の新機能と、これから来る(かもしれない)pgvectorscale
hmatsu47
PRO
0
14
大人の社会科見学 ~ NTT 技術史料館に行ってみよう!
hmatsu47
PRO
0
370
pgvector 0.6.0 以降の進化についてざっくり取り上げてみる
hmatsu47
PRO
0
39
Cloudflare Workes からMySQL 系 DB への接続事情(2024/4 現在)
hmatsu47
PRO
0
88
BuriKaigi2024 にボランティアスタッフとして参加した話
hmatsu47
PRO
0
68
Aurora MySQL と Redshift の zero-ETL 統合のフィルター機能を試してみた
hmatsu47
PRO
0
120
Aurora MySQL 3.06 の ML 機能で Bedrock アクセスを試してみた
hmatsu47
PRO
0
86
Other Decks in Technology
See All in Technology
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
580
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
250
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
Technical Writing Meetup vol.35
soracom
PRO
2
120
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
250
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
930
Fediverse Discovery Providers overview
andypiper
0
170
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
Featured
See All Featured
Docker and Python
trallard
39
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Designing the Hi-DPI Web
ddemaree
278
34k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Why Our Code Smells
bkeepers
PRO
334
56k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Visualization
eitanlees
142
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
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