Vite Flare Starter

vite-flare-starter テンプレートから、機能完全な Cloudflare スターターを複製して設定し、スタンドアロンプロジェクトに変換します。完全にリブランド済みで、デプロイ可能なフルスタックアプリを生成します。

スタック

レイヤー	テクノロジー	バージョン
フロントエンド	React、Vite、Tailwind CSS、shadcn/ui	19、6.x、v4、latest
バックエンド	Hono (on Cloudflare Workers)	4.x
データベース	D1 (SQLite at edge) + Drizzle ORM	0.38+
認証	better-auth (Google OAuth + メール/パスワード)	latest
ストレージ	R2 (S3互換オブジェクトストレージ)	—
AI	Workers AI binding	—
データ取得	TanStack Query	v5

Cloudflare Bindings

Binding	タイプ	用途
DB	D1 Database	メインアプリケーションデータベース
AVATARS	R2 Bucket	ユーザーアバター保存
FILES	R2 Bucket	一般的なファイルアップロード
AI	Workers AI	AI モデル推論

プロジェクト構造

src/
├── client/                 # React フロントエンド
│   ├── components/         # UI コンポーネント
│   ├── hooks/              # カスタムフック + TanStack Query
│   ├── pages/              # ルートページ
│   ├── lib/                # ユーティリティ (auth client など)
│   └── main.tsx            # アプリエントリーポイント
├── server/                 # Hono バックエンド
│   ├── index.ts            # Worker エントリーポイント
│   ├── routes/             # API ルート
│   ├── middleware/          # 認証、CORS など
│   └── db/                 # Drizzle スキーマ + クエリ
└── shared/                 # クライアント/サーバー共有型

主要コマンド

コマンド	用途
pnpm dev	ローカル開発サーバーの起動
pnpm build	本番ビルド
pnpm deploy	Cloudflare へのデプロイ
pnpm db:migrate:local	ローカル マイグレーションの適用
pnpm db:migrate:remote	本番マイグレーションの適用
pnpm db:generate	スキーマ変更からマイグレーションを生成

ワークフロー

ステップ 1: プロジェクト情報の収集

次の情報を確認します:

必須	オプション
プロジェクト名 (kebab-case)	管理者メール
説明 (1文)	Google OAuth 認証情報
Cloudflare アカウント	カスタムドメイン

ステップ 2: 複製と設定

2a. 複製とクリーンアップ

git clone https://github.com/jezweb/vite-flare-starter.git PROJECT_DIR --depth 1
cd PROJECT_DIR
rm -rf .git
git init

2b. 検索・置換対象

これらの場所で vite-flare-starter をプロジェクト名に置換します:

ファイル	対象	置換先
wrangler.jsonc	"vite-flare-starter" (worker 名)	"PROJECT_NAME"
wrangler.jsonc	vite-flare-starter-db	PROJECT_NAME-db
wrangler.jsonc	vite-flare-starter-avatars	PROJECT_NAME-avatars
wrangler.jsonc	vite-flare-starter-files	PROJECT_NAME-files
package.json	"name": "vite-flare-starter"	"name": "PROJECT_NAME"
package.json	vite-flare-starter-db	PROJECT_NAME-db
index.html	<title> コンテンツ	アプリ表示名 (Title Case)

また wrangler.jsonc では:

• ハードコードされた account_id の行を削除 (wrangler のプロンプトまたは環境変数を使用)
• database_id の値を REPLACE_WITH_YOUR_DATABASE_ID に置換

package.json のバージョンを "0.1.0" にリセットします。

置換には Edit ツールを使用してください (sed を使うと macOS/GNU の違いで問題が生じるため推奨)。

2c. 認証シークレットの生成

BETTER_AUTH_SECRET=$(openssl rand -hex 32 2>/dev/null || python3 -c "import secrets; print(secrets.token_hex(32))")

2d. .dev.vars ファイルの作成

kebab-case プロジェクト名を変換: my-cool-app は My Cool App (表示名)、my_cool_app (ID) となります。

# ローカル開発環境変数
# このファイルを GIT にコミットしないでください

# 認証 (better-auth)
BETTER_AUTH_SECRET=<generated>
BETTER_AUTH_URL=http://localhost:5173

# Google OAuth (オプション)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# メール認証制御 (デフォルトは無効)
# ENABLE_EMAIL_LOGIN=true
# ENABLE_EMAIL_SIGNUP=true

# アプリケーション設定
APP_NAME=<Display Name>
VITE_APP_NAME=<Display Name>
VITE_APP_ID=<app_id>
VITE_TOKEN_PREFIX=<app_id>_
VITE_GITHUB_URL=
VITE_FOOTER_TEXT=

NODE_ENV=development

2e. Cloudflare リソースの作成 (オプション)

npx wrangler d1 create PROJECT_NAME-db
# 出力から database_id を抽出し、wrangler.jsonc を更新

npx wrangler r2 bucket create PROJECT_NAME-avatars
npx wrangler r2 bucket create PROJECT_NAME-files

2f. インストールと マイグレーション

pnpm install
pnpm run db:migrate:local

2g. 初期コミット

git add -A
git commit -m "Initial commit from vite-flare-starter"

ステップ 3: 手動設定

1. Google OAuth (使用する場合): Google Cloud Console に移動し、OAuth 2.0 Client ID を作成、リダイレクト URI http://localhost:5173/api/auth/callback/google を追加、Client ID と Secret を .dev.vars にコピーします
2. Favicon: public/favicon.svg を置き換えます
3. CLAUDE.md: プロジェクト説明を更新し、vite-flare-starter への参照を削除します
4. index.html: <title> と meta description を更新します

