Next.js Supabase Stripe のスターターアプリをデプロイボタンを利用して設定するハンズオン。

Last updated at 2024-11-03Posted at 2024-03-06

Next.jsアプリケーションのスターター

vercel/nextjs-subscription-payments: Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://github.com/vercel/nextjs-subscription-payments

デプロイボタンで設定してから、ローカルに環境を構築し、テストをします。

基本的にreadme.mdファイルを読みながら行っています。

この記事は
Next.jsはサーバー
Supabaseはサーバー
の組み合わせで動かしています。

Local Development for SaaS product in 2024 // Next.js, Supabase and Stripe - YouTube

Next.jsのアプリにStripeの価格を反映させる。

順番を間違えるとStripeのサブスクライブのデータがNext.jsに反映されません。
各環境変数の設定は済んでいるものとします。

この順番で実行するとStripeのデータが反映されます。

↓それぞれVSCodeのターミナルの別ウィンドウで実行します。

pnpm run dev

stripe listen --forward-to http://127.0.0.1:3000/api/webhooks

stripe fixtures fixtures/stripe-fixtures.json

# fixturesフォルダをsrcフォルダの下に移動している場合
stripe fixtures src/fixtures/stripe-fixtures.json

開発環境

Windows
VSCode

アカウントの作成
GitHub
Supabase
Vercel
Stripe

それぞれのCLIを使えるようにしておきます。

CLIとは、VSCodeから直接サービスにアクセスできるようになります。

Stripe

Stripe
https://stripe.com/jp

Stripe API キーの取得

Stripeへ行き、アカウントを作成します。

ログインしたらダッシュボードへ行きます。

画面上の中央にある開発ボタンを押します。

開発者画面に出ます。

タブのAPI キーを開きます。

APIキーの画面が開きます。

公開可能キー
pk_test_51O*****E6U

シークレットキー
sk_test_51O*****qVU

をメモしておきます。

デプロイボタン

vercel/nextjs-subscription-payments: Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://github.com/vercel/nextjs-subscription-payments

readme.md

Step-by-step setup

Step-by-step setupにあるDeployボタンを押します。

You're almost done.
と新しい画面になるので、指示に従っていきます。

Create Git Repository

GitHubを選択します。

Repository Nameをつけます。

vns_masakinihirota

Create private Git Repositoryのチェックを外します。

Createボタンを押します。

Add Integrations

Supabaseの Addボタンを押します。

別ウィンドウが開きます。

Choose organization
organizationを選び
緑色の Install integration ボタンを押します。

New project

Project name
vns_masakinihirota（適当）

Database Password
er*****Ft

※パスワードは Generate a password を押して作成できます。

Region
Northeast Asia (Tokyo)
リージョンは日本を選びます。

Create Project ボタンを押します。

元の画面に戻ります。

Configure Project

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
pk_test_51O*****E6U

STRIPE_SECRET_KEY
sk_test_51O*****qVU

メモしておいた、StripeのAPI キーを入力します。

Deployボタンを押します。

Delplyが始まり、
Buildingなどが始まります。

Congratulations! が出ればVercelへの登録が出来ました。

このプロジェクトにGitHubとSupabaseが連携しています。

※ローカルも連携させるためにはログインとリンクコマンドが必要です。

GitHubはリポジトリができていればうまくいっています。

SupabaseはTable Editorを開いてテーブルができていればうまくいっています。

customers
prices
products
subscriptions
users

ローカルにインストール

リポジトリがGitHubに出来ています。

それをVSCodeでインストールします。

＜＞Codeボタンからインストール方法を選択します。

今回は、GitHub CLIでインストールします。

インストール

gh repo clone [ユーザー名]/[プロジェクト名]

cd プロジェクト名

pnpm install

環境変数ファイルのサンプルをコピーします。

.env.example
.env.local.example

の2つの環境変数のサンプルファイルがあります。

これをコピーして

.env
.env.local

に名前を変更します。

.gitignoreファイルに登録します。

.gitignore

.env*

.env にはGitHub認証用の環境変数
.evn.local にはNext.jsの環境変数を設定します。

Vercelのダッシュボード

Vercelのダッシュボードを開くとURLが与えられています。

例

Deployment
vns-masakinihirota-43nb214mu-masakinihirota.vercel.app

Domains
vns-masakinihirota-kappa.vercel.app

Deploymentは開発のビルド毎に付与されます。

Domainsは固定のURLです。
※独自ドメインを設定しなければずっと同じです。

