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
GC24 Recap: Interface Internals
task4233
0
140
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
Fediverse Discovery Providers overview
andypiper
0
170
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
230
自作Cコンパイラ 8時間の奮闘
soukouki
0
850
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
480
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
380
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
110
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
110
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.1k
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
190
Featured
See All Featured
Happy Clients
brianwarren
96
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
How GitHub (no longer) Works
holman
310
140k
Design by the Numbers
sachag
277
19k
What's in a price? How to price your products and services
michaelherold
242
11k
How to train your dragon (web standard)
notwaldorf
85
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Into the Great Unknown - MozCon
thekraken
29
1.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
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