ステップ 4: ローカル検証

pnpm dev

確認: http://localhost:5173 が読み込まれ、YOUR アプリ名が表示され、サインアップ/サインインが機能します (OAuth が設定されている場合)。

ステップ 5: 本番へのデプロイ

# 本番シークレットの設定
openssl rand -base64 32 | npx wrangler secret put BETTER_AUTH_SECRET
echo "https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put BETTER_AUTH_URL
echo "http://localhost:5173,https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put TRUSTED_ORIGINS

# Google OAuth を使用している場合
echo "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_ID
echo "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET

# リモートデータベースのマイグレーション
pnpm run db:migrate:remote

# ビルドとデプロイ
pnpm run build && pnpm run deploy

重要: 初回デプロイ後、BETTER_AUTH_URL を実際の Worker URL で更新します。本番 URL を Google OAuth リダイレクト URI に追加します。

セキュリティフィンガープリント

攻撃者がこのスターターを使用しているサイトを識別できないよう、以下をすべて変更してください:

場所	デフォルト値	変更方法
ページタイトル	"Vite Flare Starter"	index.html
UI のアプリ名	"Vite Flare Starter"	VITE_APP_NAME 環境変数
localStorage キー	vite-flare-starter-theme	VITE_APP_ID 環境変数
API トークン	vfs_ プレフィックス	VITE_TOKEN_PREFIX 環境変数
GitHub リンク	スターターリポジトリ	VITE_GITHUB_URL (非表示にする場合は空に)
Worker 名	vite-flare-starter	wrangler.jsonc
データベース名	vite-flare-starter-db	wrangler.jsonc
R2 バケット	vite-flare-starter-*	wrangler.jsonc

環境変数

ブランディング (VITE_ プレフィックス = フロントエンドで使用可能)

変数	用途	例
VITE_APP_NAME	UI に表示される名前	"My Cool App"
VITE_APP_ID	localStorage プレフィックス、Sentry	"mycoolapp"
VITE_TOKEN_PREFIX	API トークンプレフィックス	"mca_"
VITE_GITHUB_URL	GitHub リンク (空 = 非表示)	""
VITE_FOOTER_TEXT	フッター著作権テキスト	"2026 My Company"
APP_NAME	サーバー側アプリ名	"My Cool App"

認証

変数	用途	注記
BETTER_AUTH_SECRET	セッション暗号化	openssl rand -hex 32
BETTER_AUTH_URL	認証ベース URL	実際の URL と完全に一致する必要があります
TRUSTED_ORIGINS	許可されたオリジン	カンマ区切り、localhost + prod を含める
GOOGLE_CLIENT_ID	Google OAuth	Google Cloud Console から取得
GOOGLE_CLIENT_SECRET	Google OAuth	Google Cloud Console から取得
ENABLE_EMAIL_LOGIN	メール/パスワード有効化	"true" で有効
ENABLE_EMAIL_SIGNUP	メールサインアップ有効化	ENABLE_EMAIL_LOGIN が必要

メール (オプション)

変数	用途	注記
EMAIL_FROM	送信者アドレス	確認/パスワードリセット用
EMAIL_API_KEY	メールサービス API キー	Resend を推奨

よくあるカスタマイズ

新しいデータベーステーブルの追加

1. src/server/db/schema.ts にスキーマを追加
2. マイグレーションを生成: pnpm db:generate
3. ローカルで適用: pnpm db:migrate:local
4. 本番で適用: pnpm db:migrate:remote

新しい API ルートの追加

1. src/server/routes/ にルートファイルを作成
2. src/server/index.ts に登録
3. src/client/hooks/ に TanStack Query フックを追加

認証プロバイダーの変更

src/server/auth.ts を編集: socialProviders にプロバイダーを追加、.dev.vars と本番シークレットに認証情報を追加、クライアント側のログインボタンを更新します。

フィーチャーフラグ

環境変数でフィーチャーを制御: VITE_FEATURE_STYLE_GUIDE=true、VITE_FEATURE_COMPONENTS=true。src/client/lib/features.ts に独自に追加します。

トラブルシューティング

症状	原因	対応
認証がホームページにサイレント リダイレクト	TRUSTED_ORIGINS が不足	すべての有効な URL で TRUSTED_ORIGINS を設定
デプロイ時の「Not authorized」	間違った account_id	wrangler.jsonc から account_id を削除するか自分のを設定
データベース 500 エラー	マイグレーションが不足	pnpm db:migrate:local と pnpm db:migrate:remote を実行
localStorage に "vite-flare-starter" が表示	VITE_APP_ID が不足	.dev.vars で VITE_APP_ID=yourapp を設定
本番環境でのみ認証が失敗	BETTER_AUTH_URL の不一致	実際の Worker URL と完全に一致する必要があります (https、末尾スラッシュなし)
Google サインインで「redirect_uri_mismatch」	OAuth リダイレクト URI が不足	Google Cloud Console の OAuth リダイレクト URI に本番 URL を追加
シークレット変更が反映されない	再デプロイされていない	wrangler secret put は再デプロイしません。実行後に pnpm deploy を実行

本番デプロイチェックリスト

• BETTER_AUTH_SECRET が設定済み (開発環境と異なるもの!)
• BETTER_AUTH_URL が実際の Worker URL と一致
• TRUSTED_ORIGINS が全有効 URL を含む
• Google OAuth リダイレクト URI が本番 URL を含む
• リモートデータベースがマイグレーション済み (pnpm db:migrate:remote)
• 設定ファイルに vite-flare-starter への参照なし
• Favicon が置き換え済み
• CLAUDE.md が更新済み
• .dev.vars が NOT コミット済み (.gitignore を確認)