Claude CodeでCloudflare Pagesに公開する手順ガイド：独自ドメインから運用チェックリストまで

Claude CodeとCloudflare Pagesを組み合わせてできること

Claude Codeに自然言語で指示を出しながらコードを書き、そのままCloudflare Pagesという無料枠のあるホスティングサービスに公開するところまで進められます。「ページを作って公開したい」という一連の作業を、コマンドを一つずつ覚えなくても進められる点が組み合わせの利点です。

Cloudflare Pagesは静的サイト（あらかじめビルドされたHTML・CSS・JavaScriptを配信する形式のサイト）向けのホスティングサービスで、GitHubリポジトリと連携した自動デプロイや、コマンドラインツールからの手動デプロイに対応しています。本記事では、この静的サイトの作成から公開、日常的な更新までを扱います。Workers（サーバー側で動くコードを実行する仕組み）やD1（Cloudflareが提供するデータベース）を使ったフルスタックな構成は範囲外とし、あくまで「まずサイトを一つ、自分の手で公開してみる」ところまでを完了条件にしています。

Claude Code自体の使い方から確認したい場合はClaude Codeとは何か、基本操作を先に押さえたい場合はClaude Codeの使い方ガイドを参照してください。

デプロイ前に準備しておきたいこと

作業を始める前に、Claude Codeの動作環境とCloudflareアカウントの二つを整えておく必要があります。順番に確認していけば準備は完了しますが、所要時間は環境によって異なります。

以下は着手前に確認しておきたい項目です。実際に手を動かしながら、上から順にチェックしてください。

Claude Codeがローカル環境にインストールされ、対話でコード生成やコマンド実行ができる状態になっている
Cloudflareアカウントを作成済みである（メールアドレスがあれば無料で作成できます）
Node.jsなど、公開したいサイトのビルドに必要なランタイムがインストールされている
Wrangler CLI（Cloudflareが提供するコマンドラインツール）を導入するか、GitHub連携でデプロイするかを事前に決めている
Cloudflareのダッシュボードから発行するAPIトークンの権限範囲を、必要最小限に絞って理解している

Claude Codeのインストール手順を先に確認したい場合はClaude Codeのインストールガイドにまとめています。APIトークンは強い権限を持つ認証情報のため、発行後の保管場所や使い回しについては本記事の後半（環境変数の管理）でも触れます。

Claude Codeにどう指示すればサイトが公開されるのか？

「サイトのコードを書いて、Cloudflare Pagesにデプロイして」という趣旨の指示を出すと、Claude Codeがコード生成からビルド確認、デプロイコマンドの実行までを順に進め、最後に公開URLを提示します。

処理の流れはおおむね次のようになります。

作りたいサイトの内容（構成、ページ数、使う技術)をClaude Codeに伝える
Claude Codeがファイルを生成し、ローカルでビルドが通るか確認する
Wrangler CLIまたはGit連携でCloudflare Pagesへのデプロイコマンドを実行する
デプロイが完了すると、Cloudflareが発行する初期URL（xxxx.pages.devのような形式）が提示される

指示を出す前に確認しておくと事故が減るポイント

デプロイコマンドを実行する前に、Claude Codeが提示するファイルの差分（変更内容の一覧）を必ず自分の目で確認してください。意図しないファイルの削除や、機密情報を含むファイルの追加がないかをここで見つけられます。Claude Codeの実行権限をどこまで自動許可するかという考え方はClaude Codeの運用ルールで詳しく扱っています。

デプロイ完了後にまず確認すべきこと

デプロイが終わったら、まず提示された公開URLに実際にアクセスし、想定どおりのページが表示されるかを確認します。表示が崩れている場合や真っ白なページになっている場合は、Cloudflareダッシュボードのビルドログを開き、エラーメッセージが出ていないか目を通しましょう。ビルドログには失敗した工程が明記されるため、原因を絞り込む手がかりになります。

Wrangler CLIとGit連携、どちらを選べばいいのか？

手元のパソコンから都度公開したいならWrangler CLI、GitHubにpushするたびに自動反映させたいならGit連携が向いています。どちらもCloudflare Pagesが公式に用意している方式です。

判断の軸を整理すると次のようになります。無料枠の詳細やプレビューURLの挙動は仕様変更が入ることがあるため、契約前や導入前に最新の内容をCloudflareの公式ドキュメントで確かめておくと安心です。

比較軸	Wrangler CLI	Git連携（GitHub等）
公開のタイミング	コマンドを実行した時点	リポジトリにpushした時点で自動
事前準備	Wranglerのインストールとログイン	GitHubリポジトリとCloudflareの連携設定
向いている使い方	手元で細かく試しながら公開したい場合	チームでの共同作業、履歴を残しながら運用したい場合
プレビュー機能	手動での確認が中心	ブランチごとにプレビューURLが発行される仕組みがある（詳細は公式ドキュメントを参照）

