メインコンテンツへスキップ
7 約12分で読める

デプロイしよう

無料で公開する方法（Cloudflare Pages・Vercel・Netlify）と CI/CD の基本を解説。

このステップで学ぶこと

  • 静的サイトを無料でデプロイできる
  • Cloudflare Pages へのデプロイ手順を理解する
  • GitHub Actions による自動デプロイを設定できる
  • プレビューデプロイを活用できる

ホスティングサービスの比較

サービス無料枠強み弱み
Cloudflare Pages無制限（帯域・リクエスト）CDN最速、無料枠が最大設定がやや複雑
Vercel100GB/月Next.js 親和性最高商用利用は要課金
Netlify100GB/月フォーム機能が便利速度はやや劣る
GitHub Pages1GB完全無料、GitHub連携動的機能なし

Cloudflare Pages へのデプロイ（推奨）

手動デプロイ（まず試す）

# 1. ビルド
pnpm build

# 2. Wrangler CLI でデプロイ
npx wrangler pages deploy dist --project-name=my-project

初回は Cloudflare アカウントへのログインが求められます。

GitHub Actions による自動デプロイ

以下のファイルをプロジェクトルートに作成:

# .github/workflows/deploy.yml
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        with:
          version: latest

      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm

      - run: pnpm install --frozen-lockfile

      - run: pnpm build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=my-project

GitHub Secrets の設定

  1. Cloudflare ダッシュボードで API トークンを発行
    • 「マイプロフィール」→「APIトークン」→「Cloudflare Pages 編集」
  2. GitHub リポジトリの「Settings」→「Secrets」→「New repository secret」
    • CLOUDFLARE_API_TOKEN: 発行したトークン
    • CLOUDFLARE_ACCOUNT_ID: Cloudflare のアカウントID

プレビューデプロイの設定

Pull Request ごとにプレビュー URL が自動生成されます。Cloudflare Pages はデフォルトでこの機能が有効です。

独自ドメインの設定

Cloudflare Pages の場合:

  1. ダッシュボード → プロジェクト → 「カスタムドメイン」
  2. ドメインを入力して追加
  3. DNS レコードが自動設定される

よくある問題

ビルドが失敗する ローカルで pnpm build を実行して、エラーがないか確認します。

ページが真っ白になる ブラウザの Console でエラーを確認します。

フォントが読み込まれない Content Security Policy (CSP) の設定を確認します。

→ ステップ8: 次のステップへ