Astro × Cloudflare Pages で爆速デプロイする方法

はじめに

Astro で構築したサイトを公開するなら、Cloudflare Pages が最適です。グローバル CDN が無料で使え、デプロイも数コマンドで完了します。

この記事では、2つのデプロイ方法を解説します。

方法メリット向いている場面
CLI 直接デプロイすぐに公開できる。GitHub 不要検証・プロトタイプ
GitHub 連携push するだけで自動デプロイ本番運用

前提条件

方法 1: CLI で直接デプロイ

GitHub リポジトリがなくても、ローカルからすぐにデプロイできます。

1. Wrangler をインストール

Wrangler は Cloudflare の公式 CLI ツールです。

npm install -D wrangler

2. Cloudflare にログイン

npx wrangler login

ブラウザが開くので、Cloudflare アカウントで認証します。

3. プロジェクトを作成

npx wrangler pages project create my-site --production-branch=main

my-site の部分はプロジェクト名です。https://my-site.pages.dev という URL で公開されます。

4. ビルドしてデプロイ

npm run build
npx wrangler pages deploy dist --project-name=my-site

これだけです。数秒で世界中の CDN エッジサーバーから配信されます。

2回目以降は npm run build && npx wrangler pages deploy dist --project-name=my-site の1行だけで更新できます。

方法 2: GitHub 連携で自動デプロイ

本番運用では、GitHub に push するだけで自動デプロイされる仕組みが便利です。

1. GitHub リポジトリを作成

git init
git add -A
git commit -m "Initial commit"

GitHub 上でリポジトリを作成し、push します。

2. Cloudflare Pages でプロジェクト作成

  1. Cloudflare Dashboard にログイン
  2. Workers & Pages → Create → Pages → Connect to Git
  3. GitHub アカウントを連携し、リポジトリを選択

3. ビルド設定

項目値
Framework presetAstro
Build commandnpm run build
Build output directorydist

環境変数に NODE_VERSION = 22 を追加してください。

4. デプロイ

Save and Deploy をクリックすると、初回ビルドが始まります。以降は main ブランチに push するだけで自動デプロイされます。

デプロイ後の設定

カスタムドメインの設定

Cloudflare Dashboard → Pages → プロジェクト → Custom domains からドメインを追加できます。SSL 証明書も自動で設定されます。

astro.config.mjs の更新

デプロイ後、site をデプロイ先の URL に更新してください。

export default defineConfig({
  site: 'https://your-domain.com',
});

この設定は canonical URL、sitemap、OGP の URL 生成に使われます。

robots.txt の更新

public/robots.txt の Sitemap URL も合わせて更新します。

User-agent: *
Allow: /

Sitemap: https://your-domain.com/sitemap-index.xml

Cloudflare Pages の無料枠

項目無料枠
デプロイ回数月500回
帯域幅無制限
サイト数無制限
カスタムドメイン無制限
SSL自動・無料

個人サイトやスタートアップのオウンドメディアなら、無料枠で十分運用できます。

まとめ

Astro と Cloudflare Pages の組み合わせは、コンテンツサイトのデプロイ環境として最適です。

← 記事一覧に戻る