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
150
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
980
Other Decks in Programming
See All in Programming
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
480
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
270
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
590
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
710
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
16
9.7k
バイブコーディング × 設計思考
nogu66
0
120
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.1k
パスタの技術
yusukebe
1
360
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
130
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
150
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
850
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Cult of Friendly URLs
andyhume
79
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Producing Creativity
orderedlist
PRO
347
40k
BBQ
matthewcrist
89
9.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building an army of robots
kneath
306
45k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
760
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を確認したい
ありがとうございました 来年の夏は殻付きウニが食べたい