Next.js × Rails｜マルチテナントEC「Digital Ichiba」の全体設計と実装まとめ

卒業課題の自作アプリが完了したので、
この記事はアプリの全体像と学習過程を振り返ってまとめる記事です。

スクール卒業課題 マルチテナントEC 「Digital Ichiba」
Digital Ichibaの利用者目線の機能解説は、上記の記事にまとめているので、
こちらでは、技術者目線で振り返ってまとめます。

学習スタンス

設計や実装でAIのサポートを受けています。
かつては、動かせるということは、それなりに理解していることを意味していました。
しかし、昨今のvibeコーディングでは、
自分が理解していなくても、部分的には動くものを作ることができます。
自分の理解が浅いと、生成されたコードをカスタマイズして、
システムにあった形に最適化できないことがあります。
また、理解していない部分が多すぎると、
システムに対するコントロールを失い、扱いきれなくなります。
だから、私は自作アプリを作りながら、
重要な部分だったり、今後また同じ作業をしそうな部分を、
テーマを決めて、実装しながらブログに残すことにしました。
約10記事ほど書きました。
わかりやすい言葉でブログを書くには、
自分が理解している必要があります。
AIで生成したコードを、更にAIに解説してもらいながら、
ブログを書くことで、自分の理解を深めることができました。
つまり、この10本のブログ記事もポートフォリオの一部です。

概要

Digital Ichiba は、
ハンドメイド作家や小規模ブランド、
セレクトショップのオーナー向けに設計された、
オンライン販売プラットフォームです。

初期設定を最小限に抑え、
最短5分で商品ページを公開し、販売を開始できます。
シングルページアプリケーション（SPA）によるスムーズな操作性と、
Stripeを利用した安全で信頼性の高い決済機能を備えています。

スマートフォン・パソコン・タブレットなど、
デバイスを問わず快適に利用できるUIにより、
商品ページの閲覧から購入までをスムーズに行えます。

複雑な設定や運用に悩むことなく、
「作る・伝える・売る」ことに集中できる環境を提供します。

主な機能

• マルチテナント対応のショップ管理
• JWT（Auth.js）によるAPI認証
• Stripe Checkout / Connectによる決済・分配
• 商品管理
• 注文情報の管理

フロントエンド

フロントエンドは、
Next.js、TS、Tailwind、shadcn/uiなどで実装しました。
認証は自分でちゃんと理解したいと思い、
IDaaSを使わず、Auth.jsで自力で実装しました。

バージョン情報

• TypeScript 5.9.3
• React 19.1.0
• Next.js 15.5.7
• Auth.js 5.0.0-beta.30
• TailwindCSS 4.1.17

リソース表

フロントのPagesのMethodはすべてGETです。
Publicは誰でも閲覧できます。
Dashboardはログインする必要があります。

ログイン不要

ログイン必要

API/内部処理

認証フロー

バックエンド

バックエンドはRailsのAPIモード、PostgreSQL、Dockerを使用しています。

バージョン情報

• Ruby 3.3.9
• Rails 8.0.2.1
• PostgreSQL 16.10
• Docker 28.4.0

リソース表

ログイン不要

ログイン必要

Webhooks（署名検証）

ER図

インフラ

バックエンドは、AWSのECS/Fargateで手動デプロイした後、
Github Actionsを使って、デプロイを自動化しました。
その後に、Terraform importでコード化しました。

フロントエンドのNext.jsはVercelにデプロイしました。

バージョン情報

• Terraform 1.14.0
• AWS Provider 6.25

アーキテクチャ図

詳細な技術記事

技術的な詳細なことは、別記事でまとめているので、
このまとめ記事では詳細は言及せず、リンクだけ張っておきたいと思います。

Next.js × Rails × Auth.js でGoogle OAuth + JWTによる認証を実装する
認証について詳細を書いた記事です。
GoogleのOAuthを使って認証し、Auth.jsでセッションを作成して、
それを元に、Next.jsでJWTトークンを作成して、Railsに送ります。

Next.js × Rails で API通信を共通化するBFF（Proxy）構成を実装する
Next.jsからRailsへのfetch処理を共通化しました。

Next.js × Rails × React Hook Form × Zod で画像付きフォームを実装する
React Hook FormとZodで、画像付きのフォームを実装しました。

Next.js × Rails｜SSR＋CSRで実装するECサイトの商品一覧ページネーション
初期データをSSRで取得し、2回目以降をCSRで取得する、
ページネーションを自分なりに設計し、実装しました。

Next.js × Railsでつくるステートレスなカート機能の実装方法
localStorageを使った、ステートレスなカートを実装しました。

Next.js × Rails｜Stripe Connect によるショップのオンボーディング実装
Stripe Connectを使って、ショップのオンボーディングを実装しました。

Next.js × Rails｜Stripe Checkoutで決済機能を実装する
Stripe Checkoutで決済を実装しました。

Next.js × Rails｜ECS/FargateをGitHub Actionsで自動デプロイ
Github Actionsで、自動デプロイできるように実装しました。

Next.js × Rails｜Terraform importで“手動デプロイAWS”をIaC化する
手動デプロイの手順を振り返りつつ、Terraformでコード化しました。

気づき

今回のポートフォリオでは、
DB 設計、インフラ構築、Dockerfile の作成、認証（Auth.js / JWT）、
決済（Stripe Connect / Checkout）、
フォーム（RHF / Zod を用いた店舗・商品の登録機能）など、
一連の Web アプリケーションの開発に必要な要素を一通り実装しました。

技術的には「自分で調べて作り切る」ことができたものの、
同時に 実務ではこれらを1人で背負うことの重さ を強く感じました。

特に認証や決済といった領域は、
“動くコードを書く” 以上に、

• セキュリティ
• 法務・商流
• 障害時の影響
• 安全に使い続けられる運用体制

など、多くの責務が伴います。

Stripe Connect や Checkout は技術としては実装できましたが、
実務で扱うとなると 金銭が動く以上、想像以上に慎重な設計と運用が必要な領域 だと理解しました。

また、認証についても同様に、
Auth.js で仕組みを構築できましたが、
実務では IDaaS（例：Clerk / Auth0 / Firebase Auth など）を活用して
責務を分担し、セキュリティリスクを極力減らす設計が必要 だと感じました。

今回の経験を通して、
「実装できること」と「実務として安全に運用できること」は別物
という大きな気づきを得ました。

今後は、技術だけでなく運用・セキュリティ・責務分散も含めて、
現場で通用する設計力を伸ばしていきたいと考えています。

まとめ

本記事では、自作アプリ「Digital Ichiba」について、
技術者目線で全体構成と実装内容を整理しました。
フロントエンド、バックエンド、インフラ、認証、決済までを一通り実装し、
Web アプリケーションを設計から構築まで作り切る経験ができました。

詳細な技術的な検討や実装内容については、別記事として整理しています。
本記事では、個別の実装解説よりも、
アプリ全体の構成や役割分担が伝わることを意識しています。

今後は、今回の経験を踏まえ、
技術だけでなく運用や責務分散も含めた設計を意識しながら、
開発力を高めていきたいと考えています。