【初心者向け】GitHubとCloudflareでアプリを無料公開する方法

こんにちは。
経済的自立を目指す2児の母、とぼけちん（@mknm12345 / Threads）です。

最近、急速にAIが進化し、非エンジニアでもアプリを作れてしまうという、すごい時代になりました。
私も、非エンジニア、コードなど全然分からない…それでも今ではAI（私はClaude Codeを使っています）を使い、自分で好きなアプリを作れます。少し前までは想像もつきませんでした。AIすごいです。

AIでアプリを作れるようになると、次にこう思いませんか。
「これ、作ったパソコン以外の端末からも使いたい」
「ほかの人にも使ってもらいたい」

そのためには、アプリをインターネットに「公開」する必要があります。
公開と聞くと「サーバー？月額？なんか難しそう…」と身構えますが、安心してください。無料でできて、しかも作業のほとんどはAIがやってくれます。

人間がやるのは、アカウントを作ることと、ログインや「許可」の画面で自分で確かめて進めることです。
この記事では、AIに公開作業をやってもらうために必要な手順と、「人間がやるところ」を初心者向けにやさしく解説します。

GitHubとCloudflareって何？（ファイルの保管場所と、公開する場所）

先に、2つのサービスの役割を押さえます。

• GitHub（ギットハブ）＝アプリのファイルの保管場所
  アプリのファイルを、変更の履歴ごと保管してくれるサービスです。アプリのファイルを入れておく場所を「リポジトリ」と呼びます。
• Cloudflare（クラウドフレア）＝アプリを公開する場所
  アプリをインターネットに公開するサービスです。公開すると、アプリ専用のURL
  （〇〇.pages.dev）
  で、ほかの端末からもアプリを開けるようになります。

アプリが公開されるまでの流れは、こうなります。

1. パソコンの中にあるアプリのファイルを、GitHubに送る。
2. ファイルを送ったGitHubの置き場所（リポジトリ）を、Cloudflareとつなぐ。
3. Cloudflareが、受け取ったファイルをURLで開ける形にして公開する。

1のGitHubに送る作業は、Claude Codeに頼めます。ただし、頼めるようにするには、パソコンに道具を2つ（GitとGitHub CLI）入れて、GitHubにログインしておく準備が必要です。その準備は、このあとのステップ2で解説します。
2のCloudflareとつなぐ作業は、あなたがCloudflareの画面で操作します。その手順は、ステップ6で解説します。

この2つが済むと、あとはClaude Codeに「GitHubに上げて（Pushして）」と頼むだけで、アプリのファイルがGitHubに送られ、そのままCloudflareに渡って、アプリが自動で公開されます。
アプリを直したときも同じです。同じように頼むだけで、公開しているアプリが新しくなります。

GitHubとCloudflareでアプリを公開する手順

ここからは、ステップ1〜6の順番に進めます。

ステップ1. GitHubのアカウントを作る

ブラウザで GitHubの登録ページ（github.com/signup） を開いてください。
まず、GitHubのトップページが出ます。GitHubという難しそうな名前に反し、かわいいキャラが出てくるので安心します（笑）。私は個人的にこのアヒルが好きです。

右上の「Sign up」か、真ん中の緑色の「GitHub に登録」ボタンを押してください。どちらを押しても、同じ登録の画面に進みます。「GitHub に登録」の左にあるメールアドレスの欄は、空欄のままで大丈夫です。

真ん中の緑色のボタンの横の「GitHub Copilot アプリをダウンロードする」は、GitHubのAI（GitHub Copilot）を使うためのアプリです。この記事では作業をClaude Codeに頼むので、押さなくて大丈夫です。

「Sign up」か「GitHub に登録」を押すと、次の登録の画面に進みます。

画面の左側にある「Access to GitHub Copilot」「Unlimited repositories」などは、無料のアカウントでできることの紹介です。選んだりチェックしたりする欄ではありません。入力するのは右側です。

登録のしかたは2つあります。

• 「Continue with Google」「Continue with Apple」：GoogleかAppleのアカウントを使って登録します
• メールアドレスで登録：その下の入力欄に記入して登録します

GoogleやAppleで先に進めないときは、メールアドレスでも登録できます。

メールアドレスで登録する場合は、次の欄を埋めます。

1. Email：メールアドレスを入力します。あとで、このアドレスに確認のコードが届きます。受け取れるアドレスを入れてください。
2. Password：パスワードを決めます。画面の説明では、15文字以上、または、数字と小文字を含む8文字以上です。
3. Username：ユーザー名を決めます。使えるのは半角の英数字とハイフン（-）です。ハイフンは2つ続けて使えず、先頭と最後にも使えません。決め方の注意点は、このあとの「ユーザー名の決め方」をご参照ください。
4. Your Country/Region：住んでいる国を選びます。
5. Email preferences：GitHubからの製品のお知らせメールを受け取るかどうかです。チェックしなくても使えます。
6. 「Create account」を押し、パズルなどの本人確認と、届いたメールのコードの入力を済ませたら完了です。

ステップ2. Claude CodeがGitHubを操作できるようにする（GitとGitHub CLIを入れて、GitHub CLIにGitHubを使う許可を出す）

次は、Claude CodeがGitHubを操作できるようにするための道具を、パソコンに2つ入れます。「Git（ギット）」と「GitHub CLI（ギットハブ シーエルアイ）」です。どちらも無料です。
この2つは、あなたが直接操作する道具ではありません。Claude Codeに「GitHubに上げて」などと頼むと、Claude Codeがこの2つの道具を動かして作業します。道具を動かすための命令（コマンド）も、Claude Codeが書きます。なので、あなたが使い方を覚える必要はありません。
あなたがやるのは、この2つをパソコンに入れておくこと（これもClaude Codeに頼めます）と、GitHubへのログインです。

Gitは、すでにパソコンに入っていることもあります。Windowsには、最初からは入っていません。Macは、Appleの開発用の道具（Xcode Command Line Tools）を入れると、一緒に入ります。入っているかどうかは、Claude Codeに聞けば確かめてくれます。聞き方はこのあとで説明しています。

