はじめての Cloudflare 公開ガイド
― Claude Code への指示と .env の扱い方

1先に結論：守るのは3つだけ

技術的な話をする前に、これだけ守れば大きな事故は起きません。逆に言えば、事故はほぼこの3つの違反から起きます。

2登場人物を整理する

最初につまずくのは、たいてい「誰が何をしているのか分からない」ことです。関わるのは4者だけです。

  【あなたのPC】                      【Cloudflare】
  ┌────────────────────┐              ┌────────────────────┐
  │ ソースコード        │  ─ 公開 ─▶   │ Pages   = 画面      │
  │ .env（鍵の原本）    │              │ Workers = 処理      │
  │   ↑ ここに置く      │              │ D1      = データ    │
  └────────────────────┘              │ Secrets = 鍵の写し  │
        │                              └────────────────────┘
        │ Claude Code が読み書きする              ▲
        ▼                                         │
  ┌────────────────────┐              鍵はコードと別ルートで
  │    Claude Code     │              1回だけ登録する
  └────────────────────┘

  ✕ .env は「公開」の矢印には絶対に乗せない

2-1. この資料が前提にしている環境

Claudeデスクトップアプリ（Mac / Windows）を使う前提で書いています。アプリの中に、性格の違う2つの操作場所があります。この2つを区別できると、以降の説明が一気に読みやすくなります。

ターミナルは、Claudeデスクトップアプリに内蔵されているものを使ってもいいですし、OS標準のものでも構いません。同じことができます。

3.env とは何か（鍵の話）

3-1. そもそも何のためにあるのか

ツールが動くには、たいてい「秘密の文字列」が必要になります。メール送信サービスのAPIキー、データベースのパスワード、LINEの接続トークン——こういうものです。

これをソースコードに直接書くと、次の問題が起きます。

• コードを誰かに見せた瞬間、鍵も一緒に渡ってしまう
• GitHubに上げたら、世界中から読める状態になる
• 本番用とテスト用で鍵を切り替えたいのに、コードを書き換えることになる

そこで、秘密の文字列だけを1つのファイルに切り出す。それが .env（ドット・エンブ）です。

RESEND_API_KEY=re_abc123xxxxxxxxxxxxxxxx
DATABASE_URL=xxxxxxxxxxxxxxxxxxxx
SESSION_SECRET=xxxxxxxxxxxxxxxxxxxx

プログラム側は「RESEND_API_KEY という名前の値を持ってきて」とだけ書きます。中身が何かは知りません。だからコードは人に見せても安全になり、.env だけを厳重に守ればよくなります。

3-2. ファイル名が「.」で始まる理由

先頭が . のファイルは、Mac・Linuxでは隠しファイル扱いになり、通常のフォルダ表示に出てきません。うっかりメールに添付する事故を減らすための慣習です。

Mac（Finder）で表示する

Finderで対象のフォルダを開いた状態で、次のキーを押します。

command + shift + .（ピリオド）

押すたびに表示 ⇄ 非表示が切り替わるトグルです。隠しファイルが表示されているときは、アイコンが少し薄く表示されます。確認が終わったら、もう一度同じキーを押して非表示に戻しておくのが安全です。

Windows（エクスプローラー）で表示する

それでも表示設定を触る必要があるのは、node_modules や .git といった「隠し属性が付いたフォルダ」を確認したいときです。

3-3. .env に「入れるもの／入れないもの」

4鍵の置き場所は3種類ある

ここが初心者が最も混乱するところです。「.env に書けば全部OK」ではありません。 動く場所が3つあるので、鍵の置き場所も3つあります。

4-1. ①と②は「別々に登録する」

.env をCloudflareにアップロードする仕組みはありません（それが安全設計です）。同じ鍵を、手元用とCloudflare用に2回登録する。これが正しい手順です。

# 手元用（ファイルに書く）
echo 'RESEND_API_KEY=re_abc123' >> .dev.vars

# Cloudflare用（コマンドで送る／画面には残らない）
npx wrangler secret put RESEND_API_KEY
# → 入力を求められるので、そこに貼る

4-2. ③が最大の落とし穴

