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
AWS Amplify(Next.js) & Stripeを実装してみた話
Search
Kozaru
October 30, 2024
Programming
0
71
AWS Amplify(Next.js) & Stripeを実装してみた話
JP_Stripes 大阪 Vol.11でのLT
Kozaru
October 30, 2024
Tweet
Share
More Decks by Kozaru
See All by Kozaru
こざるとフォント〜コンピュータとともに
kozaru_kodera
0
910
Other Decks in Programming
See All in Programming
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
今年やったこと最近やったこと2024
saito5656
0
100
テストコード書いてみませんか?
onopon
2
190
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
810
情報漏洩させないための設計
kubotak
4
740
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
490
testcontainers のススメ
sgash708
1
130
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
8
1.8k
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
670
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
920
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
A Philosophy of Restraint
colly
203
16k
Git: the NoSQL Database
bkeepers
PRO
427
64k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Speed Design
sergeychernyshev
25
670
Raft: Consensus for Rubyists
vanstee
137
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Transcript
AWS Amplify(Next.js) & Stripeを実装してみた話 2024.10.30 こざる
自己紹介 こざる • フロントエンドエンジニア ◦ ときどきデザイナー(TailwindCSS好きです) ◦ ここ数年: Vue.jsを使ったSPA 開発中心
◦ X @kozaru_kodera JP_Stripes 大阪に参加し始めた理由 • 仕事でStripeを使うことがあった ◦ Stripe 岡本さんの記事には大変お世話になりました 詳しくは こちらをどうぞ
AWS/React初心者が AWS Amplify(Next.js) & Stripeを実装してみた アジェンダ 1. 実装しようと思った背景 2. 構成イメージ
3. Next.jsを使った理由 4. Demo 5. つまずきポイント 6. まとめ ① AWS Amplify ② 環境変数とシークレット ③ Next.jsとuseShoppingCart
実装しようと思った背景 • Stripe実装やってみたいけど... ◦ 仕事で使ったけど、次回、いつ使うかわからない(案件次第) ◦ サンプルコードは、Reactメイン...(普段はVue.js使い) ◦ モチベーション...down⬇ •
そんなとき、AWS Amplify と Amplify UIに興味を持った ◦ 自分が苦手なところの設定やってくれそうだし... ◦ CursorなどAIツールもあるし、いけるかも? ◦ なら、Stripeと使うといいんじゃない?? モチベーション...up⬆
構成イメージ Tailwind UI headless UI Client deploy Next API ProductsAPI
PriceAPI Checkout 商品登録
Next.jsを使った理由 • Stripe関連の参考記事にNext.jsやReactが多かった ◦ バージョン確認は必要 • Amplifyテンプレートの有無 ◦ Remix /
Reactや、Nuxt.js / Vue も候補だった ◦ テンプレートがないと、今回使うにはハードルが高かった • Tailwind UI/headless UIとReactの相性もよかった
Demo
つまずきポイント① AWS Amplify • 設定や環境づくりに手間取ってしまった(Tutorialやればよかった)
つまずきポイント② 環境変数とシークレット • 環境変数設定 ◦ AmplifyのシークレットにStripe制限付きAPIキー入れると動作しなかった 別のつまづき:NextAPIへのBasic認証対応をすっかり忘れていた シークレットも、上記が原因かもだけど、試せてない...また次回に!
つまずきポイント③ Next.jsとuseShoppingCart • Cart関連:useShoppingCartを使ったClient処理 • 商品表示:ServerでStripeのAPI取得後、Next/API Routes経由で表示 参考記事読んだり、生成AIツールに聞きながら、試行錯誤ありきで それぞれのお作法に合わせる部分につまづいた ⬇
今回は、ざっくり作ったけど 通常は、事前設計必要
まとめ • Stripeは、テストモードでいろいろ試せて、とても助かる ◦ ダッシュボードもテストか本番かすぐわかる • 商品登録から購入までの一連の流れを実装して、Stripeの理解が深まった ◦ 「触って学ぶ」と体感的に理解できる •
次は、Amplify UI 使ってみたい ◦ Figmaとの連携をして、CSSを確認したい
ありがとうございました 来年の夏は殻付きウニが食べたい