ようやくデプロイできた！！半年間で0から作成したコーヒー豆ECサイト、しっかりランニングコスト０設計。
「趣味の焙煎を、誰かに届けたくなった」
朝から豆を挽いてコーヒーを淹れる。
その朝活が気持ちよくて、いつしか自分で焙煎するようになりました。
購入したての焙煎機で見様見真似で焼いた豆を友人に渡したところ、返ってきたのは一言。
「これ、売ってよ。」
そこから、ECサイトを作ることを考え始めました。
ただ、ECサイトを外注すると数十万円。
さらに月額のカート利用料もかかる。
趣味の延長として始めるには、固定費が重い。
それなら、エンジニアとして自分で作ろうと思いました。
エンジニアとして、自分が使いたいECを設計する
目的
今回の開発で目指したのは、次の4点です。
- ランニングコスト完全0円のEC基盤を構築する
- 商品管理はCMSで完結し、コードを触らず運用できる状態にする
- 決済・在庫・通知まで一気通貫で自動化する
- AI駆動開発で、ひとりでもプロダクション品質を担保する
技術構成
採用した構成
フロントエンド
Next.js 16
App Router / Turbopack / ISR
- 配信: Vercel Hobby
- 月額: 無料
データベース
Supabase
PostgreSQL / Auth / RLS
- 月額: Free tierで無料
CMS
microCMS
商品・ブログ管理
- 月額: Hobbyで無料
決済
Stripe Checkout + Webhooks
- 月額固定費: なし
- コスト: 売上発生時のみ 3.6%
メール通知
Resend
- 注文確認メール
- PDF添付
- 月額: 100通/日まで無料
CI
GitHub Actions
- Supabase keep-alive cron
- 月額: 無料
ポイント
全サービスの無料枠だけで本番運用可能な構成にしました。
売上が発生して初めて、Stripeの手数料だけがかかる設計です。
主な機能と工夫
1. 商品カタログ
microCMS + ISR
商品データはすべてmicroCMSで管理しています。
管理画面から入力するだけで、商品の追加・編集・公開が可能です。
さらにISR（Incremental Static Regeneration）を使うことで、
API呼び出しを最小限に抑えつつ、高速表示を実現しています。
2. アトミック在庫管理
PostgreSQL FOR UPDATE 行ロック
ECサイトで最も怖いのは、在庫以上に売れてしまうことです。
そこでSupabaseに、
reserve_stockrelease_stock
というRPC関数を作り、
PostgreSQLの行ロックで同時注文でも在庫を超えない仕組みにしました。
イメージ
- Customer A: 800g注文
→reserve_stock
→ 在庫1000g → 200g（確保成功） - Customer B: 500g注文（ほぼ同時）
→ 行ロックで待機
→ 在庫200g < 500g
→ 在庫不足エラー - Customer A: 未決済のまま30分経過
→release_stock
→ 在庫200g → 1000gに復元
E2Eテストでは、5人同時注文・10人同時注文のシナリオでも、過剰販売が起きないことを検証しています。
3. Stripe決済フロー
Stripe Checkoutを使い、
- カード決済
- 配送先住所収集
- Apple Pay / Google Pay
に対応しました。
決済完了はWebhookで受け取り、そこから自動で以下を処理します。
- 注文のSupabase保存
- 管理者メール通知
- 在庫確定
なお、現在は**テストモード（sk_test_）**で公開しているため、実際の課金は発生しません。
本番販売を開始する際は、キーを差し替えるだけで移行可能です。
4. メール通知
Resend + PDF添付
注文が入ると、管理者メールへ自動通知されます。
通知内容には、
- 注文ID
- 注文日時
- 商品内容
- 配送先住所
- 合計金額
が含まれ、PDF納品書も添付されます。
メール本文はHTMLテンプレートで構築していますが、
全動的値にHTMLエスケープを適用し、インジェクション対策も入れています。
ユーザ視点での決済画面↑
運営側にて注文メール決済後↓
5. AIコーヒー診断
「どの豆を選べばいいかわからない」という人向けに、
3問の質問に答えるだけで、おすすめの豆を提案する機能も実装しました。
- スワイプUIで提案
- microCMSの商品データと在庫データを連携
- 在庫がある商品の中から最適な豆をスコアリング
単なる診断ではなく、在庫と連動した提案にしているのがポイントです。
スマホ版でのAI診断↑
PC版でのAI診断↑
セキュリティ対策
ECサイトは、個人情報と決済情報を扱います。
そのため、セキュリティには特に注力しました。
実施した対策
CSP（Content Security Policy）
next.config.js で
script-srcconnect-srcframe-src
をホワイトリスト制御
Stripe Webhook署名検証
constructEvent() による改ざん検知
偽リクエストは 400で拒否
Supabase RLS
全テーブルで Row Level Security を有効化
anonユーザーは読み書き不可
Admin認証
app_metadata.role = "admin" + Service Role Key
クライアント側から改ざん不可
オープンリダイレクト防止
Stripeドメインを厳密な正規表現でチェックevilstripe.com のような偽装も通さない
HTMLインジェクション防止
メール本文の動的値を全てエスケープ
在庫操作の保護
reserve/release RPC は Service Role経由のみ実行可能
環境変数の非露出
NEXT_PUBLIC_ 以外がクライアントに露出しないことを、E2Eで検証
テスト
Playwrightで、126件のE2Eテストを実装し、全パスを確認しています。
テストカテゴリ
ページ表示・ナビゲーション
- 15件
- 全ルート / 404 / ドロワー動作
カート操作・永続性
- 10件
- 追加 / 削除 / localStorage / 同一商品複数 / 空→再追加
APIエンドポイント
- 13件
- 認証 / バリデーション / エラー / エッジケース
SEOメタデータ
- 4件
- OGP / JSON-LD / lang
レスポンシブ
- 8件
- iPhone SE〜Desktop
在庫確保RPC
- 6件
- reserve / release / rollback
同時注文テスト
- 2件
- 5並行 / 10並行の過剰販売防止
法的ページ
- 5件
- 特商法 / プライバシー / 利用規約 / 返金 / フッターリンク
セキュリティ
- 10件
- Webhook偽装 / Admin認証バイパス / SQLi / 環境変数非露出
AI診断
- 8件
- UI操作 / API / プログレスバー / 戻るボタン
カート状態整合性
- 3件
- 在庫上限 / 同一商品 / クリア後再追加
AI駆動開発
Claude Code × Codex のデュアルAI体制
このプロジェクトは、
**Claude Code（Opus 4.6）**を主軸に、
**OpenAI Codex（GPT-5.4）**をコードレビューに活用する体制で進めました。
Claude Code
設計・実装・テスト・デプロイ
Claude Codeには、以下を一貫して担わせました。
- アーキテクチャ設計
- コーディング
- デバッグ
- テスト作成
- Vercelデプロイ
さらに、「趣味の焙煎士」というコンセプトを伝えるだけで、
- ヒーローコピー
- About
- 法的ページ
まで、文脈に合ったコンテンツ生成を行えたのも大きかったです。
Stripe Webhook、Supabase RPC、ISRキャッシュなど、
複数サービスを跨ぐ統合もかなりスムーズに進められました。
本番デプロイ時には、URLの改行混入（\n）という問題も発生しましたが、
- デバッグコードを挿入
- 原因を特定
- 修正
- クリーンアップ
まで自律的に進められました。
Codex
独立レビュー
Codexには、Claude Codeが実装したコードに対して、
独立した視点でのレビューを担当させました。
実際に検出できたのは、
- フォールバック豆IDの404問題
- Stripeドメイン検証の不備
- 未使用import
reserve_stock RPCが無い環境でのフォールバック問題
などです。
同じAIに書かせて同じAIにチェックさせるのではなく、
別系統のAIでクロスレビューすることで、
人間のペアプログラミングに近い品質担保ができた感覚があります。
セキュリティ監査
Claude Code内蔵のセキュリティチェッカーでも監査を実施しました。
- HIGH 3件
- MEDIUM 5件
- LOW 3件
合計11項目の指摘があり、
その中でも即時対応が必要だったHTMLインジェクション問題はすぐに修正しました。
一方で、
- レート制限のRedis化
middleware.tsの追加
などは、今後の改善課題として整理しています。
想定トークン量
このレベルのECサイトを0から構築する場合、
概算では 約650〜700万トークン を見込んでいます。
内訳イメージ
- 設計・アーキテクチャ: 約50万
- フロント実装（UI/UX）: 約200万
- バックエンド（API / DB / 決済）: 約150万
- テスト作成・実行: 約100万
- デバッグ・修正: 約80万
- レビュー・セキュリティ監査: 約50万
- デプロイ・運用設定: 約30万
Claude Code Max Plan（月額$200）で見ると、
約1〜2か月の集中開発相当です。
外注すれば数十万円〜百万円規模の開発が、
AI駆動なら月額$200の範囲で現実的になる時代だと感じました。
今後
今後は、以下を進めていく予定です。
- 保健所への届出完了後、Stripeを本番モードに切り替えて販売開始
- 独自ドメイン（
aurelbel.com）取得 - Resendのドメイン認証
- レート制限のUpstash Redis化
- 顧客向け注文確認メールの追加
サイトURL
保健所に届け出を出したら本当にお買い求めいただけると幸いです（笑）
本当においしく焙煎していますので！！
最後に
趣味で始めた焙煎が、
半年かけて「本当に売れる形」になりました。
しかも今回は、
単にECサイトを作ったのではなく、
- コストを抑え
- セキュリティを詰め
- テストを積み
- AIを開発プロセスに組み込みながら
ひとりで運用可能な土台まで設計できたことに、大きな価値を感じています。
個人開発でも、ここまでやれる。
その実感を持てたプロジェクトでした。
