作ったWebアプリを無料で公開する方法(Cloudflare×GitHub・実際にやった手順)
ブラウザで動くWebアプリなら、App Storeの審査もなく、すぐに世界へ公開できます。このサイト(AI個人開発スタートナビ)も、GitHubに置いたプログラムを Cloudflare で自動公開しています。そのとき実際にやった手順と、つまずいたところをまとめます。
しくみ
GitHubのリポジトリに変更を保存すると、Cloudflareがそれを受け取り、自動でサイトを作り直して公開します。一度設定すれば、あとはClaude Codeで直すたびに最新の内容が公開されます。
公開の手順
- Cloudflareのアカウントを作ります(無料で始められます。無料で使える範囲は公式で確認してください)
- ダッシュボードの Workers & Pages から新しく作成し、Gitリポジトリをインポートして、アプリのリポジトリを選びます
- 公開するブランチ(本番ブランチ)と、サイトを作るためのコマンド(ビルドコマンド)を設定します。何を入れればよいかは、Claude Codeに「Cloudflareで公開したい。設定に入れる値を教えて」と聞くと教えてくれます
- デプロイ(公開の作業)が成功したら、表示されたURLで確認します
つまずいたエラーと直し方
最初のデプロイでは、次のエラーで失敗しました。
Error: Cannot find module '/opt/buildhome/repo/build.js'
原因は、サイトを作るプログラムがリポジトリの中のフォルダに入っていたのに、コマンドがリポジトリのいちばん上で実行されていたことでした。コマンドにフォルダ名を含めて(例:node フォルダ名/build.js)、再デプロイしたら成功しました。
エラーが出たら、ログを丸ごとClaude Codeに貼り付けて「原因と直し方を教えて」と聞くのがいちばん早いです。
独自ドメイン・サブドメインを使う
すでに持っているドメインがあれば、その下に「サブドメイン」を作って使えます(例:このサイトは sumikaedtech.com の下の ai-start-navi.sumikaedtech.com)。Cloudflareの設定画面の「ドメインとルート」から、カスタムドメインとして追加します。
公開したら、検索に載せる準備
Google Search Console にサイトを登録し、サイトマップを送信します。送信で権限のエラーが出たときの対処は「サイトマップ送信の権限エラーの直し方」にまとめています。
何から始めればいいか迷ったら
作りたいものを選ぶと、必要な手続きだけを順番に並べます(無料・登録不要)。
参考にした公式の情報
料金・審査の期間・画面の表示などは変わることがあります。手続きの前に、必ず公式の最新情報を確認してください。内容の誤りはこちらからお知らせください。