VercelではGitHubに連携してあると、更新を読み取り、
自動でビルドしてくれます。

GitHub認証

Supabaseを利用して、Next.jsのアプリケーションでGitHub認証が出来るようにします。

Login with GitHub

Supabaseのプロジェクト

Supabaseのダッシュボードに行きます。

先程作ったSupabaseのプロジェクトを開きます。

環境変数をメモしておきます。

Supabase環境変数メモ


Supabaseプロジェクト
組織 Organization

Project name


Database Password



Region
Northeast Asia (Tokyo)

左サイドバーにある Project setting から

Project Settings > General
Reference ID



Project Setting > API > Project URL



Project Setting > API > Project API keys > anon public



Project Setting > API > Project API keys > service_role secret



Project Setting > API > JWT Settings > JWT Secret





アクセストークン
Supabase | Supabase
https://app.supabase.com/account/tokens

「Generate new token」ボタンを押します。

名前

supabase login アクセストークン



Table Plus接続
postgresql://postgres:[PASSWORD]@db.[Reference ID].supabase.co:5432/postgres

ダッシュボード
https://app.supabase.com/project/[Reference ID]



作成コマンド(link)
supabase link --project-ref [Reference ID] -p [Database Password]

型の取得
npx supabase gen types typescript --project-id [Reference ID]

※出力先は指定します。

SupabaseのGitHub認証の有効化

Supabaseのダッシュボードから
左サイドバーのAuthentication
Authentication画面のProvidersを選択します。

GitHubを開いて
GitHub enabledを有効化しておきます。

GitHubサイトの方に登録するコールバックをメモしておきます。

コールバック

https://[Reference ID].supabase.co/auth/v1/callback

一旦そのままにしておいて、
ブラウザの別ウィンドウ、タブを開きます。

GitHub OAuth keys

ブラウザの別ウィンドウで、↓を開きます。

Developer applications
https://github.com/settings/developers

OAuth Apps画面を開きます。

New OAuth Appボンタンを押して新しく作ります。

Application name
`
vns_masakinihirota


Homepage URL(VercelのDomainsを設定)


Authorization callback URL(Supabaseで先程取得したもの)

https://[Reference ID].supabase.co/auth/v1/callback


Register applicationボタンを押します。

Client ID
4c0*****cfU

Client secrets
96b*****67U


メモしておきます。

----------------------------------------

# クライアントIDとクライアントシークレットの登録

先ほど開いていた、Supabaseの画面に戻ります。

Client ID
と
Client secrets
を入力します。
Saveボタンを押します。



----------------------------------------

# SupabaseにNext.jsアプリケーションのURLの設定

## Supabaseダッシュボード

Supabase プロジェクトで、
「Authentication」 > ↓「URL Configuration」に移動し、

https://supabase.com/dashboard/project/_/auth/url-configuration

Site URLには
先ほどGitHubに
Homepage URL(VercelのDomainsを設定)

Site URL
https://vns-masakinihirota-kappa.vercel.app

同じURLを設定します。

Saveボタンを押します。



----------------------------------------

## Vercel

Vercelのダッシュボードを開きます。

Vercelの環境変数を設定します。
プロジェクトの画面上側にあるSettingsタブを開きます。

左サイドバーの
Environment Variablesを開きます。



```環境変数
NEXT_PUBLIC_SITE_URL

という↑環境変数を、↓同じURLで設定します。
https://vns-masakinihirota-kappa.vercel.app

※プレビューブランチとローカル開発が正しく動作することを確認するために、
プレビュー環境と開発環境の選択を必ず「解除」してください。

✔Production
のチェックはオンのまま

□Preview
□Development
のチェックをオフ

Key
NEXT_PUBLIC_SITE_URL

Value
https://nextjs-subscription-payments-deploybutton.vercel.app

Saveボタンを押します。

再デプロイ

新しく設定した環境変数を有効にし、すべてが正しく連携するには、アプリを Vercel に再デプロイする必要があります。

環境変数追加したので、再デプロイをします。

Vercel ダッシュボードで、
現在作業しているプロジェクトを選びます。

上側のタブメニューにある
Deploymentsに移動します。

ビルドしたリストが画面下の方にありますが、
そのリストの一番上のReadyになっている一番右に三点リーダーアイコンがあります。

押すとプルダウンメニューが開き、
Redeployを選択します。

モーダルウィンドウが開くので、
Redeployボタンを押します。

※「既存のビルドキャッシュを使用する」オプションを有効にしないでください。

Stripeの設定

Stripeのダッシュボードを開きます。

