AstroをCloudflareにデプロイ：SSR設定＋国内アクセス3倍高速化ガイド

はじめに

先日、友人のAstroブログ移行を手伝っていた時のことです。Cloudflare Pagesにデプロイし、海外からのアクセスは爆速で感動しました。しかし、アジア圏の友人から「表示に5秒かかるんだけど…」という連絡が。

Cloudflareは世界最強のCDNのはずですが、一部地域（特に中国や、ネットワーク経路によっては日本国内の一部プロバイダ）からのアクセスでは、ルーティングの関係で遅延が発生することがあります。「優選IP（Optimized IP）」という言葉を聞いたことがあるかもしれませんが、具体的にどう設定するのか、リスクはないのか、気になりますよね。

この記事では、AstroプロジェクトをCloudflareにデプロイする基礎から、SSR（サーバーサイドレンダリング）の正しい設定方法、そしてアクセス速度を劇的に改善する裏技的な最適化手法までを網羅します。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

この記事で得られるもの：

• 20分でゼロからデプロイまで完了する手順
• もう迷わないSSRアダプターのモード選択（Hybrid vs Server）
• 国内からのアクセス遅延を3倍改善する3つの手法

なぜ Vercel ではなく Cloudflare Pages なのか

無料ホスティングの頂上決戦

よく聞かれる質問です。「VercelとCloudflare、どっちがいいの？」
結論から言えば、「帯域幅（転送量）」を気にするならCloudflare一択です。

Vercel (Hobbyプラン):

• 帯域幅：100GB/月
• 超過時：アカウント停止の恐れや、Proプランへの移行が必要
• 強み：Next.jsとの親和性、ビルドキャッシュが優秀（2回目以降速い）

Cloudflare Pages (Freeプラン):

• 帯域幅：無制限
• 超過時：なし（常識的な範囲内で）
• 強み：世界300+のデータセンター、DDoS保護標準搭載

個人ブログがある日突然バズって（Hacker Newsに載るなど）、数TBのトラフィックが発生しても、Cloudflareなら請求書に怯える必要はありません。これが私が個人開発者にCloudflareを勧める最大の理由です。

推奨の使い分け：

• Astroブログ / 静的サイト → Cloudflare Pages（コストパフォーマンス最強）
• Next.jsアプリ / 頻繁なビルド → Vercel（開発体験とビルド速度が優秀）

Pages vs Workers：どっちにデプロイする？

Cloudflareには「Pages」と「Workers」がありますが、Astroの場合はどうすべきでしょうか。

• Cloudflare Pages：Git連携があり、プッシュするだけでビルド・デプロイされる。基本はこれを選べばOK。
• Cloudflare Workers：より低レイヤーで、CLI（Wrangler）を使ってデプロイする。細かい制御が可能だが手間がかかる。

2025年現在、Cloudflare公式はWorkersへの統合を進めていますが、ブログ用途ならPagesのGit連携が最も手軽で確実です。

デプロイ実践ガイド

静的サイトのデプロイ（所要時間：5分）

Astroプロジェクトが純粋な静的サイト（output: 'static'）の場合、手順は拍子抜けするほど簡単です。

前提：GitHubにコードがプッシュされていること。

1. Cloudflare Dashboardへアクセス：左メニューの「Workers & Pages」を開く。
2. アプリケーション作成：「Create application」→「Pages」→「Connect to Git」を選択。
3. リポジトリ選択：対象のAstroプロジェクトを選択。
4. ビルド設定：
   • Framework preset: Astro を選択（自動入力されます）。
   • Build command: npm run build
   • Build output directory: dist
5. デプロイ：「Save and Deploy」をクリック。

これだけです。数分待てば your-project.pages.dev というURLでサイトが公開されます。

よくあるトラブル：

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

• Node.jsバージョンエラー：ルートに .nvmrc ファイル（中身は 20 など）を置くか、環境変数 NODE_VERSION を設定してください。
• 404エラー：出力ディレクトリが dist になっているか確認してください。

SSR対応：Cloudflareアダプターの設定

動的な機能（ログイン、APIルート、動的レンダリング）が必要な場合は、SSRアダプターの設定が必要です。

Step 1: アダプターのインストール

npx astro add cloudflare

このコマンドが自動的に astro.config.mjs を書き換えてくれます。

Step 2: レンダリングモードの選択（超重要）

astro.config.mjs の output 設定には3つのモードがあります。

1. output: 'server' (SSR)
   • 全ページをサーバー（エッジ）でレンダリングします。
   • 用途：完全動的なアプリ。
