🚀

React Router + Cloudflare + Better Auth フルスタックボイラープレートの紹介

に公開
Cloudflare
Vite
React Router
Better Auth
drizze
tech

はじめに

React RouterとCloudflare（Pages, Workers, D1）を組み合わせた、フルスタックアプリケーションのボイラープレートを作成したので紹介します。

https://github.com/atman-33/react-router-cloudflare-boilerplate/tree/v1.0.0

開発体験とパフォーマンスを両立させることを目指し、Drizzle ORM、better-auth、shadcn/uiといったモダンな技術スタックを採用しています。

想定する読者

  • ReactとCloudflareを使った開発に興味がある方
  • モダンなフロントエンド・バックエンドの構成で素早く開発を始めたい方
  • フルスタックTypeScript開発のテンプレートを探している方

このリポジトリの特徴・技術スタック

Cloudflareに最適化された構成

  • Cloudflare PagesとWorkersを組み合わせ、エッジでの高速な動作を実現します。
  • データベースにはCloudflare D1を採用し、Drizzle ORMを介して型安全にデータを操作できます。

React Router v7によるルーティング

  • ファイルシステムベースのルーティング (@react-router/fs-routes) を採用していて、app/routesディレクトリの構造がそのままURLに対応するため、直感的な開発が可能です。
  • データローディングやmutationといった、React Routerのパワフルな機能を活用できます。

すぐに使える認証機能

  • 認証ライブラリとしてbetter-authを導入済みで、デフォルトでGitHub OAuth認証が設定されています。
  • 設定ファイル（auth.server.ts）を修正することで、Googleなど他のプロバイダーにも容易に拡張できます。

モダンなUI/開発ツール

  • UI: Tailwind CSSとshadcn/uiを採用し、効率的でモダンなコンポーネントベースのUI開発が可能です。
  • ビルドツール: Viteにより、高速な開発サーバー（HMR）と最適化されたビルド環境を提供します。
  • コード品質: BiomeによるフォーマットとLint、TypeScriptによる型チェックで、コードの品質を維持します。
  • テスト: Vitestによるテスト環境が構築されています。

使い方ガイド

1. セットアップ

リポジトリをクローンし、依存関係をインストールします。

git clone https://github.com/atman-33/react-router-cloudflare-boilerplate.git
cd react-router-cloudflare-boilerplate
npm install

次に、環境変数を設定します。.env.exampleをコピーして、.dev.vars（ローカル開発用）と.env（Drizzle Kitなどのスクリプト用）の2つのファイルを作成し、必要な情報を追記してください。特にGitHubのOAuth設定が必要です。

cp .env.example .dev.vars
cp .env.example .env
.env.exampl
# Copy this file as .env and .dev.vars, then fill in the values.

# Cloudflare
CLOUDFLARE_D1_ID=""
CLOUDFLARE_ACCOUNT_ID=""
CLOUDFLARE_TOKEN=""

# Better Auth
# This should be a long, random string. Use `openssl rand -hex 32` to generate one.
BETTER_AUTH_SECRET=""
BETTER_AUTH_URL="http://localhost:5173"
OAUTH_GITHUB_CLIENT_ID=""
OAUTH_GITHUB_CLIENT_SECRET=""

各環境変数の値取得は、下記の記事が参考になります。

https://zenn.dev/ramo798/articles/2a0c5e997da019

https://qiita.com/KaitoMuraoka/items/94d6c227a0abb5bfcc57

https://www.better-auth.com/docs/concepts/oauth

redirectURI Custom redirect URI for the provider. By default, it uses /api/auth/callback/${providerName}.

2. データベースのマイグレーション

ローカルのD1データベースに対して、テーブルを作成します。

# better-auth用のスキーマを生成
npm run auth:db:generate

# アプリケーションのスキーマをマイグレーション
npm run db:migrate

3. 開発サーバーの起動

以下のコマンドで開発サーバーを起動します。

npm run dev

http://localhost:5173 でアプリケーションにアクセスできます。

デモ画面

http://localhost:5173/

image

適当な名前とEメールを入力して「Sign Guest Book」ボタンをクリックするとD1にデータ保存されます。

http://localhost:5173/demo/auth

image

「Login with GitHub」ボタンから OAuth 認証できます。認証後、このページを開くとログイン情報を閲覧できます。

4. デプロイ

アプリケーションのデプロイは、Wrangler CLIを通じて行います。

まず、Cloudflare上で本番用のD1データベースを作成します。

npx wrangler d1 create <your-database-name>

次に、wrangler.jsoncに、作成したデータベースのdatabase_nameとdatabase_idを追記します。

wrangler.jsonc
"d1_databases": [
  {
    "binding": "DB",
    "database_name": "<your-database-name>",
    "database_id": "<your-database-id>"
  }
]

カスタムドメインを指定する場合は、下記を変更します。

wrangler.jsonc
  "routes": [
    {
      "pattern": "<your-custom-domain>",
      "custom_domain": true
    }
  ],

本番用のデータベースにマイグレーションを実行します。

npm run db:migrate-production

最後に、以下のコマンドでCloudflareにデプロイします。

npm run deploy

まとめ

このボイラープレートであれば、React RouterとCloudflareをベースにしたモダンなフルスタックアプリケーション開発を、面倒な初期設定なしにすぐに始めることができると思います。

実装方法も参考になると思いますので、よろしければご参考ください！

Discussion