Cloudflare Pagesで静的サイトを爆速デプロイする方法

はじめに

Cloudflare Pagesは、静的サイトを無料でホスティングできる優れたサービスです。GitHubリポジトリと連携することで、プッシュするだけで自動デプロイが可能になります。この記事では、その設定方法を詳しく解説します。

Cloudflare Pagesの特徴

  • 無料プラン：個人プロジェクトなら十分な機能
  • 高速配信：世界中のエッジネットワークから配信
  • 自動デプロイ：GitHubへのプッシュで自動的にビルド＆デプロイ
  • プレビュー環境：プルリクエストごとにプレビューURLを自動生成

デプロイ手順

1. GitHubリポジトリの準備

まず、プロジェクトをGitHubにプッシュします：

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

2. Cloudflare Pagesの設定

  1. Cloudflare Dashboardにログイン
  2. 左サイドバーから「Pages」を選択
  3. 「Create a project」をクリック
  4. 「Connect to Git」でGitHubアカウントを連携
  5. デプロイしたいリポジトリを選択

3. ビルド設定

フレームワークに応じて、以下のように設定します：

Next.js:

  • Framework preset: Next.js
  • Build command: npm run build
  • Build output directory: out

Astro:

  • Framework preset: Astro
  • Build command: npm run build
  • Build output directory: dist

Vite:

  • Framework preset: Vite
  • Build command: npm run build
  • Build output directory: dist

4. 環境変数の設定

必要に応じて、Settings > Environment variablesから環境変数を追加できます。

カスタムドメインの設定

  1. Pagesプロジェクトの「Custom domains」タブを開く
  2. 「Set up a custom domain」をクリック
  3. ドメイン名を入力（例：blog.example.com）
  4. DNSレコードを設定（Cloudflareが自動で設定を推奨）

まとめ

Cloudflare Pagesを使えば、数分で静的サイトを世界中に配信できます。GitHubとの連携により、開発体験も大幅に向上します。無料プランでも十分な機能があるので、ぜひ試してみてください！