なお、AIに任せず、自分で画面を操作してGitHubに送る（Pushする）方法もあります。その場合に使うのが「GitHub Desktop」（GitHubが配っている、画面のボタンで操作できる無料のソフト）です。GitHub Desktopを使うなら、GitもGitHub CLIも入れなくて大丈夫です。GitHub Desktopが、Gitを中に持っているからです。やり方は、記事の後半のGitHub Desktopを使う方法にまとめています。

準備は、やりたいことをそのまま伝えれば大丈夫（コピペOKプロンプト）

道具の名前を覚えたり、自分から「GitHub CLIを入れて」と言ったりする必要はありません。やりたいことをそのまま伝えれば、たいていは、必要な準備をClaude Codeのほうから案内してくれます。案内のしかたは、使うモデルによって変わります。案内が出てこないときや、ちがう方法をすすめられたときは、「GitとGitHub CLIを入れたい」と、そのまま頼んでください。

こう頼むと、Claude Codeは、たいていまず、GitとGitHub CLIがパソコンに入っているかを確かめます。入っていなければインストールを進め、そのあとGitHubへのログインまで案内してくれます。
この記事で道具の名前を説明しているのは、画面に出てきたときに「いま何をしているのか」が分かるようにするためです。覚えなくて大丈夫です。

もし、準備の話が出てこないまま進んでしまったときは、こちらを使ってください。

結果は、次のどちらかになります。どちらでも、次にやることは同じです。

• 入っていなかった場合：Claude Codeがインストールまでやってくれます。
• すでに入っていた場合：「入っています」と教えてくれます。入れ直す必要はありません。

どちらの場合も、次は、その道具にGitHubを使う許可を出す作業です。道具を入れただけでは、その道具はまだ、あなたのGitHubに触れません。

GitHub CLIに、あなたのGitHubを使う許可を出す

ここでやるのは、「このパソコンのGitHub CLIが、私のGitHubを使うことを許可します」とGitHubに伝える手続きです。これは1回だけやります。
許可を出すのはあなたで、許可をもらうのはGitHub CLI（ステップ2で入れた道具のうちの1つ）です。許可を出すと、GitHub CLIがあなたのアカウントでGitHubを操作できるようになります。

ここは、Claude Codeとあなたで、半分ずつやります。どちらが何をするかを、先に書いておきます。

• Claude Codeがやること：ログインの手続きを始めて、画面に合言葉のようなコードと、ブラウザで開くURLを出します。そのあとは、あなたがブラウザで作業するのを待っています。
• あなたがやること：ブラウザでそのURLを開いて、コードを入れて、「Authorize github」（githubに許可する）というボタンを押します。

この画面は英語です。「Authorize（オーソライズ）」は「許可する」という意味です。
この許可を押せるのは、GitHubのアカウントを持っている本人だけです。だから、ここだけはAIに任せられません。

ステップ2のはじめに頼んでいれば、ログインの案内は、たいてい、そのまま続けて出てきます。Claude Codeがログインの手続きを始めて、コードと、ブラウザで開くURLを画面に出し、「このコードをコピーして、このURLを開いてください」と案内してくれます。
その案内のとおりに進めれば大丈夫です。何が起きるのかを先に知っておきたい方のために、順番に書いておきます。

もし、インストールが終わったところで話が止まってしまったときだけ、次のように頼んでください。

GitHubにログインする流れ（GitHub CLIがGitHubを使う許可を出す手続き）

1. Claude Codeが、「ブラウザでこのURLを開いて、このコードを入れてください」と案内します。コードもそこに表示されます。
コードは、英字と数字が混ざった4文字ずつを、ハイフンでつないだ形（例：7B3D-9KF2）で、毎回ちがいます。

2. ブラウザで GitHubのデバイス認証のページ（github.com/login/device） を開きます（GitHubにサインインしていなければ、ステップ1のアカウントでサインインします）。

3. 「Device Activation」の画面が出ます。自分のアカウントが表示されていることを確かめて、「Continue」を押します。👇

4. 「Authorize your device」の画面になり、コードを入れる枠が8つ出ます。👇
Claude Codeのチャット欄に出ていたコードを入れて、「Continue」を押します。
「コードをコピー」 → 「下記画面のカーソルの位置でペースト」で入力できると思います。
コードをどうやってコピーすればいいか分からないときは、Claude Codeに「このコードはどうやってコピーするの？」と聞いてください。

5. 初めてログインするときは、「Authorize github」というボタンのある許可の画面が出るので、押します（一度許可すると、次からは出ません）。

6. 「Congratulations, you’re all set!」と出たら、ブラウザでやることは終わりです。👇

7. Claude Codeに戻ると、ログインできたことを教えてくれます。これでログイン完了です。

ステップ3. アプリを置くリポジトリを、非公開（Private）で作る

ここまでが、道具の準備でした。ステップ3からは、アプリを公開する作業に入ります。
まずやるのは、アプリのファイルを置くリポジトリを、GitHubに新しく作ることです。この記事では、アプリ1つにつき、リポジトリを1つ作ります。

リポジトリは、あなたの手で作らなくて大丈夫です。Claude Codeが作れます。ステップ2でGitHub CLIを入れてログインしたのは、この作業を頼めるようにするためです。

その前に：リポジトリには「公開」と「非公開」があります

リポジトリを作るときは、次の2つのどちらかを選びます。無料のアカウントで、どちらも作れます。

• 公開（Public）：世界中の誰でも、中のファイルを見られます。GitHubにこの設定があるのは、プログラマーが作ったものを見せ合ったり、直し合ったりする使い方があるからです。
• 非公開（Private）：あなただけが見られます（あなたが招いた人も見られます）。