Git連携をさらに発展させ、GitHub Actionsでテストやビルドを自動化したい場合はClaude CodeとGit連携の実務手順、GitHub Actionsによる自動デプロイの設計で権限設計とリスクを扱っています。

独自ドメインとSSLの設定方法

Cloudflareダッシュボードの「カスタムドメイン」設定から、取得済みのドメインをPagesプロジェクトに追加し、案内されるDNSレコードを設定することで独自ドメインに切り替えられます。SSL証明書は多くの場合Cloudflare側で自動的に発行される仕組みになっていますが、発行状況や対応範囲は公式ドキュメントを参照してください。

手順を進める際につまずきやすいのは次の二点です。

一つ目は反映までにある程度の時間がかかることです。DNSレコードやSSL証明書の反映は即座に終わらない場合があるため、設定直後にアクセスできなくても慌てないようにしましょう。反映の目安時間は利用環境や設定内容によって変わるため、時間を置いてから改めてアクセスしてみてください。

二つ目はネームサーバーを変更する場合の影響範囲です。ドメインのネームサーバーそのものをCloudflareに向ける方式を選ぶと、そのドメインで運用している他のサービス（メールなど）にも影響が及ぶ可能性があります。既に別の用途でそのドメインを使っている場合は、変更前にどのレコードが必要かを整理しておくと安全です。

環境変数やAPIキーを安全に管理する方法

APIキーや接続情報などの機密情報は、ソースコードに直接書き込まず、Cloudflare Pagesの環境変数機能を使ってプロジェクト側に登録するのが基本原則です。この原則を守るだけで、リポジトリに機密情報が残ってしまう事故の多くを防げます。

Cloudflareダッシュボードのプロジェクト設定には、環境変数を登録する画面が用意されています。ビルド時にだけ使う変数と実行時に使う変数を区別できる仕組みになっている場合があるため、どちらに登録すべきかは公式ドキュメントの説明を踏まえて判断してください。

Claude Codeに指示を出す際は、APIキーそのものをチャット内に貼り付けて「これを使って」と伝えるのは避けるべきです。会話ログや生成されるファイルに機密情報がそのまま残る可能性があるため、環境変数名だけを伝え、実際の値はCloudflare側の設定画面やローカルの.envファイル（Gitの管理対象から除外したファイル）に保管する運用が安全です。より踏み込んだセキュリティの考え方はClaude Codeのエンタープライズセキュリティガイド、日々の判断軸はClaude Codeの運用ルールで扱っています。

サイト更新時の基本フロー（正常時の運用手順）

想定どおりに動いている前提での日常的な更新は、コードを修正してClaude Codeに指示を出し、再度デプロイするだけの単純な繰り返しです。ここではトラブル対応ではなく、正常に進む場合の作業手順だけを扱います。

典型的な流れは次のとおりです。

変更したい内容をClaude Codeに自然言語で伝える
生成・修正されたファイルの差分を確認する
Wrangler CLIで手動デプロイするか、Git連携であれば変更をコミットしてpushする
公開されたURLにアクセスして表示を確かめる

Gitでのコミット管理やプルリクエストの運用と組み合わせたい場合は、Claude CodeとGit連携の実務手順で更新履歴の残し方を確認できます。

公開後によくあるトラブルの切り分け方（異常時のトラブルシューティング）

「更新したのに反映されない」「404になる」「SSLエラーが出る」といった事象は、原因ごとに切り分けて対処すれば落ち着いて解決できます。ここまでは正常に動作している前提の手順でしたが、この節は想定外の事象が起きたときの原因診断に絞って扱います。

原因はおおむね次のいずれかに分類できます。

更新が反映されない: ブラウザ側のキャッシュが残っている可能性があります。強制再読み込みを試し、それでも変わらない場合はCloudflareダッシュボードで実際にデプロイが完了しているかどうかをチェックしてください。
404エラーが出る: ビルドが正しく完了していない、もしくは公開対象のディレクトリ設定が誤っている可能性があります。ビルドログを開き、エラーで止まっている工程がないか探してみましょう。
SSLエラーが出る: 独自ドメインを設定した直後は証明書の発行が完了していない場合があります。設定直後であれば時間を置いてから改めてアクセスし、時間が経っても解消しない場合はDNSレコードの設定内容を見直してください。

いずれの場合も、まずCloudflareダッシュボードのビルドログとデプロイ履歴を確認することが、原因を絞り込む最初の一歩になります。

まとめ

ここまでの手順で、Claude Codeへの指示からCloudflare Pagesへの公開、独自ドメインの設定、環境変数の管理、日常的な更新とトラブル対応までを一通り自分の手で進められる状態になったはずです。

静的サイトの公開を超えて、APIやデータベースを組み合わせた構成に発展させたくなった場合は、Workers やD1といった発展的な仕組みも用意されています。一人での個人開発を超えて、チームで運用ルールを整えたい場合はClaude Codeの運用ルールが参考になります。また、体系的に学び直したい、あるいは研修の導入を検討したいと感じた場合は、研修の選び方からトレーニングのご案内へ進んでみてください。