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
130
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
970
Other Decks in Programming
See All in Programming
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
510
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
PicoRuby on Rails
makicamel
2
110
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
31k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
590
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
For a Future-Friendly Web
brad_frost
179
9.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Site-Speed That Sticks
csswizardry
10
660
Navigating Team Friction
lara
187
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Scaling GitHub
holman
459
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
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を確認したい
ありがとうございました 来年の夏は殻付きウニが食べたい