Setup Guide · Advanced
アカウントを揃えるだけでは動かない。ローカルに何を入れるか、シークレットをどう扱うか、 pushが本当に本番へ出るのか、失敗したらどう戻すか——実際につまずくのはこのあたりになる。
← 環境構築編トップに戻るここに独自ドメインは含めていない。最初の公開体験を優先するなら、仮URLで動かしてから検討すればよい。
公開体験としては手軽だが、仮URLでもクロール・インデックスの対象になり、人に見せるつもりのなかったページが検索結果に出てしまう事例がある。試作段階で外部に見せたくないなら、後述の Cloudflare Access でアクセスそのものを制限する。
<meta name="robots" content="noindex"> は検索結果への掲載を抑える補助でしかなく、アクセス制御ではない。URLを知っている人は誰でも中身を見られるままなので、秘密を守る手段として使わないこと。
アカウントを作った後、多くの人はここで止まる。次に何を入れればいいか分からないからだ。最初から全部理解する必要はなく、Claude Codeに聞きながら1つずつ入れればよい。
npm install -g @anthropic-ai/claude-code で導入xcode-select --install で付属のものが入るgh） — ブラウザに行き来せずにGitHub認証・リポジトリ作成ができる「GitHubにpush」の前に、認証という難所がある。
gh auth login を実行し、画面の指示に従う（SSHかHTTPSかを選ぶ場面がある。迷ったらHTTPSでよい）。あわせてGitHubの2段階認証を有効化し、表示されるリカバリーコードはパスワードマネージャーに保存しておく。
Claude Codeに「GitHubリポジトリを作ってpushして」と頼めば、gh repo create 相当の操作から行ってくれる。
Cloudflareダッシュボードで Pages（または Workers Builds）からGitHubリポジトリを接続する。これでpushごとの自動ビルド・デプロイが有効になる。
pushが本番反映の起点になるのは、CloudflareとGitHubの自動デプロイ連携を設定した場合に限る。プロジェクトによっては wrangler deploy の手動実行や、GitHub Actions、リポジトリ内の deploy.sh のようなスクリプト経由でのデプロイが必要になる。「pushしたのに反映されない」と思ったら、まずこの前提を疑うとよい。
APIキーやDB接続情報をコードに直書きしないための基本。かなり早い段階で必要になる。
wrangler secret）
必須級
Workers/Pages上で使うAPIキーや認証情報の置き場所。Claude Codeに「Secretsに登録して」と頼めば wrangler secret put を実行してくれる。
.env.local と本番環境変数の分離
必須級
ローカル開発用の値は .env.local（gitignore対象）に、本番用の値はCloudflare Secretsに、という形で分ける。同じファイルを両方で使い回さない。
.env、APIキー、パスワードはGitHubにpushしない。
誤ってpushしてしまった場合、履歴から削除するだけでは不十分（過去のcommitに残る）。該当のキーやパスワードはその場で無効化・再発行する。
最初から揃える必要はない。必要になったタイミングで1つずつ足す。
| 目的 | 候補 |
|---|---|
| 失敗・エラーに気づく | Cloudflareダッシュボードのログ、wrangler tail、またはSentryなどのエラートラッキング |
| デプロイ失敗やCron結果の通知 | Discord Webhook / Slack / LINE Notify 相当のもの |
| 死活監視（落ちていないか） | UptimeRobot / Healthchecks.io（いずれも無料枠あり） |
| まだ全世界に公開したくない | Cloudflare Access（Zero Trust）— Google/メール認証の壁をアプリ側の実装なしでネットワーク層に作れる。試作段階を身内だけで確認するのに向く |
| アクセス解析 | Cloudflare Web Analytics（プライバシー配慮型）/ GA4 |
| スパム・Bot対策 | Cloudflare Turnstile |
| 問い合わせ受付 | Google Forms、または簡易フォームAPI |
| メール受信 | Google Workspace など独自ドメインメール |
| D1で足りないDB要件 | Turso / Neon / Supabase など、使った分だけのサーバーレスDB。エッジ中心の構成と一貫性を保ちやすい |
| WordPress資産など既存システムとの連携 | 現在契約しているPHP/MySQLレンタルサーバー（常時起動が前提になる点でCloudflare中心の構成とは毛色が違う） |
| LINE連携 | LINE Developers（無料） |
| 複数マシンの接続 | Tailscale（個人利用は無料枠内） |
Cloudflare側で処理が完結するなら、常時起動のマシンは要らない。「決まった時刻に自動で何かを動かしたい」はCloudflareのCron Triggersで足りることが多く、それでも足りない場合だけ常時稼働機を検討する。
常時稼働機を持たない構成は、コストや運用の手間だけでなく、使っていない時間の電力消費を抑えられるという意味でも無駄が少ない。
| 項目 | 月額目安 | 備考 |
|---|---|---|
| Claude Pro | $20〜 | 年払いなら $17/月。Max は $100〜 |
| GitHub | ¥0 | 個人のPublic/Privateリポジトリは無料 |
| Cloudflare | ¥0〜 | 無料枠超過分のみ従量課金。Workers有料プランは $5/月から |
| ドメイン | ¥100〜200/月換算 | 年払いが基本 |
| レンタルサーバー | ¥1,000〜2,000 | PHP/MySQL構成を選んだ場合のみ |
2026年7月31日時点。料金と無料枠は変動するため、契約前に各公式サイトで最新の内容を確認すること。
見落としやすい超過ポイント：
AI開発で重要なのは、作る速さより壊したときに戻せることの方。
作業前にcommitし、変更単位を小さくする。 問題が起きたら、直前のcommitに戻す、またはCloudflareダッシュボードから過去のデプロイに戻す。いきなり本番のファイルを直接編集しない。
CloudflareのGit連携は、mainブランチ以外へのpushでもブランチごとのプレビューURLを自動生成する。本番に出す前にそちらで確認する運用もできる。