このサイトの技術スタック
Astro、Cloudflare、Drizzle ORM を選んだ理由と、それぞれがどう組み合わさっているか。
概要
このサイトはミニマルなスタックで構成されています。
- Astro — 静的ファーストのフレームワーク。必要な箇所だけ SSR
- Cloudflare Pages + Workers — ホスティングとエッジコンピュート
- Cloudflare D1 — エッジで動く SQLite データベース
- Drizzle ORM — 型安全なデータベースアクセス
- TypeScript — 全体を通して使用
コンポーネントフレームワークなし。CSS ツールチェーンなし。Astro コンポーネント、CSS カスタムプロパティ、Markdown コンテンツだけで構成しています。
なぜ Astro か
このサイトのほとんどのページは静的です。notes も playground もインデックスページも、JavaScript やサーバーサイドレンダリングは不要です。Astro のデフォルトである「クライアントに JS を送らない」という方針がぴったりでした。
サーバーが必要な部分(API エンドポイント、動的ルート)には、ルートごとに SSR をオプトインできます。ひとつの設定、ひとつのフレームワークで両方のモードに対応できます。
Content Collections は型付きフロントマターで Markdown を扱えるため、CMS なしでもコンテンツを構造化できます。
なぜ Cloudflare か
Cloudflare Pages は静的アセットをグローバル CDN にデプロイします。Workers はエッジでサーバーサイドルートを処理します。D1 はインフラ管理なしで SQLite データベースを提供します。
無料枠で個人サイトに必要なものはすべてカバーできます。Pages、Workers、D1 の統合もシームレスで、グルーコードも個別のデプロイ手順も不要です。
なぜ Drizzle か
D1 は SQLite です。Drizzle は SQLite をネイティブにサポートし、スキーマ定義から完全な TypeScript 型推論が得られます。スキーマが唯一の真実の源となり、別途型ファイルやランタイムバリデーション層は不要です。
このサイトの規模では過剰に見えるかもしれませんが、初日から型付きクエリがあることで、データの形状について迷うことがなくなります。
ブランチとデプロイ
リポジトリは2つのブランチを使います。
- develop — 日常の作業用デフォルトブランチ
- main — 本番用。main へのマージで Cloudflare Pages のデプロイが走る
作業中のものを develop に置きつつ、デプロイされたサイトを安定させる構成です。
これから
サイトには現在 notes と play の2セクションがあります。どちらも時間をかけて充実させていきます。コンテンツは英語、日本語、韓国語で、必要に応じて追加します。スタックを意図的にシンプルに保つことで、コンテンツの追加だけがボトルネックになるようにしています。