Astro + Cloudflare Workers で始めるモダン Web 開発

2026.03.01 Posted 2026.03.06 Updated

本記事では、Astro と Cloudflare Workers を組み合わせたモダンな Web サイト構築の手法を紹介します。静的サイト生成と エッジコンピューティング の融合により、高速かつ柔軟なアーキテクチャを実現できます。

はじめに

近年の Web 開発では、パフォーマンスと開発体験の両立が求められています。Astro は Islands Architecture を採用し、必要な部分だけに JavaScript を配信するアプローチを取ります。

技術スタックの概要

Astro の特徴

Astro の最大の特徴は ゼロ JavaScript のデフォルト出力です。コンポーネントはビルド時に HTML へ変換され、クライアントには静的な HTML のみが配信されます。

Islands Architecture によるパーシャルハイドレーション
複数の UI フレームワーク（React, Vue, Svelte）との互換性
Content Collections による型安全なコンテンツ管理
組み込みの画像最適化
- WebP / AVIF 自動変換
- レスポンシブ画像の生成

Cloudflare Workers のメリット

グローバルエッジネットワークによる低レイテンシ
コールドスタートなしの高速な応答
Workers KV / D1 / R2 との統合
無料枠での十分なリクエスト数

プロジェクトのセットアップ

まずは Astro プロジェクトを作成し、Cloudflare アダプターを追加します。パッケージマネージャーには bun を使用します。

# プロジェクト作成
bun create astro@latest my-site

# Cloudflare アダプターの追加
bun add @astrojs/cloudflare

次に、astro.config.mjs を編集します。

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
  output: "server",
  adapter: cloudflare({
    platformProxy: {
      enabled: true,
    },
  }),
});

設定のポイント

output: "server" を指定することで SSR モードが有効になります。platformProxy を有効にすると、ローカル開発時にも Cloudflare のバインディング（KV, D1 など）を利用できます。

デプロイメント

Wrangler による管理

デプロイは wrangler.jsonc で設定を管理し、以下のコマンドで実行します。

{
  "name": "my-site",
  "compatibility_date": "2026-03-06",
  "main": "./dist/_worker.js",
  "assets": {
    "directory": "./dist",
    "binding": "ASSETS"
  }
}

パフォーマンス比較

指標	従来構成	Astro + CF Workers
TTFB	~800ms	~50ms
FCP	~2.1s	~0.6s
JS バンドルサイズ	~180KB	~3KB
Lighthouse スコア	72	98

まとめ

Astro と Cloudflare Workers の組み合わせは、コンテンツファースト な Web サイトにとって理想的な選択肢です。最小限の JavaScript、高速なエッジ配信、そして優れた開発体験を両立できます。

参考リンク

更新履歴

2026.03.06 - 初稿公開