v0 + Claude Codeで生成したフルスタックアプリをVercel + TiDB Cloudを使って公開してみた
2025.07.04こんにちは、ゲームソリューション部のsoraです。
今回は、v0 + Claude Codeで生成したフルスタックアプリをVercel + TiDB Cloudを使って公開してみたことを書いていきます。
使用技術
- フロントエンド：v0（エラー修正はCursor）
- バックエンド：Claude Code（エラー修正はCursor）
- インフラ：Vercel + TiDB Cloud Serverless
はじめに
まず最初に作成したアプリは以下です。
ユーザーの追加や検索も可能です。
- 初期画面
- 追加画面
- 検索画面
以下の流れで作成しました。細かい部分は以降で記載していきます。
- v0でフロントエンド作成
- Claude Codeでバックエンド作成
- VercelにてGitHubリポジトリ連携
- TiDB Cloudでクラスタ作成・DB/テーブル作成・データ投入
- VercelとTiDB Cloudの連携（Vercel MarketplaceのConnectable Accountsを使用）
- Vercelデプロイ
生成したコードは一発では上手くいかずに何度かエラーが出たため、エラーの修正にはCursorを使用しました。
難しいことをせずにアプリを作ることをコンセプトとしたかったため、事前にコーディングルールを作ったり難しいプロンプトを作成したりしないように進めました。
ちなみに今回使用するv0/VercelやTiDB Cloudはクラスメソッドで取り扱っています！
v0でフロントエンド作成
まずv0でフロントエンドを作成します。
プロンプトについても、Claude Sonnet 4に作りたいイメージを伝えて生成したものです。
プロンプト内ではデータ構造などの指定もされていますが、今回やりたいことと作りたいもののイメージを伝えて出てきたものであり、自分で細かくは考えてません。
Create a player game data dashboard.
Features:
- Player list display (table format)
- Basic player information (name, level, score, last login date)
- Player detail view (click to navigate to detail page)
- Add new player form
- Simple search functionality (filter by name)
Data structure:
- id: number
- name: string
- level: number
- score: number
- lastLogin: Date
- status: 'online' | 'offline'
APIs to be integrated later:
- GET /api/players - Get player list
- GET /api/players/[id] - Get player details
- POST /api/players - Create new player
- PUT /api/players/[id] - Update player info
このプロンプトをv0にコピペしてフロントエンドを生成します。
一発でこの形で出てきました。
質素なものの特に問題なかったため、フロントエンドはこれで完成とします。
成果物はGitHubリポジトリを作成して、そちらに移しておきます。（次の工程で使います。）
Claude Codeでバックエンド作成
続いてバックエンドを作成していきます。
v0ではフロントエンドしか作成できないため、バックエンドはClaude Codeを使います。
※Claude Codeのインストールなどの手順は省きます。
先ほど作成したGitHubリポジトリを持ってきて、同じディレクトリ内で操作していきます。
claudeコマンドで起動して、以下プロンプトを入力します。
難しいことは極力しないコンセプトなため、事前にルールを作成したり、Claude Codeで途中で聞かれる質問も全てOKで進めます。
ちなみにこのプロンプトもAI生成したものから不要な部分を少し削除したものです。
Please add API Routes to this Next.js project and modify the frontend mock data sections to use actual API calls.
## Current Situation
- Next.js project generated by v0 (using App Router)
- Frontend is complete (currently using mock data)
- Will be deployed to Vercel
## Implementation Requirements
### 1. API Routes Creation
Implement these endpoints:
**GET /api/players**
- Get all players list
- Support search query parameter (?search=name)
- Response: Player[]
**POST /api/players**
- Create new player
- Request body: { name: string }
- Response: Player
**GET /api/players/[id]**
- Get player details by ID
- Response: Player | null
**PUT /api/players/[id]**
- Update player information
- Request body: Partial<Player>
- Response: Player
### 2. Database Connection
- Create `lib/db.ts` (TiDB Cloud setup with environment variables)
- Actual connection setup will be done later, placeholder is fine
### 3. Frontend Modifications
- Remove mock data
- Replace with actual API calls
Please add any required packages if needed.
一旦コード自体は生成できたため、GitHubにコミットしてバックエンドも終了です。
git add .
git commit -m "コメント"
git push origin main
VercelにてGitHubリポジトリ連携
次にVercelにてここまで成果物を配置してきたGitHubリポジトリの連携をします。
Vercelにて、Overview > Add New > Projectにて以下画面から連携します。
連携が完了すると以下のような画面になります。
すぐに表示されていなくて色々設定を見ましたが、時間を置いてみると表示されたので少し待たないと表示されないかもしれません。
TiDB Cloudでクラスタ作成・DB/テーブル作成・データ投入
次に本アプリで使用するDBを準備します。
TiDB Cloudにてクラスタを作成します。
今回は手軽に使用可能なServerlessを使用します。
クラスタ作成後、今回のアプリで表示したいデータを事前にTiDB Cloudにて登録しておきます。
TiDB Cloudには、SQL Editorという機能があるため、そちらからSQLを実行していきます。
ちなみに、SQL EditorにはSQLのAI生成機能もあります。
今回は別のAIで生成した以下SQLを実行します。
CREATE DATABASE game_dashboard;
USE game_dashboard;
CREATE TABLE players (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
level INT DEFAULT 1,
score INT DEFAULT 0,
lastLogin DATETIME DEFAULT CURRENT_TIMESTAMP,
status ENUM('online', 'offline') DEFAULT 'offline',
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO players (name, level, score, lastLogin, status) VALUES
('ShadowNinja', 72, 245000, '2024-01-04 14:30:00', 'online'),
('FireDragon', 65, 198500, '2024-01-04 13:45:00', 'online'),
('IceQueen', 58, 176000, '2024-01-04 12:20:00', 'offline'),
('ThunderBolt', 43, 134800, '2024-01-04 11:15:00', 'online'),
('MysticWolf', 39, 98300, '2024-01-03 23:30:00', 'offline'),
('CrimsonBlade', 81, 312000, '2024-01-04 15:00:00', 'online'),
('StarGazer', 26, 45600, '2024-01-03 18:45:00', 'offline'),
('VoidWalker', 94, 456000, '2024-01-04 16:20:00', 'online'),
('GoldenArrow', 33, 78900, '2024-01-04 09:30:00', 'online'),
('DarkPhoenix', 67, 223400, '2024-01-03 21:15:00', 'offline');
以下SQLを実行して、データが登録されていることも確認できました。
SELECT * FROM players ORDER BY id ASC;
次に接続情報を取得します。
私はTiDB Cloudの画面上から取得したのですが、Vercel MarketplaceのConnectable Accountsを使用して取得することも可能なため、そちらを利用する方はこの工程はスキップしてください。
TiDB CloudのクラスタのOverviewからConnectを押すと接続情報が表示されます。
初回であればパスワードを生成するボタンがあるため、そちらを押してパスワードを生成してください。
CA Certはなくても接続可能なため、今回は使用していません。
VercelとTiDB Cloudの連携（Vercel MarketplaceのConnectable Accountsを使用）
今回、アプリ動作確認時は使用しなかったのですが、TiDB Cloud上で接続情報を取得しなくても、Vercel MarketplaceからTiDB Cloudと連携することで、接続情報がVercelの環境変数として自動で登録されます。
IntegrationsからVercel Marketplaceに行き、TiDB Cloudを検索してaddをクリックします。
アカウント連携の画面が出るため、先ほどVercelへ連携したプロジェクトを選択して、アカウント連携を行います。
連携の画面に画面遷移するので指示の通り進めていくと連携されます。
連携した後に、Vercelで環境変数を確認すると、以下のようにTiDB Cloudの接続情報が連携されていることが確認できました。
Vercelデプロイ
全ての準備が終わったのでVercelにデプロイします。
環境変数を登録していなければ、この画面でEnvironment VariablesにDB接続のための環境変数を入力します。
正常にデプロイされると以下の画面になるため、Domainsからアプリに接続します。
完成版が以下です。
- 初期画面
- 追加画面
- 検索画面
(おまけ)エラーの修正
Vercelにデプロイしてアプリが動いたところまで記載しましたが、実際のところ1発では動かなかったため、コードの修正は行いました。
ただし、これも難しいことはしていなくて、Vercelに出たエラーをCursorに貼り付けてエラーを修正してと依頼しただけです。
VercelのDeploymentsからデプロイのエラーを確認することができます。
このBuild Logs内のエラーをCursorにコピペして、エラーを修正してと伝えて、コードをちゃんと読むことなく修正してデプロイまでできました。
（今回はあくまで検証なのでコードの細かい理解までしていません。）
※恥ずかしながら指示がすごく雑ですみません。
最後に
今回は、v0 + Claude Codeで生成したフルスタックアプリをVercel + TiDB Cloudを使って公開してみたことを記事にしました。
どなたかの参考になると幸いです。
冒頭でも記載しましたが、今回使用したv0/VercelやTiDB Cloudはクラスメソッドで扱っています！
