AWS Amplify(Next.js) & Stripeを実装してみた話

JP_Stripes 大阪 Vol.11でのLT

Transcript

1. AWS Amplify(Next.js) & Stripeを実装してみた話 2024.10.30 こざる
2. 自己紹介 こざる • フロントエンドエンジニア ◦ ときどきデザイナー（TailwindCSS好きです） ◦ ここ数年: Vue.jsを使ったSPA 開発中心 ◦ X　@kozaru_kodera JP_Stripes 大阪に参加し始めた理由 • 仕事でStripeを使うことがあった ◦ Stripe 岡本さんの記事には大変お世話になりました 詳しくは こちらをどうぞ
3. AWS/React初心者が AWS Amplify(Next.js) & Stripeを実装してみた アジェンダ 1. 実装しようと思った背景 2. 構成イメージ 3. Next.jsを使った理由 4. Demo 5. つまずきポイント 6. まとめ ① AWS Amplify ② 環境変数とシークレット ③ Next.jsとuseShoppingCart
4. 実装しようと思った背景 • Stripe実装やってみたいけど... ◦ 仕事で使ったけど、次回、いつ使うかわからない（案件次第） ◦ サンプルコードは、Reactメイン...（普段はVue.js使い） ◦ モチベーション...down⬇ • そんなとき、AWS Amplify と Amplify UIに興味を持った ◦ 自分が苦手なところの設定やってくれそうだし... ◦ CursorなどAIツールもあるし、いけるかも？ ◦ なら、Stripeと使うといいんじゃない？？　モチベーション...up⬆
5. 構成イメージ Tailwind UI headless UI Client deploy Next API ProductsAPI PriceAPI Checkout 商品登録
6. Next.jsを使った理由 • Stripe関連の参考記事にNext.jsやReactが多かった ◦ バージョン確認は必要 • Amplifyテンプレートの有無 ◦ Remix / Reactや、Nuxt.js / Vue も候補だった ◦ テンプレートがないと、今回使うにはハードルが高かった • Tailwind UI/headless UIとReactの相性もよかった
7. Demo
8. つまずきポイント① AWS Amplify • 設定や環境づくりに手間取ってしまった（Tutorialやればよかった）
9. つまずきポイント② 環境変数とシークレット • 環境変数設定 ◦ AmplifyのシークレットにStripe制限付きAPIキー入れると動作しなかった 別のつまづき：NextAPIへのBasic認証対応をすっかり忘れていた シークレットも、上記が原因かもだけど、試せてない...また次回に！
10. つまずきポイント③ Next.jsとuseShoppingCart • Cart関連：useShoppingCartを使ったClient処理 • 商品表示：ServerでStripeのAPI取得後、Next/API Routes経由で表示 参考記事読んだり、生成AIツールに聞きながら、試行錯誤ありきで それぞれのお作法に合わせる部分につまづいた ⬇ 今回は、ざっくり作ったけど 通常は、事前設計必要
11. まとめ • Stripeは、テストモードでいろいろ試せて、とても助かる ◦ ダッシュボードもテストか本番かすぐわかる • 商品登録から購入までの一連の流れを実装して、Stripeの理解が深まった ◦ 「触って学ぶ」と体感的に理解できる • 次は、Amplify UI 使ってみたい ◦ Figmaとの連携をして、CSSを確認したい
12. ありがとうございました 来年の夏は殻付きウニが食べたい