2. output: 'hybrid' (ハイブリッド - 推奨)
   • デフォルトは静的（SSG）、指定したページだけ動的（SSR）にします。
   • 用途：ブログだけど「検索API」や「いいねボタン」だけ動的にしたい場合。これがベストプラクティスです。
3. output: 'static' (静的)
   • アダプター不要の純粋なHTML生成。

設定例（Hybridモード）:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'hybrid', // ハイブリッドモード
  adapter: cloudflare(),
});

動的にしたいAPIルートやページには、個別で export const prerender = false; を書きます。

// src/pages/api/like.js
export const prerender = false; // ここだけ動的に実行される

export async function GET() {
  // DB更新などの処理
  return new Response(JSON.stringify({ success: true }));
}

これで、「ブログ記事は爆速（静的HTML）」＋「機能はリッチ（動的処理）」の一挙両得が実現します。

環境変数の管理

APIキーなどの秘密情報は、絶対にGitHubにコミットしないでください。

ローカル開発時:
.dev.vars ファイルを作成します（.gitignoreに登録必須）。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

API_KEY=secret_value_here

本番環境:
Cloudflare Dashboardの「Settings」→「Environment Variables」で設定します。
クライアントサイドで使う変数以外は PUBLIC_ をつけないのが基本ですが、Astroの場合は import.meta.env でアクセスします。

SSRでの環境変数アクセス:
アダプターを使う場合、Astro.locals 経由でCloudflareの環境変数（KVやR2のバインディング含む）にアクセスします。

const { env } = Astro.locals.runtime;
const apiKey = env.API_KEY;

国内アクセス高速化の裏技

ここからが本題です。Cloudflareはグローバルでは速いですが、特定の国内ネットワークからはルーティングが悪く、遅いことがあります。これを改善する3つの方法を紹介します。

速度診断：まずは現状把握

最適化する前に、本当に遅いのか確認しましょう。
17ce.com などのサイト測速ツールでブログのURLをテストします。

• 緑色（< 200ms）：問題なし。最適化不要。
• 赤色（> 500ms / タイムアウト）：最適化推奨。

方法1：優選IP（自己責任・効果大）

Cloudflareの膨大なIPアドレスの中で、国内からの接続性が良い「当たりIP（優選IP）」が存在します。これを見つけ出し、DNSのAレコードに直接設定する方法です。

手順:

1. CloudflareSpeedTest などのツールを使って、自分の環境から最速のCloudflare IPを探す。
2. DNSプロバイダ（Cloudflare以外である必要あり、例：お名前.com、Route53など）で、ドメインのAレコードをそのIPに向け直す。

メリット：劇的に速くなる（遅延が数百分の一になることも）。
リスク：Cloudflareの仕様変更で使えなくなる可能性がある。IPが変わる可能性があるため定期的なメンテが必要。
推奨度：個人ブログならOKだが、商用サイトには非推奨。

方法2：CNAME最適化（安定的・推奨）

有志や専門業者がメンテナンスしている「最適化されたCNAMEドメイン」を経由する方法です。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

手順:

1. CloudflareのDNS設定ではなく、外部DNSを使用する。
2. CNAMEレコードとして、提供されている最適化ドメイン（例: cdn.cloudflare.quest など、信頼できるものを探す）を設定する。

これは優選IPを自動で追いかけてくれるサービスを利用するイメージです。IP直書きより管理が楽です。

方法3：SaaS型GeoDNS分流（プロ向け）

DNSプロバイダの機能を使って、アクセス元に応じて解析先を変える方法です。

• 海外からのアクセス → Cloudflareの正規CNAMEへ（デフォルト）
• 国内からのアクセス → 独自の国内CDNや、特定の優選IPへ

これはコストがかかる場合が多いですが、最も確実で安全です。

私の結論

個人のテックブログ程度であれば、デフォルトのままで十分なことがほとんどです。Cloudflareのネットワークは年々改善されています。
どうしても遅い場合のみ、**「DNSをCloudflareから他社（Route53等）に移し、信頼できるCNAME最適化サービスを使う」**のがバランスの良い選択肢です。IP直書きは管理コストが高すぎます。

まとめ

AstroとCloudflare Pagesの組み合わせは、現時点で最強の無料ブログホスティング環境と言っても過言ではありません。

• 手軽さ：Git Pushで自動デプロイ。
• コスト：帯域無制限で無料。
• 性能：静的HTML配信＋必要な部分だけSSR（Hybridモード）。
• 拡張性：KV、D1（DB）、R2（ストレージ）などのエッジ機能も統合可能。

まだVercelの帯域制限に怯えていますか？ 今すぐCloudflare Pagesに移行して、真の自由を手に入れましょう。

5 min read · 公開日: 2025年12月3日 · 更新日: 2026年1月22日

Easton

技術開発