この記事では、非公開（Private）を選びます。
公開（Public）にすると、まちがえてAPIキー（アプリが外部のサービスを使うときに使う、パスワードのような長い文字列）や個人情報が入ったファイルを上げてしまったときに、その瞬間から世界中の人が見られる状態になり、悪用されるおそれがあるからです。
中のファイルを世界中の人に見せたい、という理由が特にないなら、非公開（Private）にしておいてください。あとから公開に変えることもできます。

Claude Codeに、非公開で作ってもらう

ステップ2で「GitHubの操作はぜんぶやってほしい」と頼んでいれば、ログインのあと、そのままリポジトリ作りに進んでくれると思います。話が止まっているときや、あとから続きをやるときは、次のように頼んでください。

ここで大事なのは、「非公開（Private）で」と一言添えることです。
GitHub CLIでリポジトリを作るときは、公開か非公開かを必ずどちらか指定する決まりになっています。あなたが何も言わなければ、その選択はAIがすることになります。

非公開になっているかを、自分の目で確かめる

まず、ブラウザでGitHubのサイト（github.com）を開きます。サインインしていれば、下の画像のように、画面左側に自分のリポジトリが一覧で並んでいます。

その中から、いま作ったリポジトリの名前を押して、リポジトリのページを開きます。どれか分からなければ、Claude Codeに「作ったリポジトリのURLを教えて」と聞けば教えてくれます。

開いたページの上のほう、リポジトリ名の右に、「Private」と書かれたラベルが出ていればOKです。下の画像がその部分です。

もし「Public」（＝公開）と出ていたら、Claude Codeに「このリポジトリを非公開（Private）に変えて」と頼んでください。

ステップ4. 最初にGitHubへ送るとき、ログインの画面が出ることがあります

AIが最初にGitHubへファイルを送ろう（Pushしよう）とすると、ブラウザが立ち上がって、GitHubのサインインや「許可しますか？」という画面が出ることがあります。Claude Codeの画面は、その間、待っている状態になります。

ステップ2でログインしたのはGitHub CLIで、ファイルを送るのはパソコンの中のGitです（Gitが何かは、ステップ2の「入れる道具2つの説明」に書いています）。
道具が別なので、ログインも別です。Gitのほうの手続きがまだだと、この画面が出ます。

出てくるのは、「このパソコンのGitに、あなたのGitHubを使わせてよいか」を確かめる画面です。ステップ2ではGitHub CLIに許可を出しましたが、今度は許可を受ける相手が、GitHub CLIではなく、Gitのログインを受け持つ道具（Windowsでは「Git Credential Manager」など）になります。
また、ステップ2のときにGitのほうの設定も一緒に済んでいて、この画面が出ないこともあります。許可を出すのはあなた自身なので、そのまま進めて大丈夫です。

1. ステップ1で作ったアカウントでサインイン
2. 「Authorize（許可）」ボタンを押す
3. 「成功しました」的な画面が出たら、ブラウザを閉じてAIのところに戻る。

このログインは初回だけです。2回目からは、Claude Codeに「GitHubに上げて」と頼むだけで済みます。

ステップ5. Cloudflareのアカウントを作る

ブラウザで Cloudflareの登録ページ（dash.cloudflare.com/sign-up） を開いてください。

登録のしかたは2つあります（画像の赤枠が、それぞれの場所です）。どちらを選んでもかまいません。

• 「Continue with Google」「Continue with Apple」「Continue with GitHub」：Google・Apple・GitHubのどれかのアカウントを使って登録します。
• メールアドレスで登録：「Email」と「Password」を入力し、本人確認のチェックを入れて登録します。そのあと届いた確認メールのリンクを押して、メール認証を済ませます。

言語の切り替え方

Cloudflareの画面は、最初は英語で表示されますが、日本語に切り替えることもできます。

画面の右上にある人のマークを押して、出てきたメニューの「言語」を選び、「日本語」を選びます。
なお、この記事のこの先の画像は、日本語の表示にしたものです。英語のまま進める場合は、画面の文字が記事の画像と違って見えます。

ステップ6. GitHubとCloudflareをつないで公開する（Pages）

いよいよGitHubとCloudflareをつなぎます。
Cloudflareには、作ったものを公開したり動かしたりする機能が2つあります。「Pages（ページズ）」と「Workers（ワーカーズ）」です。この記事で使うのはPagesのほうです。

そのPagesの入口に、初見殺しの罠が1つあります。

罠：「Pages」のボタンが見つからない

Cloudflareの管理画面で「Pages」というタブやボタンを探しても、見つけられません…（2026年9月時点）。どこかにあるのかもしれないと頑張って探し続けていますが、いまだ私は見つけられていません。
そのかわり、次の順番でたどると、Pagesの画面まで行けます。

1. 左メニューの「ビルド」→「コンピュート」の下にある「Workers & Pages」を開きます。
2. 右上の「アプリケーションを作成する」ボタンを押します。
下の画像が、その2か所です。

3. 「Make something new」（新しく作る）という画面になります。👇
この画面には「Workers」という文字がどこにも出ていませんが、上に並んでいる「Continue with GitHub」などの大きな枠は、Workersを作るためのものなのです。このあと次の画面まで進むと、左上に「← Worker を作成」という戻るリンクが出るので、それで分かります。

Pagesの入口は、画面の一番下にある、ちっちゃい「Pages を導入しようとお考えですか?」の「始める」というリンクです（下の画像の赤枠）。ここを押します。

4. 「始めましょう」という画面になります。👇
上の「既存の Git リポジトリをインポートする」の「始める」を押します（下の画像の赤枠）。
下の「ファイルをドラッグアンドドロップする」は、GitHubを使わずにファイルを直接アップロードする方法なので、この記事では使いません。

この画面の左上に「← Worker を作成」という戻るリンクがあります。ここまで見ないと、前の画面の入り口がWorkersだったとは分からない作りになっているのか？Pages使ってほしくないのかな…

GitHubと接続して、リポジトリを選んで、公開する

