Cloudflare Workersデプロイ入門 — 無料でWebアプリを世界に公開する

個人開発の公開先として最有力のCloudflare Workers。アカウント作成からデプロイ、独自ドメイン設定までの手順です。

なぜCloudflare Workersなのか

無料枠が1日10万リクエストと巨大で、世界300拠点のエッジから配信されるため速く、クレジットカード登録なしで始められます。個人開発の「まず公開する」に最適な選択肢です。

手順1: アカウントとCLI

# Wrangler(公式CLI)のインストール
npm install -g wrangler

# ブラウザが開いてログイン
wrangler login

手順2: プロジェクトの作成とデプロイ

新規に始める場合はテンプレートから:

npm create cloudflare@latest my-app
cd my-app
npm run deploy

これだけで my-app.あなたのサブドメイン.workers.dev に公開されます。既存のAstro/Next.jsプロジェクトの場合は、各フレームワークのCloudflareアダプタを追加してから wrangler deploy します。

手順3: GitHub連携で自動デプロイ

手動デプロイは忘れるので、GitHubにpushしたら自動で反映される形にします。GitHub Actionsに以下を置くだけです:

# .github/workflows/deploy.yml
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

APIトークンはCloudflareダッシュボード→プロフィール→API Tokensで「Edit Cloudflare Workers」テンプレートから作成し、GitHubリポジトリのSecretsに登録します。

手順4: 独自ドメイン

Cloudflareの「ドメイン登録」で購入すると原価販売で最安クラス、しかもWorkersへの紐付けが2クリックで完了します。Workers & Pages → プロジェクト → 設定 → ドメインとルート → カスタムドメイン追加、で完了です。

つまずきポイント

ビルド出力に _worker.js が含まれる構成では、公開ディレクトリに .assetsignore ファイル(中身: _worker.js)を置かないとデプロイが拒否されます
環境変数は wrangler.jsonc の vars(公開可のもの)か wrangler secret put(秘密のもの)で設定します