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
160
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
990
Other Decks in Programming
See All in Programming
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
Design Foundational Data Engineering Observability
sucitw
3
200
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
520
OSS開発者という働き方
andpad
5
1.7k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Laravel Boost 超入門
fire_arlo
3
210
print("Hello, World")
eddie
2
530
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
230
Rancher と Terraform
fufuhu
2
400
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Being A Developer After 40
akosma
90
590k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Cult of Friendly URLs
andyhume
79
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Invisible Side of Design
smashingmag
301
51k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Into the Great Unknown - MozCon
thekraken
40
2k
Faster Mobile Websites
deanohume
309
31k
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を確認したい
ありがとうございました 来年の夏は殻付きウニが食べたい