5. 「GitHubに接続」を選ぶと、ブラウザでGitHubの画面が開きます。GitHubにサインインして、Cloudflareの仕組み（「Cloudflare Workers & Pages」というアプリ）を、あなたのGitHubに入れる許可を出します。
途中で、どのリポジトリを使わせるかを聞かれます。「All repositories」（全部のリポジトリ）と「Only select repositories」（選んだリポジトリだけ）があり、Cloudflareの公式の説明では、「Only select repositories」を選んで、公開したいアプリのリポジトリだけを選ぶことがすすめられています。選んだら、「Install」や「Authorize」（許可する）のボタンを押します。
「Only select repositories」にした場合、あとで別のアプリを公開するときは、そのリポジトリも使えるように追加する必要があります。やり方が分からなければ、AIに「CloudflareにGitHubの別のリポジトリを追加したい」と聞いてください。

6. アプリのリポジトリを選びます。

7. ビルド設定の画面が出ます。「プロジェクト名」は、公開したときのURL「〇〇.pages.dev」の〇〇の部分に使われます。
そのほかの欄に何を入れるかはアプリによって違うので、AIに「Cloudflare Pagesのビルド設定はどうすればいい？」と聞いてください（HTMLとJavaScriptだけのシンプルなアプリなら、何も入れずそのままでOKのことが多いです）。

8. 「保存してデプロイ」を押します。

「保存してデプロイ」を押すと、Cloudflareがアプリを公開する処理を始めます。数分待つと、アプリ専用のURL「〇〇.pages.dev」でアプリが公開されます。
これで、どの端末からでも、そのURLを開けば、あなたのアプリが開きます。

公開したあと、アプリのURLはどこで見られる？

URLは、デプロイのときに一度出てきますが、そのまま閉じてしまって「あれ、URLなんだっけ？」となったら？大丈夫。以下の場所で、あとから何度でも確認できます。

1. Cloudflare（dash.cloudflare.com）にログインします。
2. 左メニューの「Workers & Pages」を開きます（ステップ6で使ったところです）。
3. 作ったプロジェクトが並んでいるので、そのアプリを選びます。
4. プロジェクトのページ上部にある「デプロイ」のタブを開くと「Domains:」という行があり、そこに「〇〇.pages.dev」のURLが出ています。リンクになっているので、押せばそのまま開きます。

下の画像の、赤い矢印が指しているところが、そのURLです。「〇〇」の部分には、プロジェクトを作るときに決めたプロジェクト名が入ります。
右にある2つの赤枠については、このあとの「③無料枠は『ビルドが月500回まで』」で解説します。

一度アプリを開いたら、そのURLをブラウザのブックマークに入れておくか、スマホのホーム画面に追加しておくと、次からはCloudflareを開かなくても、そこからアプリを開けます。

なお、Cloudflareの画面は変わることがあります。メニューの名前や場所が記事と違っていたら、AIに「Cloudflareで公開したアプリのURLはどこで確認できる？」と聞いてください。いまの画面に合わせて案内してくれます。

Cloudflareを使うときの注意3つ

①APIキーは「シークレット」として登録する（外部のサービスとつなぐアプリだけ）

ここは、Supabaseなどの外部のサービスを使うアプリの場合の話です。外部のサービスを使うのは、データの保存やログインのほか、外部のAIを使う機能、メールの送信、地図の表示など、いろいろあります。
データを同期しないアプリなど、外部のサービスを使わないアプリでは、この設定は不要ですので、読み飛ばしてかまいません。

外部のサービスとつなぐとき、多くのサービスではAPIキーという長い文字列を使います。APIキーを使わない作りのサービスもありますが、この記事で例に出すSupabase（スーパベース）はAPIキーを使います。Supabaseは、アプリのデータを預けておく場所と、ログインの仕組みをまとめて用意してくれる外部のサービスです（無料で使える枠があります）。
※Supabaseを使ってデータを同期する方法については、別の記事で解説します（現在執筆中です）。公開しだい、この記事からもリンクします。

アプリの種類によって、そのAPIキーを置く場所が変わります。

1. アプリのファイルの中に直接書く：APIキーの文字列を、index.htmlなどのアプリのファイルにそのまま書く方法です。GitHubにファイルを上げたときに、APIキーも一緒に上がってしまいます。この記事のように、GitHubに上げて公開するアプリでは使いません。
   （GitHubに上げず、自分のパソコンの中だけで動かすアプリなら、直接書いても外には出ません。ただ、あとで公開したくなったときに書き直すことになります。）
   
   
2. Cloudflareの「変数とシークレット」に登録する：APIキーをCloudflare側に預けておき、公開したアプリがそこから受け取って使う方法です。アプリのファイルにAPIキーが残らないので、GitHubにも上がりません。この記事ではこちらでやります。

2つの違いを図にすると、こうなります。👇

✅APIキーには、「公開してよいキー」と「秘密のキー」があります。詳しくはこのあとの「公開してよいキーと、秘密のキーがある」で説明します。
✅アプリを2つめの形で作るのは、AIに頼みます。

APIキーを登録する場所は、Cloudflareのそのプロジェクトの上部「設定（Settings）」→「変数とシークレット（Variables and secrets）」です。👇

登録のしかたは2種類あります。（「タイプ」の列で、テキストかシークレットを選びます。）

• 「テキスト」として登録（ふつうの変数）：登録したあとも、Cloudflareの画面に中身の文字がそのまま表示され、そこで中身を見られます。
• 「シークレット」として登録（Secret）：暗号化して保存され、保存したあとは中身が表示されません。画面には「値が暗号化されました」と出ます。

上の画像は2つとも「シークレット」にしてあるので、右の「値」の欄が「値が暗号化されました」という表示になっています。「テキスト」にした場合は、ここに値がそのまま表示されるので、Cloudflareのこの画面を開ける人なら、誰でも読める状態になります。

APIキーは、「公開してよいキー」の種類であっても、シークレットとして登録することをおすすめします。なぜシークレットにするのかは、このあとの「公開してよいキーと、秘密のキーがある」で説明します。

