このサイトの技術スタック

Astro、Cloudflare、Drizzle ORM を選んだ理由と、それぞれがどう組み合わさっているか。

astrocloudflaremeta

概要

このサイトはミニマルなスタックで構成されています。

  • 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セクションがあります。どちらも時間をかけて充実させていきます。コンテンツは英語、日本語、韓国語で、必要に応じて追加します。スタックを意図的にシンプルに保つことで、コンテンツの追加だけがボトルネックになるようにしています。

← Back to Notes