Cloudflare Pagesの使い方｜GitHub連携でWebアプリを無料公開する手順

先日、ChatGPTとCodexを使って、フリマの利益管理アプリ「ウリミル」を作りました。プログラミングの知識がほとんどない僕でも、AIに相談しながら動くアプリを作れたのは驚きでした。

ただ、アプリを作っただけでは、ほかの人に使ってもらえません。そこで今回利用したのがCloudflare Pages（クラウドフレア・ページズ）というサービスです。

僕の場合は追加の有料サーバーを契約せずに、Webアプリを一般公開するところまで進められました。今回は実際に送った操作画面を使いながら、Cloudflare Pagesの使い方、GitHub連携、ビルド設定、公開後の更新方法を初心者向けに紹介します。

かつきちです。Twitterもやってます。  【レビューなどの依頼はこちら】

この記事は、ChatGPT・Codexを使ったアプリ開発の続きです。作り始めた手順や、ウリミルを作った体験は以下の記事で紹介しています。

結論｜Cloudflare Pagesならプログラミング未経験でも無料公開できた

最初に結論からお伝えすると、僕のような初心者でも、Cloudflare Pagesを使ってWebアプリを公開できました。

今回作ったウリミルは、メルカリやYahoo!フリマなどで販売した商品の売上・利益を記録するWebアプリです。公開したURLはhttps://urimiru.pages.dev/。アクセスすればアプリを利用できます。

ウリミルを無料で使ってみる

全体の流れは「ChatGPTとCodexで作る → GitHubにコードを保存する → Cloudflare Pagesで公開する」。初めて触るサービスばかりでしたが、AIに質問しながら進められました。

Cloudflare Pagesとは？無料プランで何ができる？

Cloudflare Pagesは、WebサイトやWebアプリのファイルをインターネット上に公開できるサービスです。作ったプログラムを誰でもアクセスできるURLに配置できる、と考えるとわかりやすいと思います。

僕が今回選んだのは無料プランです。2026年11月時点のCloudflare公式情報では、無料プランの月間ビルド数は500回、静的ファイルへのアクセスは無料・無制限と案内されています。

この「月500回」は月500人までしか見られないという意味ではありません。サイトを公開するためのビルド処理の回数です。ただし、Pages Functionsや外部のデータベース、別の有料機能を利用する場合はそれぞれ別の制限・料金が関係します。

Cloudflareの管理画面には「Workers & Pages」と表示されます。Workersはサーバー側で処理を動かす用途にも対応するサービスで、Pagesは今回のようなサイト公開に利用できます。Cloudflareは新規アプリにWorkersを推奨する案内も出しているため、画面が記事と異なることがあります。

公開前に準備するもの｜GitHubとアプリのファイル

今回紹介するGitHub連携で必要なのは、Cloudflareのアカウント、GitHubのアカウント、公開したいWebアプリのファイルの3つです。

• Cloudflareアカウント：管理画面からPagesを設定する
• GitHubアカウント：GitHubでコードを保存・管理する
• Webアプリのファイル：HTML・CSS・JavaScriptなど。使っている開発環境によって構成が異なる

GitHubの「リポジトリ」は、プログラムをまとめて保存する場所です。僕はChatGPT・Codexで作ったコードをGitHubに置いてから、Cloudflare Pagesに連携しました。

GitHubのリポジトリを非公開にしていても連携可能ですが、Pagesにデプロイした画面やブラウザに配信されるコードは公開されるため、秘密のAPIキーやパスワードは含めないようにしてください。

Cloudflare Pagesの使い方｜GitHub連携から公開まで

ここからは、実際にウリミルを公開したときの画面を使って手順を紹介します。画面の英語表記やボタンの位置は更新されることがあります。

手順1：Cloudflareの「Workers & Pages」を開く

Cloudflareの管理画面にログインし、左側の「Compute」から「Workers & Pages」を開きます。次に、新しいアプリケーションを作成する画面へ進みます。

僕が操作した画面では、作成メニューの下側に「Continue to Pages」というリンクがありました。これを選んでPagesの公開画面へ進みました。

手順2：「Import an existing Git repository」を選ぶ

Pagesの「Get started」画面では、Gitリポジトリを読み込む方法と、ファイルを直接アップロードする方法が表示されました。

今回はGitHubと連携して、あとからの更新も自動反映したいので「Import an existing Git repository」の「Get started」を選びます。

手順3：GitHubに接続してリポジトリを選ぶ