フロントエンド（画面）のビルドツールには、VITE_ や NEXT_PUBLIC_ といった接頭辞のついた環境変数をそのままブラウザに埋め込む機能があります。便利ですが、ここにAPIキーを入れると訪問者全員に配布したのと同じです。

4-3. wrangler.toml に秘密を書かない

wrangler.toml はCloudflareの設定ファイルで、コードと一緒にGitHubへ上がります。ここの [vars] セクションに書いた値は平文でそのまま残ります。

name = "mendan-tool"
compatibility_date = "2026-08-01"

[vars]
APP_NAME = "面談記録"        # ← OK（秘密ではない）
# API_KEY = "re_abc123"      # ← 絶対にダメ。secret put を使う

[[d1_databases]]
binding = "DB"
database_name = "mendan-tool-db"
database_id = "xxxxxxxx-xxxx-xxxx"   # ← ID自体は秘密ではないが、公開リポジトリなら伏せる運用も可

5フォルダのつくり方

5-1. 基本形

まずは、ツールごとに1つのフォルダを作ります。プロジェクト名は英数字とハイフンだけ（日本語やスペースは避ける）。

mendan-tool/              ← プロジェクトのフォルダ
├── .env                     ← 鍵。Gitに入れない
├── .dev.vars                ← Workers用の鍵。Gitに入れない
├── .env.example             ← 「鍵の名前だけ」の見本。Gitに入れる
├── .gitignore               ← 何を除外するかの指定
├── wrangler.toml            ← Cloudflareの設定
├── package.json
├── src/                     ← プログラム本体
└── public/                  ← 画像・CSSなど

5-2. .gitignore を最初に作る（順番が重要）

.gitignore は「このファイルはGitに含めない」という指定です。コードを書き始める前に作ってください。1回でもコミットしてしまうと履歴に残り、消すのが面倒になります。

# 鍵・環境変数（最重要）
.env
.env.*
!.env.example
.dev.vars
.dev.vars.*
*.key
*.pem

# 依存パッケージ・ビルド成果物
node_modules/
dist/
.wrangler/

# OS
.DS_Store

5-3. .env.example を置く理由

中身を空にした「鍵の一覧表」です。これだけはGitに入れます。あとから自分が見返すときも、他の人に渡すときも、「何の鍵が必要なのか」が分かるようになります。

# このファイルをコピーして .env を作り、値を入れてください
# cp .env.example .env

RESEND_API_KEY=          # メール送信用。https://resend.com で取得
SESSION_SECRET=          # ログイン用の秘密鍵。openssl rand -hex 32 で生成
ADMIN_EMAIL=             # 管理者のメールアドレス

5-4. 【応用】鍵の実体をプロジェクトの外に置く

より安全にするなら、鍵の本体をプロジェクトフォルダの外に置き、シンボリックリンク（ショートカット）を張る方法があります。クラウド同期フォルダ（Google Drive / Dropbox / iCloud）の中で作業する場合は、この方法を強く推奨します。同期フォルダに .env を置くと、鍵がクラウドにアップロードされてしまうためです。

Mac（ターミナル）

# 1. 同期されない場所に鍵の実体を置く
mkdir -p ~/secrets/mendan-tool
open -e ~/secrets/mendan-tool/.dev.vars      # テキストエディットで開いて値を書く
chmod 600 ~/secrets/mendan-tool/.dev.vars    # 自分だけが読める権限に

# 2. プロジェクト側からリンクを張る
cd ~/projects/mendan-tool
ln -s ~/secrets/mendan-tool/.dev.vars .dev.vars

# 3. 確認（.dev.vars -> /Users/.../.dev.vars と出れば成功）
ls -la .dev.vars

Windows（PowerShell）

# 1. 同期されない場所に鍵の実体を置く
mkdir "$HOME\secrets\mendan-tool"
notepad "$HOME\secrets\mendan-tool\.dev.vars"   # メモ帳で開いて値を書く