ホーム vns_template2 Stripe [テスト]
https://dashboard.stripe.com/test/dashboard

※Stripeは一人のユーザーに付き複数のアカウントを作成できるタイプです。

アカウント名
vns_template2(適当)

アカウントを作り
テスト環境になっていることを確認してください。

ダッシュボードの上側にあるそのテスト環境の左に「開発」ボタンあります。
その左の「開発」ボタンを押します。
すると、「開発者」画面が開きます。

開発者のその直下にあるメニュータブで Webhookを開きます。

Webhook を作成する

Webhook – vns_template2 – Stripe [テスト]
https://dashboard.stripe.com/test/webhooks

「開発者」画面のWebhookから
「エンドポイントを追加」ボタンを押します。

「Stripe イベントのリッスン」ページ

「Stripe イベントのリッスン」ページが開きます。

VercelのDomainsの方を設定します。
https://vns-masakinihirota-kappa.vercel.app

↑このURLに/api/webhooksを追加します。

↓エンドポイント URL を設定します。

エンドポイント URL

https://vns-masakinihirota-kappa.vercel.app/api/webhooks

説明
適当に入力します。

whsec_*****の取得

右のエンドポイントの追加のサンプルの中にあります。
次のステップで必要になるので、↓endpoint_secretをメモしておきます。

例：

whsec_*****

# This is your Stripe CLI webhook secret for testing your endpoint locally.
endpoint_secret = 'whsec_bc5*****91U'

これをメモをしておきます。

リッスンするイベントの選択

「＋イベントを選択」を押して開きます。

全イベントを選択をチェックします。
※ちょっと待ちます

「イベントを追加」ボタンを押します。

もう一度、もっと下の方にある
「イベントを追加」ボタンを押します。

すると、
登録したURLが表示され、
「イベントを待っています」と画面に出たら成功です。

上段にある、開発者ボタンを押します。
「開発者」画面に戻り、Webhookを選択すると、

設定されていれば
オンラインエンドポイント
に設定されているはずです。

ステータスが緑文字アイコンで
有効
と表示されています。

これまでメモしてきた環境変数をローカルの環境変数ファイル（.envと.env.local）に入力します。

サンプルの環境変数に何をいれるか記入しておきました。
[***]部分を書き換えます。

.env

SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="[Callback URL (for OAuth)]"
SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID="[Client ID]"
SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET="[Client secrets]"

.env.local

NEXT_PUBLIC_SITE_URL="[VercelのDomains]"

# These environment variables are used for Supabase Local Dev
NEXT_PUBLIC_SUPABASE_ANON_KEY="[anon public]"
NEXT_PUBLIC_SUPABASE_URL="[Project URL]"
SUPABASE_SERVICE_ROLE_KEY="[service_role secret]"

# Get these from Stripe dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="[公開可能キー]"
STRIPE_SECRET_KEY="[シークレットキー]"
STRIPE_WEBHOOK_SECRET="[endpoint_secret]"

入力例

.env

SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="https://hbjoaqosoqfdjumfowdr.supabase.co/auth/v1/callback"
SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID="4c0*****cfU"
SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET="96b*****67U"

.env.local

NEXT_PUBLIC_SITE_URL="https://vns-masakinihirota-kappa.vercel.app"

# These environment variables are used for Supabase Local Dev
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJ*****ObU"
NEXT_PUBLIC_SUPABASE_URL="https://hbjoaqosoqfdjumfowdr.supabase.co"
SUPABASE_SERVICE_ROLE_KEY="eyJ*****6bU"

# Get these from Stripe dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_51O*****E6U"
STRIPE_SECRET_KEY="sk_test_51O*****qVU"
STRIPE_WEBHOOK_SECRET="whsec_bc5*****91U"

これで、Vercelとローカルの環境変数ファイルの項目が全て埋まりました。

VercelのほうはRedeployをすると、環境変数の値が反映されます。
Vercel がアプリを再構築して再デプロイしたら、製品と価格を設定する準備が整います。

製品と価格情報の作成

Next.jsアプリケーションのリポジトリに

fixtures\stripe-fixtures.json

というStripeの価格設定のサンプルが用意されています。

↓この順番を守ってください。

Next.jsのサーバーを立ち上げて(pnpm run dev)おいてから。
StripeのAPI監視(stripe listen)
価格設定の実行(stripe fixtures)

先ほど取得した、VercelのDomains のURL
https://vns-masakinihirota-kappa.vercel.app/
と
http://localhost:3000/
をブラウザで開いておきます。

