無料でWebアプリを公開してみた！Cloudflare Pagesの始め方

両学長が最近のライブで「セキュリティの面でもGitHubよりCloudflareがいいよ」ってお話されてたのを聞いて「じゃあやってみよう！」と試してみたら、あっさり公開できちゃいました😊

日本語表記だし、ややこしい設定も不要、しかも無料・クレカなし・ターミナルも不要。

やったことはフォルダをドラッグ＆ドロップするだけなので、その手順をまとめました。

💻 Cloudflare Pagesとは？

ひとことで言うと、Webアプリを無料で公開できる場所です。

・無料で使える（クレジットカード不要）
・フォルダをアップロードするだけで公開できる
・自動で ○○.pages.dev のURLが発行される
・世界中のサーバーから配信されるので表示が速い

難しい設定なしにURLが発行されるので、Claude Codeで作ったアプリとの相性がいいんです。

🖊 手順・やり方

STEP 1｜アカウントを作る

1. cloudflare.com にアクセスして「無料で始める」をクリック
2. メールアドレスとパスワードを入力して登録（今回はGoogleアカウントを使用しました）
3.「利用方法を教えてください」「ご自身の役割」「どのように開始しますか？」という画面が出たらすべて「スキップ」でOK

4. これで準備完了です

STEP 2｜Workers と Pagesを開く

1. 左メニューの「Workers と Pages」をクリック
2. 「アプリケーションを作成する」をクリック

STEP 3｜Pages（ファイルアップロード）を選択する

1. 画面下部の「Pages を導入しようとお考えですか? 始める」をクリック
2. 「ファイルをドラッグアンドドロップする」を選択

STEP 4｜プロジェクト名を入力してフォルダをアップロードする

1. プロジェクト名を入力（例：`project-name`）し、「プロジェクトの作成」をクリック
※プロジェクト名は、URLの一部になります。英数字・ハイフンのみ使用可
2. アップロードエリアにフォルダをドラッグ＆ドロップ

3. 「◯/◯ 個のファイルがアップロードされました」と表示されたら成功！
4. 「サイトをデプロイ」ボタンをクリック

STEP 5｜公開完了・URLを確認する

「成功しました！」の画面が表示され、URLが発行されます。
`プロジェクト名.pages.dev` の形式で、世界中からアクセスできる状態になっています。

URLをクリックしてアプリが表示されれば完成です！

⚠️ ポイント・注意点

・フォルダごとアップロードが必須：ファイル単体ではエラーになります

・ファイルを更新したいとき：プロジェクトを開いて「デプロイを作成する」から再アップロードするだけ
・独自ドメインも使える：pages.devのURLに加えて、自分のドメインも設定可能（別途ドメイン取得が必要）

✅ まとめ

・Cloudflare Pagesは無料・クレカなしで使える

・フォルダごとドラッグ＆ドロップするだけでOK（ファイル単体はNG）

・10〜15分でURLが発行される

・Claude Codeで作ったアプリをすぐ共有できる

💬 おわりに

この記事はKOBEゆるカフェの日程調整アプリを公開しようとして試した手順をまとめました。
最初はファイル単体でアップロードしてエラーになりましたが、フォルダごとにすれば解決しました。

「Webに公開するって難しそう」と思っていた方にこそ、ぜひ試してみてほしいです。
Claude Codeでアプリを作ったことがある方なら、本当にドラッグ＆ドロップするだけでできます！

これから始める方の参考になれば嬉しいです。何か質問があればコメントください☺️