# 2. プロジェクト側からリンクを張る
cd "$HOME\projects\mendan-tool"
New-Item -ItemType SymbolicLink -Path ".dev.vars" `
         -Target "$HOME\secrets\mendan-tool\.dev.vars"

# 3. 確認
Get-Item .dev.vars | Select-Object Name, LinkTarget

6Claude Codeへの指示テンプレート

ここからは実際にコピーして使える指示文です。すべてClaudeデスクトップアプリのチャット欄に貼り付けて送るものです。AIは「言われていないこと」は基本的にやりません。逆に言えば、守ってほしいルールは最初に明文化しておく必要があります。

6-1. 最初に1回だけ出す指示（ルール宣言）

新しいプロジェクトを始めたら、まずこれを送ります。以降の会話全体に効きます。

このプロジェクトのルールを宣言します。以降、必ず守ってください。

【鍵の扱い】
1. APIキー・パスワード・トークンをソースコードに直接書かないこと。
   必ず環境変数（.env / .dev.vars / Cloudflare Secrets）経由で読むこと。
2. 私が鍵の値をチャットに貼ることはありません。
   鍵が必要なときは「.env に○○という名前で書いてください」と
   ファイル名と変数名だけを指示してください。
3. .env / .dev.vars の中身をチャットに出力しないこと。
   存在確認は「あるかないか」だけを報告してください。
4. フロントエンドのコード（ブラウザに届くコード）に秘密の値を
   一切埋め込まないこと。VITE_ / NEXT_PUBLIC_ 接頭辞の変数には
   公開してよい値だけを入れること。

【最初にやってほしいこと】
- .gitignore を作り、.env / .env.* / .dev.vars / node_modules /
  dist / .wrangler / .DS_Store を除外してください（.env.example は除外しない）。
- .env.example を作り、必要な環境変数の「名前と説明だけ」を
  空の値で列挙してください。

【公開（デプロイ）】
- wrangler deploy / wrangler pages deploy などの公開コマンドは、
  実行前に必ず「何を・どこに・どのURLで公開するか」を提示し、
  私の承認を得てから実行してください。無断で実行しないこと。

6-2. 鍵を追加するときの指示

ポイントは「値を渡さない」こと。AIには「箱を作れ」とだけ言い、中身は自分で入れます。

メール送信機能を追加します。Resend の API キーが必要です。

- 変数名は RESEND_API_KEY にしてください。
- .env.example に空の項目と説明コメントを追加してください。
- コードからは環境変数経由で読む形にしてください。
- 実際の値は私が自分で .dev.vars に書きます。
  値を聞かないでください。また、書き終わったかどうかも
  ファイルの存在確認だけで判断してください。

6-3. Cloudflareへ登録するときの指示

手元の .dev.vars に入っている変数を、Cloudflare 側の Secret として
登録したいです。実行すべきコマンドを一覧で出してください。

- コマンドは私が自分のターミナルで実行します。
- あなたが実行する必要はありません。
- 値はコマンドの引数に含めず、対話入力で渡す形にしてください。

提示されるのは、こういうコマンドのはずです。

npx wrangler secret put RESEND_API_KEY
npx wrangler secret put SESSION_SECRET

# 実行すると入力欄が出るので、そこに値を貼る。
# コマンド履歴には値が残らない。

6-4. 公開前の指示

公開の準備ができているか、実行前に確認してください。

1. git status で .env / .dev.vars が追跡対象に入っていないこと
2. git log で過去に鍵らしき文字列がコミットされていないこと
   （"KEY" "SECRET" "TOKEN" "PASSWORD" などで grep）
3. ビルド後の成果物（dist/ など）に秘密の値が含まれていないこと
4. Cloudflare 側に必要な Secret が全部登録されていること
   （wrangler secret list で名前だけ確認）

確認結果を報告したうえで、公開するプロジェクト名とURLを提示し、
私が「OK」と答えてから実行してください。

6-5. 【上級】そもそも実行できないようにする

指示だけでは不安な場合、Claude Codeには「特定のコマンドを機械的にブロックする」仕組み（Hooks／permissions）があります。.claude/settings.json に拒否リストを書いておけば、AIがうっかり実行しようとしても止まります。

{
  "permissions": {
    "deny": [
      "Bash(wrangler deploy:*)",
      "Bash(wrangler pages deploy:*)",
      "Bash(git push:*)",
      "Read(./.env)",
      "Read(./.dev.vars)"
    ]
  }
}

7公開までの流れ（全10ステップ）

各ステップに、どこで操作するかを付けています。ターミナル は自分の手で打つ場所、チャット欄 はAIに日本語で頼む場所です。

1. Node.js を入れる1回だけ npx というコマンドを使うために必要です。nodejs.org から LTS版 をダウンロードしてインストール。
   入っているか確かめるには、ターミナルで node -v を実行して v20.x.x のような数字が出ればOK。
2. Cloudflareアカウントを作るブラウザ dash.cloudflare.com でメール登録。クレジットカードは無料枠のうちは不要。登録後、ダッシュボード右側のAccount IDを控えておく。
3. Cloudflareにログインするターミナル npx wrangler login を実行。ブラウザが開くので「Allow」を押す。これで手元のPCとCloudflareがつながります。
   つながったかの確認は npx wrangler whoami。自分のメールアドレスが出れば成功。
   ※AIはブラウザの承認ボタンを押せません。ここだけは必ず自分で実行してください。
4. プロジェクトのフォルダを作り、ルールを宣言するチャット欄 6-1のテンプレートを送る。.gitignore と .env.example、CLAUDE.md がこの時点で完成します。
5. 機能を作るチャット欄 ここは普通に日本語で依頼してよい。手元で npx wrangler dev を動かしながらブラウザで確認する。この段階ではまだ誰にも公開されていません。
6. 手元用の鍵を入れるターミナル .dev.vars に自分で値を書く。チャット欄には貼らない。
7. Cloudflare側に鍵を登録するターミナル npx wrangler secret put 変数名 を必要な数だけ実行し、対話入力で値を貼る。
8. 公開前チェックを回すチャット欄 6-4のテンプレートを送り、鍵の混入がないか確認させる。10章のチェックリストも自分の目で見る。
9. 公開するターミナル npx wrangler pages deploy dist などを、内容を確認したうえで実行。xxxxx.pages.dev というURLが発行されます。
10. 公開後の確認スマホ スマホのシークレットウィンドウで開く（＝他人と同じ条件で見る）。ログインが要るページが素通りできないか、意図せず公開されている情報がないかを確認する。

8やってはいけない7つ

1. 鍵の値をチャットに貼る 会話ログに残ります。AIサービス側にも送信されます。値を渡さずに「変数名だけ」で会話を進めれば、そもそも貼る必要がありません。
2. .gitignore を作る前にコミットする 1回でも .env をコミットすると、あとから削除しても履歴には残り続けます。最初の git init の直後に .gitignore を作るのが鉄則。
3. フロントエンドに秘密を埋め込む VITE_ / NEXT_PUBLIC_ 接頭辞の変数はブラウザに配布されます。「難読化」「Base64エンコード」も無意味です。
4. wrangler.toml の [vars] に秘密を書く このファイルはコードと一緒に共有されます。秘密は必ず wrangler secret put で。
5. スクリーンショットに鍵を写す ターミナルやダッシュボードの画面共有・スクショで漏れる事故は非常に多い。共有する前に一度自分で読み返す。
6. 「とりあえず公開して後で直す」 公開した瞬間から、検索エンジンのクローラーや自動スキャンが来ます。人事情報のような機微データを扱うツールでは、ログイン制御が効いていることを確認してから公開する。
7. デプロイをAIの自動実行に任せる 公開は取り消せません（履歴を戻せても、その間に見られたものは戻らない）。承認ゲートは必ず人間が握る。

9鍵が漏れたときの対処

やってしまったときは、順番が決まっています。あわてて履歴を消すのは2番目以降です。

1. まず鍵を無効化する（最優先） 発行元のサービス（Resend、OpenAI、Cloudflareなど）の管理画面で、その鍵をRevoke / Delete する。漏れた鍵は「もう使えない文字列」にしてしまえば、履歴に残っていても実害がなくなる。
2. 新しい鍵を発行して差し替える .dev.vars と Cloudflare の Secret の両方を新しい値に更新する。
3. 不正利用がないか確認する 発行元の利用履歴・請求画面を見る。身に覚えのないアクセスがあれば記録する。
4. その後で、履歴の掃除を検討する GitHubに上げてしまった場合は、リポジトリの削除・再作成が最も確実。履歴の書き換え（git filter-repo 等）は影響が大きいので、詳しい人と一緒にやる。

10公開前チェックリスト

11用語辞典