GitHubの認証画面が表示されたら、連携するアカウントやアクセス権を確認して許可します。その後、Cloudflare側に表示されたリポジトリから、公開したいアプリを選択します。

GitHubに複数のリポジトリがある人は、違うプロジェクトを選ばないように注意しましょう。なお、記事のスクリーンショットではメールアドレスやアカウント名が見えないように加工しています。

手順4：プロジェクト名とビルド設定を入力する

ここは初心者が迷いやすいところだと思います。僕も最初は「ビルドって何？」という状態でした。

ウリミルの公開時には、Project nameを「urimiru」、Production branchを「main」、Framework presetを「None」、Build commandを「npm run build」、Build output directoryを「dist」に設定しました。

ただし、この値をすべてのWebアプリでそのまま使えるわけではありません。例えば、HTMLファイルだけで作ったサイトならビルドコマンドが不要な場合もあります。公開するアプリの構成に合わせて設定してください。

設定に迷ったら、GitHubにあるファイル構成や`package.json`の内容を確認しながらChatGPTに聞くのも方法のひとつです。ただし、認証情報などは貼り付けないよう注意しましょう。

手順5：デプロイしてURLを確認する

設定できたらデプロイを開始します。「デプロイ」は、作ったアプリを公開環境に配置する作業のことです。成功すると、基本的に`プロジェクト名.pages.dev`という形式のURLが発行されます。

僕の場合は「urimiru.pages.dev」になりました。実際にそのURLを開いて、パソコン・スマホの両方で画面が表示されるか確認しましょう。

ウリミルを無料で使ってみる

公開したアプリを修正・更新する方法

GitHubとCloudflare Pagesを連携するメリットのひとつが、アプリを修正したときの更新です。GitHubの本番公開用ブランチへ変更を反映すると、自動でビルド・デプロイできる仕組みになっています。

• ChatGPTやCodexにアプリの修正を依頼する
• 変更内容を確認してGitHubの本番ブランチへ反映する
• Cloudflare Pagesのデプロイ処理が実行される
• 完了後、同じURLで新しい画面を確認する

その都度、新しいURLを作り直さなくてよいのは便利でした。なお、自動デプロイが有効なことが前提で、変更を公開する前に動作確認することも大切です。

Cloudflare Pagesで公開できないときの対処法

404エラーでページが表示されない

トップページが404になるときは、公開先のフォルダに`index.html`があるか、Build output directoryを正しく指定しているか確認してみてください。SPAなど、アプリの構成によってはルーティングの設定も関係します。

ビルドエラーが出た

Cloudflare Pagesのデプロイ履歴からビルドログを確認します。Build commandの誤り、依存パッケージ、出力フォルダの指定などが原因になることがあります。ログをAIに相談する場合は秘密情報を隠してから共有しましょう。

公開したURLで警告画面が表示された

僕のウリミルでも、公開後にブラウザの警告画面が出ることがありました。その後、Search Consoleで所有権を確認するなどの対応を進め、通常の画面で表示されることを確認できました。

ただし、Search Consoleの所有権確認だけで警告が解消すると断定はできません。警告の種類によって原因や対応方法は異なるので、安全性を確認することが先です。

公開後に確認したい注意点

• アプリに秘密のAPIキー・パスワード・個人情報が含まれていないか
• データをどこに保存する設計か。Pagesに公開するだけではデータベースは作られない
• 無料枠の対象が静的ファイルだけか、Functionsやほかのサービスも使っているか
• Google検索に掲載されるかどうかは公開とは別で、Search Consoleの登録だけでは掲載を保証しない

まとめ｜アイデアを無料で公開できるのは面白い

今回は、Cloudflare Pagesを使ってGitHubのWebアプリを無料公開する方法を紹介しました。僕も最初はCloudflareとGitHubの違いすらよくわからず、操作のたびにChatGPTへ質問していました。

それでも実際に「作る → GitHubに保存 → Pagesで公開 → URLで確認」まで進められたのは大きな収穫です。初心者の人も、まずは小さなWebアプリから試すと仕組みが理解しやすいと思います。

僕が公開したフリマ利益管理アプリ「ウリミル」は、以下のボタンから無料で使えます。

ウリミルを無料で使ってみる

ChatGPTとCodexを使った開発自体に興味がある人は、こちらの記事も参考にしてみてください。

※掲載画像は僕が2026年11月8日に実際に撮影した操作画面です。個人情報につながる部分を削除し、見やすい範囲でトリミング・圧縮しています。画面の表示や料金は変更される可能性があります。

参考：Cloudflare公式 Git連携ガイド／Cloudflare公式 制限一覧