IVYXON
記事一覧に戻る
ワークフロー中級🧪 Recipe

「Cloudflare Pagesに手動デプロイして」←どうやるんだっけ?

Claude Codeに静的サイトをCloudflare Pagesへデプロイさせる方法を実践形式で解説するよ。

2026年6月1日5分で読めます

Cloudflare Pagesに静的サイトをデプロイするのって、Git連携が主流だよね。でも、「ちょっと手動でサッとデプロイしたい」「CI/CD組むほどじゃないけど更新したい」って時、Claude Codeに頼むのがめっちゃ楽だよ。

今回は、Git連携なしでClaude Codeにデプロイ作業を丸投げする実践的な方法を紹介するね。

一番雑な投げ方

まずはこれ。手元の静的サイトをCloudflare PagesにデプロイするためのコマンドをClaude Codeに教えてもらうんだ。

手元にある静的サイトをCloudflare Pagesにデプロイするコマンドを教えて。

これだけで動く。Claude Codeは wrangler pages deploy コマンドと、wrangler CLIのインストール、認証方法まで教えてくれるはずだよ。

もうちょい具体的に投げるパターン

デプロイ対象のディレクトリやプロジェクト名を指定したい時もあるよね。そんな時は、以下みたいに指示を追加するんだ。

プロジェクト名を指定してデプロイしたい時

今のディレクトリの中身を Cloudflare Pages にデプロイして。プロジェクト名は `my-awesome-site` でお願い。

これで、wrangler pages deploy . --project-name=my-awesome-site みたいなコマンドが出てくるよ。

特定のディレクトリをデプロイして、ブランチ名も指定したい時

Git連携なしでデプロイする場合、Cloudflare Pagesのダッシュボード上での表示のためにブランチ名を指定しておくのがおすすめだよ。

`./dist` ディレクトリの中身を Cloudflare Pages にデプロイして。
Git連携は使わないから、ブランチ名は `production` にしといてほしい。プロジェクト名は `my-static-blog` で。

すると、wrangler pages deploy ./dist --project-name=my-static-blog --branch=production のようなコマンドを提案してくれるはず。これでデプロイ作業が一発だよ。

実践例 / 実録

実際にIVYXONのコーポレートサイトをCloudflare Pagesにデプロイした時の話だよ。このサイトは site/ ディレクトリの中にHTMLやCSSが入ってるんだ。

実際にClaude Codeに投げたプロンプト

こんな感じで具体的にデプロイしたい内容と、カスタムドメインの設定までお願いしたよ。

今のディレクトリの 'site' フォルダの中身をCloudflare Pagesにデプロイして。
プロジェクト名は 'ivyxon'、ブランチ名は 'main' に設定してほしい。
あと、デプロイ後に `ivyxon.com` と `www.ivyxon.com` をこのPagesプロジェクトに紐付ける手順も教えて。

投げたらこうなった

Claude Codeはまず、デプロイコマンドを教えてくれたよ。

cd site && wrangler pages deploy . --project-name=ivyxon --branch=main

このコマンドをターミナルで実行する前に、wrangler CLIがインストールされてるか確認してね。もし入ってなかったら、npm install -g wrangler でインストールして、wrangler login でCloudflareアカウントと連携しとこう。

コマンドを実行すると、ターミナルでデプロイの進捗が表示されて、最終的に https://ivyxon.pages.dev のようなURLが出力されたよ。やったね、これでサイトが公開されたんだ。

次に、カスタムドメインの紐付け。Claude Codeは以下のような手順を教えてくれたよ。

  1. Cloudflareのダッシュボードにログインして、「Pages」セクションに移動する。
  2. デプロイした ivyxon プロジェクトをクリックする。
  3. 「Custom Domains」タブを選択する。
  4. 「Set up a custom domain」ボタンをクリックして、ivyxon.com を入力し、手順に従ってDNSレコードを設定する。通常、CNAMEレコードが自動で追加されるか、手動で追加するように指示されるよ。
  5. www.ivyxon.com も同様に追加する。

この手順通りにダッシュボードで設定したら、無事に ivyxon.com からサイトにアクセスできるようになったんだ。数分で反映されたから、待ち時間もほとんどなかったよ。

つまずきポイント

wrangler コマンドが見つからない」って言われたら

これは wrangler CLIがインストールされてない証拠だよ。

npm install -g wrangler

これでグローバルにインストールできるから試してみてね。

「まだログインしてないよ」ってエラーが出たら

wrangler CLIを使うには、Cloudflareアカウントと認証する必要があるんだ。

wrangler login

これを実行するとブラウザが開いて、Cloudflareにログインするように促されるよ。ログインすればOK。

「デプロイ対象のファイルが見つからない」って言われたら

これは wrangler pages deploy を実行するディレクトリを間違えてる可能性が高いよ。ちゃんと静的ファイルが入ってるディレクトリに cd してからコマンドを打つか、プロンプトで --dist オプションなどで正しいパスを指定してみてね。

cd site && wrangler pages deploy . のように、先に正しいディレクトリに移動してから . (カレントディレクトリ)をデプロイ対象にするのが確実だよ。