Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stripe / Next.js / AWSによる Headless WordPress活用法...

Stripe / Next.js / AWSによる Headless WordPress活用法/jp_getshifter_feb-25

Shifter ミートアップ!Shifter Headless ではじめる Headless CMS 入門
https://eventregist.com/e/9c0ZtjzIfRXd

Hidetaka Okamoto (Stripe)

February 25, 2022
Tweet

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Technology

Transcript

  1. Stripe / Next.js / AWSによる Headless WordPress活用法 Shifter ミートアップ!Shifter Headless

    ではじめる Headless CMS 入門 Hidetaka Okamoto(@hide__dev) 2022/02/25
  2. 岡本 秀高 ( @hide__dev ) • Stripe Developer Advocate (ex-developer

    in Digitalcube) • JavaScript / TypeScript developer • AWS / Next.js / WordPress / etc… • WordCamp Kyoto 2017 / JP_Stripes Connect 2019 / AWS Samurai 2017 / etc… • 🐈(猫フラご容赦󰢛) 2 ジャムジャム!!Jamstack_5 #JP_GetShifter
  3. 4 決済だけでなく決済周辺の機能もご利用可能 Stripe のプロダクトスイート Payments Checkout Radar Billing Connect Terminal

    Issuing Payouts Capital Corporate Card Treasury オンライン決済 構築済み決済 UI 不正使用とリスクの管理 サブスクリプションの管理 プラットフォーム向けの決済 Climate Sigma Atlas 収益の一部で CO2 除去に貢献 カスタムレポート Identity 決済最適化 ビジネスモデル ビジネス運営 送金・資金移動 融資・法人カード発行 オンライン請求書 Invoicing BaaS 支出管理 ビジネスの資金調達 海外への入金 カード作成 Tax 消費税と VAT の自動計算 オンライン本人確認 スタートアップの企業設立 対面支払い (日本未展開)
  4. Low Code / No Codeで、決済リンクが作れる 5 Shifterミートアップ #JP_GetShifter const session

    = await stripe.checkout.sessions.create({ mode: "payment", success_url: `${req.headers.origin}`, cancel_url: `${req.headers.origin}`, line_items:[{ price: req.body.price_id, quantity: 1 }] }) return session.url
  5. WordPressとStripeの「役割分担」 10 WordPress Stripe 主に取り組むこと • コンテンツの管理・カスタマイズ • ライター・編集者の管理 •

    入稿画面の管理・カスタマイズ • サイトの表示管理・カスタマイズ • 価格・商品管理 • 顧客情報管理 • 安全な決済フローの提供 任せたくないこと • 決済に関わる情報の管理 • 顧客の個人情報の保持 • サイトの表示に関する データの管理 Shifterミートアップ
  6. 全てがWordPressにある「リスク」 • 様々な職種の人が、 管理画面にアクセスする • 意図しない情報アクセスを 防ぐための権限設定 • 関係者が増えるごとに複雑化 •

    複雑化による不整合・バグ • WordPressは、 コンテンツの中身に 集中させたい 14 Shifterミートアップ #jamjamjamstack
  7. ので減らす 17 Shifterミートアップ #JP_GetShifter Customer AWS (Amplify) Writer / Editor

    Frontend Developer Store Manager Stripe Backend Developer AWS (Container) WordPress Next.js
  8. より役割が明確に 18 役割 関係者 WordPress • コンテンツの管理・カスタマイズ • ライター・編集者の管理 •

    ライター • 編集者 • 管理者 AWS • アプリのインフラ • CDNやバックエンド処理 • バックエンド開発者 • システム管理者 Stripe • 決済に関わる情報の管理 • 顧客の個人情報の保持 • マーケティング・販売 • 商品管理・経理 Next.js • サイトの見た目 • コンテンツの表示 • デザイナー • フロントエンドエンジニア Shifterミートアップ
  9. All in one WordPressと、役割分担システム 19 All in one WordPress 役割分担システム

    メリット • すべてWordPressで管理できる • プラグインがあればノーコード • この手法に慣れた会社や 製作者はとても多い • 障害時のリスク分散 • 部署・役割ごとの権限管理 • 自由度の高いシステム開発 デメリット • 1つの障害で多くが止まる • WP内での複雑な権限管理 • カスタマイズに+αで プラグインの仕組み理解が必要 • 使うSaaSやアプリが増える • ほぼフルスクラッチ開発 • WP界隈では、枯れてない Shifterミートアップ
  10. 「WordPressはただのAPI」への意識改革 • 「コンテンツの中身」を 管理する場所がWordPress • テーマやウィジェットは 基本使わない • WP APIのカスタムで、

    対応は可能 • JSとWP両方で 見た目を管理すると、 後々運用がつらくなる 21 Shifterミートアップ #JP_GetShifter
  11. export async function getStaticPaths() { // Call an external API

    endpoint to get posts const res = await fetch('https://.../posts') const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } URLのルーティングから設計する • JSフレームワークに WPみたいな柔軟なRouterはない • スクリプトまたはファイルで、 サイトのURL構造を決める • 後から変更するなら、 ファイルまたはコードを変更 22 Shifterミートアップ #JP_GetShifter
  12. import { getNextStaticProps } from '@faustjs/next'; import { client }

    from 'client'; export default function Home() { const { usePosts } = client; const posts = usePosts({ first: 6, }); … WP_Postから離れて、WP API/WP GraphQLへ • WP APIまたはWP GraphQL • ネットワーク経由で、 記事データを取得 • APIリクエストを、 自分で書く必要があることも • 今からやるなら、 Faust.jsでHookを使うのが無難 https://faustjs.org/docs/next/ref erence/hooks/usePosts 23 Shifterミートアップ #JP_GetShifter
  13. NextAuth.js: 認証周りの汎用ライブラリ • 複数の認証プロバイダを 併用できる • メール / Apple /

    Google Auth0 / etc… • プロバイダごとの方言を ライブラリが翻訳してくれる • 実装コードは同じで、 プロバイダ部分だけ 案件ごとに差し替えも可能 https://next-auth.js.org/ 25 Shifterミートアップ #JP_GetShifter
  14. Next.js Example: with-stripe-typescript • Stripe公式サンプルが Next.js側Examplesに移動した • Checkout / Elements両方に

    対応 • カート機能のサンプルもあり • Next.jsでStripe使うなら、 まず試しておきたい https://github.com/vercel/next.js/tr ee/canary/examples/with-stripe-ty pescript 26 Shifterミートアップ #JP_GetShifter
  15. use-shopping-cart • 前述のサンプルで一部利用 • カート機能のための React Hookライブラリ • Checkoutへの遷移もサポート •

    Hookだけなので、 JSXは自由にかける https://useshoppingcart.com/ 27 Shifterミートアップ #JP_GetShifter
  16. Headless WordPressでいくかいかないか • 絶対の正解は絶対ない • 分散管理できるため、規模の大きい・関係者の多いPJのほうがよいかも • WordPressではなく、 Next.js /

    Gatsbyなどのライブラリとカスタマイズで、見た目を調整する。 • StripeやAWS AmplifyなどのSDKをフル活用しやすいので、 SaaSアプリやマーケットプレイスなど、広告以外のマネタイズを目指す場合にもよい • 初動の早さはNo Headlessが勝ちやすい。 もし課金を始めるなら、この段階からAmplifyやStripeを使うと、 Headlessや脱WordPressもやりやすいので、(個人的には)おすすめ。 28 Shifterミートアップ #JP_GetShifter