↓それぞれVSCodeのターミナルの別ウィンドウで実行します。

pnpm run dev

stripe listen --forward-to http://127.0.0.1:3000/api/webhooks

↑stripe listenを実行すると表示されます。

STRIPE_WEBHOOK_SECRETの値になります。

stripe fixtures fixtures/stripe-fixtures.json

# fixturesフォルダをsrcフォルダの下に移動している場合
stripe fixtures src/fixtures/stripe-fixtures.json

↑サンプルの価格を設定します。

公式リポジトリのデモ画面のように
Pricing Plansと表示されています。

VercelのDomains のURL
https://vns-masakinihirota-kappa.vercel.app/
と
http://localhost:3000/

それぞれリロードすると、価格の設定が反映されているはずです。
反映されていないのならば、環境変数の設定が間違っている可能性が高いです。

認証設定の確認

お試し

まず、サーバーのSupabaseで

プロジェクトを開き、
Authenticationを開き、
Providersを開きます。

Emailを開きます。

Confirm email
Secure email change

の2項目を無効化します。

Saveボタンを押します。

これで確認せずユーザーが作れます。

※お試し中なので、後で戻しておいてください。

Next.jsアプリケーションに戻り、

右上の「Sign In」ボタンを押します。

アカウントを持っていないので、
「Don't have an account? Sign up」ボタンを押します。

適当なユーザーを登録します。
確認を無効化してあるので、形式が整っているだけでユーザーを作成できます。

masakinihirota@gmail.com
「１２３４５６７８９０」

に適当なユーザーを登録します。

※不正なメールアドレス＆パスワードだとあちこちで引っかかります。
(存在しなかったり、短かったり、英数が混在してなかったり等)

Supabaseのダッシュボードに戻り、
Supabaseniの
Authenticationの
Manage
Users
を見てみると、ユーザーが登録されています。

SupabaseのTable Editorに行き、
登録したユーザーを右クリックすると
Delete low ボタンで削除できます。

そうすると
Authenticationテーブルのユーザーも削除できるようになります。
※逆に言えば、publicのusersテーブルにユーザーが残っていると削除できません。

※publicとはPostgresのテーブルスキーマ名です

Stripeの購入テスト。

あとは、Stripeの購入テストです。
ダミーのカードデータを使って購入のテストをします。

Next.jsアプリケーションの
GitHub認証を利用して
Sigin Inしておきます。

Next.jsアプリケーションに戻り、
商品のどれかの
「Subscribe」ボタンを押します。

そうすると、
Stripeのカード支払い画面が出てきます。

※TEST MODEであることを確認してください。

ダミーのカード番号は↓こちら

Test payment methods | Stripe のドキュメント
https://docs.stripe.com/testing?locale=ja-JP

カード情報
4242 4242 4242 4242 (Visa)

存在する現時点以降 月/年
12/34
↑2034年12月

セキュリティコード
任意の 3 桁の数字
123

カード保有者の名前
masakinihirota

請求書の住所
日本
123-4567
東京都あいうえお市
1丁目2番地

「申し込む」ボタンを押します。

暫く待つと、トップページに戻ります。
30秒～1分ほど

確認

トップページの左上にある
Account ボタンを押します。

Your Planとして
先ほど購入した商品が表示されています。

以上で終了です。

応用編

ローカルでの開発環境

ここまでは
Next.js はサーバー
Supabase はサーバー
というパターンで開発環境を設定してきました。

次はローカルで開発するための環境変数を設定します。

それぞれ、パターン１，２，３と分けます。

パータン1 （今回の記事）
Next.jsサーバー (Vercel等)
Supabaseサーバー

パターン2
Next.jsローカル
Supabaseサーバー

パターン3
Next.jsローカル
Supabaseローカル (Docker)

※Stripeはテスト環境だけです。
本番環境の設定等は自己責任でお願いします。

詳細は↓

参考

Next.js App Router と Supabase と Stripe のスターターアプリに色んなパターンの環境変数を設定 #Next.js - Qiita
https://qiita.com/masakinihirota/items/1ae7d17377b8bac524d5

↑パターン１，２，３の設定の仕方が書かれています。

最後に

デプロイボタンを利用すると楽ですが、
環境変数の設定が初めてとか初心者の場合、混乱してしまうと思います。
どの値の設定が間違っているのかを探すのは大変でした。
ですので、デプロイボタンは利用せずに、調べながら設定したほうがいいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Next.js Supabase Stripe のスターターアプリを デプロイボタンを利用して設定するハンズオン。