注意点が1つあります。プロジェクトを最初に作るときの設定画面にも、変数を入れる欄があります。そこで入れると、テキスト（ふつうの変数）として保存されます。シークレットにするには、プロジェクトができたあとで「変数とシークレット」を開き、シークレットとして登録し直してください。

公開してよいキーと、秘密のキーがある

サービスによっては、APIキーが2種類あります。たとえばSupabaseには、「Publishable key」と「Secret keys」があります。

• Publishable key（公開してよいキー）：ブラウザで動くアプリの中に入れて使う前提のAPIキーです。ブラウザは、アプリのファイルを受け取ってから画面を表示しています。つまり、アプリを開いた人のパソコンやスマホに、ファイルの中身がそのまま届いています。
  ブラウザには「ページのソースを表示」という、届いたファイルの中身をそのまま見る機能があります。Chromeなら、ページの文字も画像もリンクもない、何もないところで右クリックすると、メニューの中に「ページのソースを表示」があります（文字を選んだ状態や、画像やリンクの上で右クリックすると、メニューの中身が変わって出てこないことがあります）。
  「ページのソースを表示」で最初に見えるのは、HTMLのファイルです。APIキーがHTMLとは別のファイルに入って届く作りの場合も、画面に出ているそのファイル名のリンクを押せば、中身が見られます。
  これは、Cloudflareの「変数とシークレット」に登録したAPIキーでも同じです。ブラウザで動くアプリがAPIキーを使うには、公開したアプリを通して、APIキーの値がブラウザまで届く必要があるからです（上の図の「公開されたアプリ」のところです）。
  同じメニューにある「検証」は、ブラウザが表示のために組み立てた「いまの画面の状態」や、届いたファイルの一覧を見られる道具です。こちらでも見られます。
  このAPIキーは、届いたファイルの中に入っているので、「ページのソースを表示」でも「検証」でも、見ようと思えば誰でも見られます。それでも問題がないように作られたAPIキーです。データを守っているのは、APIキーではなく、サービス側に設定する読み書きのルールです。
  
  
• Secret keys（秘密のキー）：絶対に外に出してはいけないAPIキーです。これが漏れると、上の読み書きのルールを越えて、データを全部読めますし、書き換えたり消したりもできてしまいます。それに、そのサービスをあなたのアカウントとして使われてしまうかもしれません。そのように使われた分の料金は、あなたに請求されます。従量課金（使った量で料金が決まるサービス／外部のAIやサーバーなど）のAPIキーだと、とんでもなく高い請求になることがあります。
  
  

もし「APIキーを漏らしたかもしれない」と気づいたら、コードを直すより先に、APIキーを発行したサービスの画面で、そのAPIキーを無効にして新しく作り直してください。一度でも外に出たAPIキーは、もう秘密ではないものとして扱います。

ブラウザで動くアプリが使うのは、Publishable keyです。Secret keysは、ブラウザで動くアプリでは使いません。上に書いたとおり、アプリの中に入れたものは誰でも見られるので、入れてはいけないAPIキーです。Supabaseでは、Secret keysをブラウザから使おうとすると、Supabaseの側で受け付けない作りになっています。

Secret keysを使うのは、サーバー側で動く処理からです。ブラウザではなく、Cloudflareなどのサーバーの上で動くプログラムのことで、たとえば、外部のAIを使う機能や、管理する人だけができる処理を足すときに用意します。その処理をCloudflareの上で動かす場合は、Secret keysをCloudflareにシークレットとして登録することがあります。

どちらのAPIキーをどこで使うかは、作るアプリの作りで決まります。分からなければ、AIに「このアプリで使うのは、どちらのAPIキー？」と聞いてください。

Publishable keyのように、外から見えても実害がない種類のAPIキーもありますが、APIキーは種類にかかわらず、全部シークレットとして登録するのをおすすめします。サービスによっては、2種類のAPIキーが同じ画面に並んでいて、見た目も似ています。まちがえて扱ったときに困らないようにするためです。

②設定を変えたあとの「再デプロイ」は、一番上の履歴から

デプロイとは、Cloudflareがアプリを公開する処理のことです。
ふだんは、CloudflareとGitHubを連携しておけば、GitHubにファイルを送る（Pushする）たびに、Cloudflareが自動でデプロイします。自分でCloudflareの画面を触る必要はありません。

自分でデプロイし直す（再デプロイする）のは、アプリのファイルは変えずに、Cloudflareの設定だけを変えたときです。
たとえば、上の①で「変数とシークレット」にAPIキーを登録したときや、登録したAPIキーを変えたときです。登録した値は、次にデプロイしたときから使われます。登録しただけでは、公開中のアプリには反映されません。そこで、ファイルはそのままで、もう一度デプロイします。

このとき、注意することが1つあります。

再デプロイは、デプロイの履歴の各行にある「デプロイを再試行」から行いますが、選んだ履歴の「当時のファイル」でビルドし直すという仕様になっています。古い履歴を選んで再試行すると、公開中のアプリが、選んだ履歴の時点の古い状態に巻き戻ってしまいます。

設定を変えて、いまのアプリのまま公開し直したいときは、一番上＝最新の履歴から行ってください。プロジェクトの画面上部にある「デプロイ」のタブを開き、「All deployments」の一番上の行の右にある「⋯」を押すと、「デプロイを再試行」が出てきます。👇

「⋯」のところを拡大すると、こうなります。いちばん上の行の「⋯」を押すと、「デプロイを再試行」と「展開を削除する」の2つが出ます。👇

③無料枠は「ビルドが月500回まで」

Cloudflare Pagesの無料枠では、ビルドが月500回までです。
ビルドとは、Cloudflareが受け取ったファイルを、公開できる形にする処理のことです。最初に公開するときも、そのあと更新するときも、1回ずつ数えます。GitHubにファイルを送る（Pushする）たびに1回です。

