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
170
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
1k
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
760
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
6
3.2k
EMこそClaude Codeでコード調査しよう
shibayu36
0
250
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
580
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
930
CSC305 Lecture 08
javiergs
PRO
0
250
Google Opalで使える37のライブラリ
mickey_kubo
2
120
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Making Projects Easy
brettharned
120
6.4k
BBQ
matthewcrist
89
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Site-Speed That Sticks
csswizardry
13
910
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Designing Experiences People Love
moore
142
24k
Done Done
chrislema
185
16k
Fireside Chat
paigeccino
40
3.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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を確認したい
ありがとうございました 来年の夏は殻付きウニが食べたい