Skip to content

cloudflare-workers-deploy.md

Latest commit

 

History

History
146 lines (100 loc) · 4.56 KB

cloudflare-workers-deploy.md

File metadata and controls

146 lines (100 loc) · 4.56 KB

Cloudflare Workers デプロイ手順

Next.js アプリを @opennextjs/cloudflare + wrangler で Cloudflare Workers にデプロイする手順。

なぜ Cloudflare Workers？

  • Next.js は本来 Node.js サーバーで動く → Vercel 以外だとそのままデプロイできない
  • Cloudflare Workers は V8エンジン（ブラウザと同じ）で動く軽量サーバーレス環境
  • @opennextjs/cloudflare が「Next.js → Workers」の変換を担当する

前提条件

  • Cloudflare アカウント（Free プランでOK）
  • WSL2 + Ubuntu（Windows からのデプロイに必要）
  • Node.js 22（WSL 内に nvm 経由でインストール）

なぜ WSL が必要か： wrangler が WASM ファイルを resvg.wasm?module という名前で一時保存するが、Windows ではファイル名に ? が使えないためデプロイが失敗する。WSL（Linux）なら ? が使えるので問題なし。

初回セットアップ

1. WSL + Ubuntu インストール

PowerShell で実行：

wsl --install -d Ubuntu

ユーザー名・パスワードを設定。再起動が必要な場合あり。

2. WSL 権限設定

WSL 内で /etc/wsl.conf を作成：

sudo nano /etc/wsl.conf

以下を入力して保存（Ctrl+O → Enter → Ctrl+X）：

[automount]
enabled = true
options = "metadata,umask=22,fmask=111"

PowerShell で WSL を再起動：

wsl --shutdown
wsl

3. Node.js インストール（WSL 内）

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
source ~/.bashrc
nvm install 22

4. wrangler ログイン（WSL 内）

cd /mnt/c/<プロジェクトへのパス>
npm install
npx wrangler login

ブラウザが開く → Cloudflare にログイン → 「Allow」で認可。

デプロイの仕組み

Next.js アプリ
    ↓  opennextjs-cloudflare build
Workers 用ファイル（.open-next/）
    ↓  wrangler deploy
Cloudflare Workers（エッジサーバー）
  1. @opennextjs/cloudflare が Next.js のビルド結果を Cloudflare Workers で動く形 に変換する
  2. wrangler がそれを Cloudflare にアップロードする

カスタムドメイン設定

  1. Cloudflare ダッシュボード → Workers & Pages → 対象アプリ
  2. Settings → Domains & Routes
  3. Add → Custom domain
  4. ドメインを入力 → Add
  5. DNS レコードが自動作成される
  6. SSL 証明書も自動で発行される（数分かかる場合あり）

www リダイレクト

www.example.com → example.com にリダイレクトしたい場合：

  1. Cloudflare ダッシュボード → ドメインのゾーン → DNS
  2. CNAME レコードを追加：www → <アプリ名>.<サブドメイン>.workers.dev（サブドメインはダッシュボードの Workers & Pages → Overview で確認）
  3. Rules → Redirect Rules → ルール追加：
    • If: ホスト名 = www.example.com
    • Then: 301リダイレクト → https://example.com${http.request.uri.path}

トラブルシューティング

WSL で EPERM エラー

Error: EPERM, Operation not permitted '.open-next/.build'

→ .open-next/ を削除してリトライ：rm -rf .open-next && npm run cf:deploy → /etc/wsl.conf の metadata 設定が入っているか確認。

wrangler login でブラウザが開かない

WSL からブラウザが開けない場合は、ターミナルに表示される URL を手動でブラウザに貼ってログインする。

または API トークンを使う方法：

export CLOUDFLARE_API_TOKEN="トークン"

トークンは Cloudflare ダッシュボード → My Profile → API Tokens で作成できる。

SSL 証明書が発行されない

→ 数分〜最大24時間かかる場合がある。ダッシュボードの SSL/TLS → Edge Certificates で状態を確認。

DNS の反映が遅い

→ Cloudflare Registrar で買ったドメインは DNS が Cloudflare に向いているので通常は数分で反映。外部レジストラの場合は NS レコードの変更が必要で最大48時間かかることがある。

参考リンク