500回というと「余裕では？」と思いますが、「直して→上げて→やっぱりここも直して→上げて」を繰り返すと、思っているより早く減っていくかもしれません。この500回はアカウント全体の合計なので、アプリを何本も公開している場合は、全部のアプリの分を足した数になります。

回数を節約したいとき

直すたびにGitHubに上げず（Pushせず）、何か所か直してからまとめて上げると、回数の節約になります。
GitHubに上げる前でも、アプリの状態は、自分のパソコンのブラウザで開いて確かめられます。
開発の世界では、自分のパソコンの中のことを「ローカル」と呼びます。そこから、公開せずにパソコンの中だけで動かして確かめることを「ローカルで確認する」と言います。確かめ方が分からなければ、AIに「Pushする前に、パソコンでアプリの動きを確認したい」と聞いてください。

毎回まとめてPushしてほしい場合は、Claude Codeに次のように頼んでおくと、Pushする前に毎回確認してくれます。

メモなどのファイルだけを直したときに、ビルドを止める方法2つ

監視パスを構築する／Build watch paths

アプリのフォルダには、アプリ本体（index.htmlなど）のほかに、メモや、AIに読ませる説明のファイル（CLAUDE.mdなど）を置いていることがあります。
何も設定していないと、こういうファイルだけを直してPushしたときも、ビルドが1回使われます。アプリ自体の中身は変わっていないのに、同じアプリがもう一度公開されるということです。

このような場合にビルドを止めるのが、「監視パスを構築する」という設定です（英語表示では Build watch paths）。「このファイルだけが変わったときは、ビルドしない」を、プロジェクトごとに設定しておけます。ビルドが走らないので、その回のPushは、500回のうちの1回を使いません。

1. Cloudflareにログインし、左メニューの「Workers & Pages」から、そのアプリのプロジェクトを開きます。
2. 画面上部の「設定」のタブを開き、「ビルド」の中の「監視パスを構築する」の行で、右にある鉛筆のマークを押します。👇
この画像の「ビルド構成」に入っている中身は、アプリの作りによって違うので、同じでなくても気にしなくて大丈夫です。

3. 鉛筆のマークを押すと、下の画像のように、右側に設定の画面が開きます。上の「パスを含む」（Include paths）には、最初から * が入っています。「すべてのファイル」という意味なので、そのままにします。
4. 下の「パスを除外する」（Exclude paths）に、ビルドしなくていいファイルの名前を入れます。
メモを .md（マークダウン）というファイルで書いている場合は、*.md と入れます。

5. 右下の「保存」を押します。


*.md は「拡張子が .md のファイル全部」という意味です。フォルダの中のフォルダにある .md のファイルも含まれます。
ここに何を入れるかは、人によって違います。メモを .txt で書いているなら *.txt、両方あるなら2つとも入れます。自分のフォルダに何が入っているか分からなければ、下の「設定するときの注意」に書いた頼み方で、Claude Codeに聞いてください。

index.htmlなど、アプリ本体のファイルは除外されないので、アプリを直してGitHubに上げたときは、これまでどおり公開されます。1回のPushの中に、除外していないファイルが1つでも含まれていれば、ビルドされます。

コミットメッセージの先頭に[CI Skip]を付ける

上記の設定をせずに、その回だけビルドを止める方法もあります。コミットメッセージ（コミットにつける説明文）の先頭に [CI Skip] と付けると、そのPushではビルドされません。Claude Codeに頼むなら、「アプリ本体は触っていないので、コミットメッセージの先頭に[CI Skip]を付けてPushして」と伝えます。
ただし、アプリ本体を直したときに付けると、直したアプリが公開されません。メモなどのファイルだけを直したときに使ってください。

使った回数を確かめたいとき

「今月あと何回使えるか」という残りの回数を確認できる画面なのですが、私はいまだ見つけられていません（2026年9月時点）。公式の説明の中にも、どこで見られるかという記載を見つけられていません。ずっと探しているのですが…あるのか、ないのか、分かりません。

仕方ないので、私は下記の、原始的な方法で数えています。

Cloudflareで、そのアプリのプロジェクトを開き、画面上部の「デプロイ」のタブを開きます。
「All deployments」の1行が1回のビルドです。この行の数を数えます。

「Status」の列には「a day ago（1日前）」「a month ago（1か月前）」という表示が並んでいて、日付そのものは出ていません。
この「Status」と、その右の「Details」の場所は、「公開したあと、アプリのURLはどこで見られる？」で出した画像の、右にある2つの赤枠のところです。同じ画像を下にもう一度載せます。👇

正確な日付を確かめたいときは、その行にある「Details」を押します。すると「デプロイの詳細」という画面になり、「ステータス:」のところに日付と時刻が出ています。下の画像の赤枠が、その場所です。

コネクタについては、こちらの記事で解説しています。

AIに任せずに自分でやる場合：GitHub Desktopでコミットとプッシュ

ステップ2〜4（GitHubにリポジトリ作成&Push）を、AIに任せずに自分でやる方法です。
全部AIに任せていると、GitHubに何が起きているのかが見えにくくなりますが、自分で一度やってみると、「コミット」と「プッシュ」が何なのかが分かります。やっていることのイメージが湧きやすくなるので、勉強のためにやってみたい！という方への解説です。
全部AIにやってもらう方は、読み飛ばしてください。

この章でやるのは、この4つです。

①パソコンにあるアプリのフォルダをリポジトリにして、非公開でGitHubに上げる
②非公開になっているかを確かめる
③そのあとアプリを直したら、コミットする
④プッシュして、GitHubに送る

GitHub Desktopは、パソコンにインストールして使うアプリです。名前が似ていますが、ブラウザで開くGitHubのサイト（github.com）とは別のものです。①③④はGitHub Desktopで、②の確認だけはGitHubのサイトで行います。

GitHub Desktopを入れて、サインインする

1. GitHub Desktop（desktop.github.com） を開き、「今すぐダウンロード」を押します（下の画像の赤枠）。

