vite-flare-starter

Vite Flare Starter

機能があらかじめそろった Cloudflare スターターをクローンして設定し、独立したプロジェクトにします。完全にリブランドされた、デプロイ可能なフルスタックアプリを作成します。

スタック

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

Cloudflare バインディング

バインディング	種類	用途
DB	D1 データベース	アプリケーションのプライマリデータベース
AVATARS	R2 バケット	ユーザーのアバター保存
FILES	R2 バケット	汎用ファイルのアップロード
AI	Workers AI	AI モデルの推論

プロジェクト構成

src/
├── client/                 # React frontend
│   ├── components/         # UI components
│   ├── hooks/              # Custom hooks + TanStack Query
│   ├── pages/              # Route pages
│   ├── lib/                # Utilities (auth client, etc.)
│   └── main.tsx            # App entry point
├── server/                 # Hono backend
│   ├── index.ts            # Worker entry point
│   ├── routes/             # API routes
│   ├── middleware/          # Auth, CORS, etc.
│   └── db/                 # Drizzle schema + queries
└── shared/                 # Shared types between client/server

主なコマンド

コマンド	用途
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> の内容	アプリの表示名（タイトルケース）

さらに、wrangler.jsonc で以下を行います。

• 削除：ハードコードされた account_id の行（wrangler のプロンプトに従うか、環境変数を使用します）
• 置換：database_id の値を REPLACE_WITH_YOUR_DATABASE_ID に置き換える

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

置換には Edit ツールを使用します（macOS と GNU の違いによる問題を避けるため、sed より推奨）。

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、ID が my_cool_app になります。

# Local Development Environment Variables
# DO NOT COMMIT THIS FILE TO GIT

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

# Google OAuth (optional)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# Email Auth Control (disabled by default)
# ENABLE_EMAIL_LOGIN=true
# ENABLE_EMAIL_SIGNUP=true

# Application Configuration
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
# Extract database_id from output, update 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 クライアント ID を作成し、リダイレクト URI http://localhost:5173/api/auth/callback/google を追加します。クライアント ID とシークレットを .dev.vars にコピーします
2. ファビコン：public/favicon.svg を置き換えます
3. CLAUDE.md：プロジェクトの説明を更新し、vite-flare-starter への言及を削除します
4. index.html：<title> とメタディスクリプションを更新します

ステップ 4：ローカルで確認する

pnpm dev

確認項目：http://localhost:5173 が読み込まれ、自分のアプリ名が表示され、（OAuth を設定した場合）サインアップ／サインインが機能すること。

ステップ 5：本番環境にデプロイする

# Set production secrets
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

# If using Google OAuth
echo "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_ID
echo "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET

# Migrate remote database
pnpm run db:migrate:remote

# Build and deploy
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 env var
localStorage キー	vite-flare-starter-theme	VITE_APP_ID env var
API トークン	vfs_ prefix	VITE_TOKEN_PREFIX env var
GitHub リンク	starter repo	VITE_GITHUB_URL（空にすると非表示）
Worker 名	vite-flare-starter	wrangler.jsonc
データベース名	vite-flare-starter-db	wrangler.jsonc
R2 バケット	vite-flare-starter-*	wrangler.jsonc

環境変数

ブランディング（VITE_ prefix = フロントエンドで使用可能）

変数	用途	例
VITE_APP_NAME	UI に表示する名前	"My Cool App"
VITE_APP_ID	localStorage の prefix、Sentry	"mycoolapp"
VITE_TOKEN_PREFIX	API トークンの prefix	"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 と本番環境を含めます
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 への参照がない
• ファビコンを差し替えた
• CLAUDE.md を更新した
• .dev.vars がコミットされていない（.gitignore を確認すること）