2. ダウンロードの画面になります。👇
この画面は、ブラウザから「いまWindowsか、Macか」を読み取って、大きいボタン（上の赤枠）の中身を出し分けています。
下の画面はWindowsのパソコンなので、「Download for Windows (64bit)」が大きく出ていて、Mac用は右下に小さく出ています。Macで開いた場合は、逆にMac用が大きく出て、Windows用が小さいリンクになります（Macは機種によってボタンの名前が変わります）。
いま使っているパソコンに合ったものが大きく出るので、たいていはそこを押せば大丈夫です。
Windowsのパソコンで見ていて、Mac用のファイルが欲しいときは、右下の「Mac?」の中の「Download for macOS」（下の赤枠）を押します。

3. ダウンロードしたファイルを開いて、インストールします。

4. GitHub Desktopの上のメニューから、Windowsは「File」→「Options」、Macは「GitHub Desktop」→「Settings」を開きます。下の画像はWindowsの場合です。

5. 「Accounts」の「Sign into GitHub.com」を押します。

6. 「Continue With Browser」を押すと、ブラウザが開きます。ステップ1のアカウントでサインインして、案内に沿ってGitHub Desktopに戻ります。

パソコンにあるアプリのフォルダをリポジトリにして、GitHubに上げる

ここでやるのは、いまパソコンにあるアプリのフォルダを、そのままGitHubに送れる形にすることです。
フォルダのコピーを別に作るわけではありません。いまのフォルダが、そのままリポジトリになります。中に入っているファイルもそのままです。変わるのは、そのフォルダに「変更を記録する仕組み」が足されることだけです。

1. 「File」→「Add local repository」を開き、アプリのフォルダを選びます。👇

2. 「This directory does not appear to be a Git repository.」（このフォルダはGitのリポジトリではないようです）と出るので、その中の「create a repository」（下の画像の赤枠）を押します。👇

3. 「Create a new repository」という画面が出ます。👇
この画面は、前の手順で選んだフォルダの情報が、最初から入った状態で開きます。
「Name」にはそのフォルダの名前、「Local path」にはそのフォルダの場所が、すでに入っています。
Nameの欄は、そのまま変えずに進みます（日本語のフォルダ名でもそのままでOK）。ここで変えると失敗します。その理由は、すぐ下の【注意！】に書きました。
その下の「Description」（説明）は、空欄のままでかまいません。

この画面には、「README」「Git ignore」「License」を、リポジトリと一緒に作るかどうかを選ぶ欄もあります。READMEは説明書のファイル、Git ignoreはGitHubに送らないファイルの指定、Licenseは他の人が使うときの条件です。
どれも作らなくて大丈夫です。
最初の状態（READMEのチェックは入れない、あとの2つは「None」）のまま、「Create repository」（上の画像の下の赤枠）を押します。

4. 画面上の「History」タブを開いて、「Initial commit」という記録が1件できているか見ます（下の画像の左の赤枠）。
※「History」に何も無いときは、このあとの「【注意！】「Create a new repository」でNameを先に変えると起きること」を読んでください。

できていれば、フォルダの中のファイルが最初のコミットになっています（タブの左「Changes」は空で正常です）。
「Initial commit」を選ぶと、右にコミットされたファイルの一覧が出ます（下の画像の右の赤枠）。次の注意で、ここを見ます。

5. 「Publish repository」を押します。場所は2か所あって、どちらでも同じです（下の画像の上の赤枠＝画面の上のメニュー、下の赤枠＝画面の真ん中のボタン）。
画面の上のメニューのボタンは、「Changes」「History」のどちらのタブを開いていても出ています。画面の真ん中のボタンを使う場合は、手順4で「History」に移っているので、左上の「Changes」タブに戻ってください。

6. 「Publish repository」を押すと、下の画像の「Publish repository」というポップアップが出てきます。ここで3つのことをします。👇

① Nameの欄（上の赤枠）には、パソコンのフォルダ名がそのまま入っています。これを半角英数字に変えます。GitHubのリポジトリ名に使えるのは、半角の英字・数字と「.」「-」「_」だけだからです。パソコンのフォルダ名は日本語のまま、GitHub上の名前だけを半角英数字にできます。変えるのはここだけです。
その下の「Description」（説明）は、空欄のままでかまいません。

②「Keep this code private」（このコードを非公開にしておく）にチェックが入っていることを確かめます（真ん中の赤枠）。ここが非公開・公開の分かれ目です。チェックが外れていると、世界中の誰でも見られる状態（公開）で上がります。

③ 確かめたら、右下の「Publish repository」（下の赤枠）を押します。

ポップアップの上には「GitHub.com」と「GitHub Enterprise」という2つのタブがあります。GitHub Enterpriseは、会社などが自社専用に用意して使う有料の仕組みです。ふつうのGitHubアカウントで使うので、「GitHub.com」のままで大丈夫です。

リポジトリができたら、非公開になっているかを自分の目で確かめます。
確かめるのは、GitHub Desktopではなく、ブラウザで開くGitHubのサイト（github.com）です。GitHub Desktopはパソコンの中のフォルダを扱うアプリで、公開・非公開はGitHubのサイト側の設定だからです。
GitHubのサイト（github.com）を開いて、いま上げたリポジトリのページを開き、リポジトリ名の右に「Private」の文字が出ていればOKです。見る場所はステップ3の「非公開になっているかを、自分の目で確かめる」と同じなので、画像はそちらを見てください。

【注意！】「Create a new repository」でNameを先に変えると起きること

これをやると失敗してしまいます。
「Create a new repository」の画面で、Nameをフォルダ名と違う名前に変えると、パソコンの中に、その変えた名前の別フォルダが新しく作られてしまいます。
その新しいフォルダに入っているのは、設定用の「.git」「.gitattributes」の2つだけです。アプリのファイルは1つも入っていません。そして、もとのアプリのフォルダのほうは、リポジトリにならないままです。

「Create repository」を押したあと、「History」に何も無いときは、これが起きています。その場合は、次の手順で元に戻してから、やり直してください。

1. GitHub Desktopの左のリストで、まちがってできたリポジトリを右クリックして、出てきたメニューの「Remove…」を押します。👇

押すと、下の画像の「Remove repository」という確認の画面が出ます。👇
「Also move this repository to Recycle Bin」（このリポジトリをごみ箱にも移す）のチェックは、入れないでください（上の赤枠）。
そのまま「Remove」（下の赤枠）を押します。

「Also move this repository to Recycle Bin」のチェックを入れると、GitHub Desktopの一覧から外れるだけでなく、そのフォルダ自体がパソコンのごみ箱に移されます。消したいのは新しくできてしまったフォルダなので、入れても困らないのですが、もしリポジトリを選びまちがえていた場合、アプリのフォルダごとごみ箱に入ります。チェックを外しておいて、次の2で自分の目で見てから消すほうが安全です。
（チェックを入れてしまっても、ごみ箱に入るだけなので、気づいたときに戻せます。）

2. パソコンのフォルダの画面（Windowsはエクスプローラー、MacはFinder）で、新しくできてしまったフォルダ（「.git」「.gitattributes」だけが入ったもの）を削除します。

3. 「Add local repository」の手順から、もう一度やり直します。
（今度は「Create a new repository」の画面でNameを変えません）

2回目からの更新：コミットしてプッシュ

1. GitHub Desktopを開くと、左の「Changes」に、前回のコミットのあとに変わったファイルが並びます（下の画像の赤枠が、そのタブです）。何も変えていない場合は、ここには何も並びません。そのときは、下の画像のように左上が「0 changed files」（変わったファイルは0件）になり、画面の右の広いところに大きく「No local changes」（変更はありません）と出ます。その場合、コミットするものはありません。

2. 並んでいるファイルを見て、外に出したくないファイルが混ざっていないか確認します。APIキーを書いたファイル、自分用のメモ、誰かの個人情報が入ったファイルなどです。混ざっていたら、そのままAIに「GitHubに上げてはいけないファイルが入っている。どうしたらいい？」と相談してください。

3. 左下の「Summary（サマリー）」＝「要約」の欄に、何を変えたかを短く書きます（下の画像の上の赤枠）。日本語で大丈夫です。「買い物リストの並び順を直した」くらいの、1行で十分です。あとで自分が見て思い出せれば、それでOKです。
この欄には「Summary (required)」と書かれていて、「required（リクワイアド）」は「必須」という意味です。空欄のままではコミットできません。
その下の「Description（ディスクリプション）」＝「説明」の欄（下の画像の真ん中の赤枠）は、もっと詳しく書きたいときに使う欄で、空欄のままでかまいません。

4. 「Commit to main（コミット トゥ メイン）」を押します（一番下の赤枠）。「main に記録する」という意味です。「main（メイン）」は、記録をためていく場所につけられた名前で、最初からこの名前になっています。
ここでパソコンの中に記録されます。

5. コミットすると、画面の上のメニューの右のボタンが「Push origin（プッシュ オリジン）」に変わります。これを押します。ここでGitHubに届き、Cloudflareの公開も自動で新しくなります。
「画面の上のメニューの右のボタン」は、手順5で出した画像の上の赤枠のところです。あの画像では「Publish repository」と出ていた、その同じ場所です。
このボタンは、そのときの状況で名前が変わります。まだGitHubに上げていないときは「Publish repository」、送るものがないときは「Fetch origin」、送るコミットがあるときは「Push origin」です。押す場所は、ずっと同じところです。

まとめ

アプリの公開は、この順番で進めればOKです。

AIに任せずに自分でやりたい場合は、GitHub Desktopでコミットとプッシュする方法もあります。

アカウント作成とログインさえ済ませれば、あとの作業はAIが並走してくれます。
「このアプリをGitHubとCloudflareで公開したい。手順を1つずつ案内して」。
この一言から始めてみてください。
分からなくなったら全部AIに聞けば教えてくれます。どれだけ聞いてもAIは怒りません。笑

別の端末でも同じデータを見られるようにしたい（同期したい）場合は、つづきの「データ同期編」で、データの置き場所にSupabaseを使う方法を解説します。
（現在執筆中です。完成次第、公開します。）

この記事に出てきたページのリンク集

記事の中で開いたページを、サービスごとにまとめました。あとで「あのページ、どこだっけ」となったときに使ってください。
GitHubとCloudflareの設定のページは、ログインした状態で開いてください。ログインしていないと、先にログインの画面が出ます。

GitHub

• GitHubのサイト（github.com）：GitHubのトップページです。サインインしていれば、自分のリポジトリの一覧が出ます。
• GitHubの登録ページ（github.com/signup）：GitHubのアカウントを作るページです（ステップ1）。
• GitHubのデバイス認証のページ（github.com/login/device）：GitHub CLIに許可を出すときに、コードを入れるページです（ステップ2）。
• GitHubの許可の設定ページ（github.com/settings/applications）：出した許可を確かめたり、取り消したりするページです。
• GitHub Desktop（desktop.github.com）：GitHub Desktopをダウンロードするページです（AIに任せずに自分でやる場合）。

Cloudflare

• Cloudflareの登録ページ（dash.cloudflare.com/sign-up）：Cloudflareのアカウントを作るページです（ステップ5）。
• Cloudflare（dash.cloudflare.com）：ログインして使う、管理画面のトップです。
• Workers & Pages：公開したアプリ（プロジェクト）の一覧です。アプリのURLやビルドの履歴は、ここからアプリを選んで見ます（URLの確認）。
• Pagesの作成画面：GitHubとつないで、新しくアプリを公開するときの入口です（ステップ6）。

Supabase

• Supabase（supabase.com）：アプリのデータを預けておく場所と、ログインの仕組みを用意してくれるサービスです。

この記事で紹介した、このブログの記事

• 【初心者向け】Claudeデスクトップアプリのインストール方法徹底解説
• Claudeのコネクタとは？つなぎ方と注意点を解説