見出し画像

Claude Codeで作ったサイトをCloudflareに無料公開する方法｜GitHub連携からVercel移行まで初心者向けに解説

ないと｜AI時短化

あなたは、Claude Codeで作ったサイトをどこに公開していますか？

私はこれまで、Claude CodeでバイブコーディングしたサイトをGitHubにアップロードし、Vercelからデプロイしていました。

なぜVercelを使っていたのかと言うと、知り合いが使っていたからです。そして、他のサービスをよく知らなかったから・・・。

VercelはGitHubと簡単に連携できますし、非エンジニアの私でもサイトを公開できました。とても便利なサービスだと思っています。

ただ、プロフィールサイトや独自商品の紹介ページ、メルマガ登録用のLPなど、副業で使う商用利用のサイトが増えてくると、気になってくることがあります。

それが、毎月のランニングコストです。

Vercelの無料プランであるHobbyプランは、公式には個人の非商用利用を対象としています。自分の商品やサービスを紹介する商用サイトで利用する場合、Proプランは月額20ドルからです。

月額20ドルなので、1ドル150円なら約3,000円。

1か月だけなら、それほど大きな金額ではないかもしれません。

しかし、1年間なら約36,000円。サイトを使い続ける限り、毎年コストが発生します。

そこで今回、Cloudflareを使ってサイトを公開してみることにしました。

とはいえ、私はCloudflareの専門的な仕組みや、サイトの技術構成を詳しく理解していたわけではありません。

それでも、

  • Cloudflareのアカウントを作る

  • GitHubと接続する

  • 公開するサイトを選ぶ

  • デプロイする

という流れで、サイトを公開できました♪

⇩これです

この記事では、私と同じような非エンジニアでも、画面を見ながらCloudflareにデプロイできるように、実際に私が迷ったところも含めて説明していきます。

VercelからCloudflareへ移行したい方だけでなく、Claude Codeで作ったサイトを初めてインターネット上に公開する方にも参考になる内容です。

なお、この記事は2026年8月時点の画面と料金体系をもとに書いています。サービスの画面や料金は変更される可能性がありますので、その点はご了承くださいね。

この記事の対象者

この記事は、次のような方を対象にしています。

  • Claude Codeでサイトを作った

  • CursorやCodexなどでバイブコーディングしている

  • GitHubにはサイトをアップロードできている

  • Vercelの月額料金が気になっている

  • Cloudflareを初めて使う

  • 自分はエンジニアではない

  • ビルドやサーバーなどの専門用語はよく分からない

  • 独自商品やプロフィールサイトを公開したい

  • メルマガ登録用のLPを公開したい

この記事では、サイトのファイルがGitHubにアップロードされている状態から説明します。

GitHubへのアップロード方法まで入れると内容がかなり長くなるため、今回はCloudflareで公開する部分に絞ります。

そもそもデプロイとは？

まず、「デプロイ」という言葉について簡単に説明します。

デプロイとは、作ったサイトをインターネット上で見られる状態にすることです。

Claude Codeでサイトを作っただけでは、基本的に自分のパソコンの中にあるだけです。

そのサイトを他の人にも見てもらうためには、インターネット上へ公開する必要があります。

その公開作業がデプロイです。

今回の流れを簡単にすると、次のようになります。


それぞれの役割も整理してみますね。

  • Claude Code：サイトを作る

  • GitHub：サイトのファイルを保管する

  • Cloudflare：サイトをインターネット上に公開する

GitHubからCloudflareへ、手作業でファイルを移すわけではありません。

CloudflareとGitHubを接続すると、CloudflareがGitHubにあるファイルを読み込み、サイトとして公開してくれます。

ね？仕組みが分かれば、それほど難しく感じないですよね♪

Cloudflareとは？

Cloudflareは、Webサイトの表示やセキュリティ、ドメイン管理、サーバー機能などを提供しているサービスです。

機能がかなり多いため、初めて管理画面を見ると、

「どこを押せばいいの？」

となるかもしれません。

私もなりました💦

しかし、今回使うのは、Cloudflareにあるたくさんの機能のうち、GitHubのサイトを公開する機能だけです。

すべてを理解する必要はありません。

Cloudflareでは、GitHubやGitLabのリポジトリを接続できます。接続後は、GitHubへ変更を送るたびに、自動的にビルドとデプロイを実行できます。

Cloudflareの無料プランでは、静的なファイルへのアクセスは無料かつ無制限です。一方、フォーム処理などでプログラムを動かす場合は、Workersの無料枠が適用され、現在は1日10万リクエストなどの上限があります。

プロフィールサイトや商品紹介LPなどは、画像や文章を表示する静的なページが中心です。

⇧ここまでは私も良く分かっていないので読み飛ばしてもいいですｗ

そのため、私のような小規模サイトであれば、まずCloudflareの無料プランから試しやすいということですね。

ただし、どのようなサイトでも無条件に永久無料という意味ではありません。

アクセス数や使用する機能によっては、有料プランが必要になる可能性があります。

VercelとCloudflareの違い

VercelとCloudflareは、どちらもGitHubにあるサイトを公開できます。

私のような非エンジニアから見ると、基本的な流れはよく似ています。


VercelからCloudflareへ、サイトを直接引っ越すわけではありません。

同じGitHubのリポジトリを、今度はCloudflareにも接続します。

Vercelを使ったことがある方なら、この考え方は分かりやすいと思います。

簡単に比較してみますね。

VercelのHobbyプランは個人・非商用利用向けで、Proプランは月額20ドルからです。Cloudflareでは静的ファイルへのリクエストが、無料プランと有料プランのどちらでも無料かつ無制限とされています。

ただし、Cloudflareがすべての人にとってVercelより優れているという話ではありません。

Next.jsの機能を本格的に使っている場合や、Vercel独自の機能を使っている場合は、Vercelを継続した方がよいケースもあります。

(だからと言って非エンジニアの私はNext.jsとは何ぞや？と言うことは理解してませんw)

今回は、私が運用しているプロフィールサイトや商品紹介ページ、メルマガ登録LPなどを想定しています。

Cloudflareで公開する前に準備するもの

今回必要なのは、次の3つです。

  1. Cloudflareのアカウント

  2. GitHubのアカウント

  3. GitHubにアップロード済みのサイト

すでにVercelを使っている方は、GitHubへのアップロードまで完了していると思います。

初めてデプロイする方も、GitHubにサイトがアップロードされていれば大丈夫です。

また、Vercelで使っている独自ドメインがある場合でも、最初からドメインを移動する必要はありません。

まずはCloudflareが発行する無料URLで表示を確認します。

Cloudflareで問題なく動くことを確認してから、独自ドメインを切り替えた方が安全です。

Cloudflareのアカウントを作る

最初にCloudflareのアカウントを作成します。

Cloudflareの公式サイトを開き、メールアドレスとパスワードを登録してください。

登録が終わると、Cloudflareの管理画面が表示されます。

ここで最初の注意点があります。

管理画面に大きく表示される、

「ダッシュボードを作成」

というボタンは、今回押すボタンではありません。

この「ダッシュボードを作成」は、アクセス状況などを確認するためのダッシュボードを作る機能です。

サイトを公開するためのボタンではありません。

私はここで、

「これを押すのかな？」

と少し迷いました。

Cloudflareは機能が多いので、初めて使うと目的の場所を見つけにくいんですよね💦

「Workers & Pages」を開く

サイトを公開するには、画面左側のメニューを見ます。

次の順番で進んでください。

① 左側の「コンピュート」をクリック
② 「Workers & Pages」をクリック

「Workers」という言葉を初めて見た方もいると思います。

ここでは詳しく理解しなくても大丈夫です。

Cloudflare上でサイトやプログラムを公開するための機能だと思ってください。

「Workers & Pages」を開くと、次のような画面が表示されます。

この画面で、右上にある青いボタン、

「アプリケーションを作成する」

をクリックします。


GitHubとCloudflareを接続する

「アプリケーションを作成する」をクリックすると、サイトをどのように公開するか選ぶ画面が表示されます。

ここでは、GitHubとの接続を選びます。

画面によっては、

  • GitHubに接続

  • Gitに接続

  • Connect to Git

  • リポジトリを接続

などと表示される場合があります。

表記が多少違っても、GitHubのマークや「GitHub」という文字があるものを選べば大丈夫です。

初めて接続するときは、GitHub側でCloudflareへのアクセスを許可する画面が表示されます。

ここでは、Cloudflareにどのリポジトリを見せるか選択します。

選び方は主に2つです。

  • すべてのリポジトリへのアクセスを許可する

  • 選択したリポジトリだけ許可する

セキュリティが気になる方は、今回公開するリポジトリだけを選ぶ方法でも構いません。

GitHubとの連携を許可すると、Cloudflare側にリポジトリの一覧が表示されます。

Cloudflareは、GitHubおよびGitLabの個人アカウントや組織アカウントとの接続に対応しています。

公開するサイトを選ぶ

次に、GitHubにあるリポジトリの中から、Cloudflareで公開したいサイトを選びます。

リポジトリとは、GitHub上にあるサイト用フォルダのようなものです。

たとえば、GitHubで次のようなリポジトリ名を付けている場合、

  • nyto-profile

  • nyto-product-lp

  • nyto-mail-lp

今回公開したいものを選びます。

複数のサイトをGitHubに保存している方は、間違ったリポジトリを選ばないようにしてください。

選択したら、次の画面へ進みます。

設定内容は、まず変更せずに進める

リポジトリを選ぶと、ビルドやデプロイに関する設定画面が表示されます。

ここで、

  • ビルドコマンド

  • デプロイコマンド

  • ルートディレクトリ

  • ブランチ

  • 環境変数

など、非エンジニアにはよく分からない言葉が表示されるかもしれません。

しかし、最初からすべて理解する必要はありません。

私も詳しく理解していませんでした。

Cloudflareが自動で内容を判定し、設定が入力されている場合は、まず変更せずに進めてみてください。

分からない項目を予想で変更すると、かえってデプロイに失敗する可能性があります。

まずは、

自動で入力されている設定のままデプロイする

という進め方で大丈夫です。

エラーが出たときだけ、後ほど紹介する方法でClaude CodeやChatGPTに確認しましょう。

デプロイを開始する

設定を確認したら、「デプロイ」ボタンをクリックします。

すると、CloudflareがGitHubからサイトのファイルを読み込み、公開作業を始めます。

画面には、英語の文字がたくさん流れます。

これは、サイトを公開できる形へ整えている作業記録です。

この記録を「ビルドログ」と言います。

正常に進んでいる場合は、内容をすべて読む必要はありません。

完了するまで少し待ちましょう。

成功すると、

Success！Build completed.

という表示が出ます。

発行されたURLを開く

デプロイに成功すると、Cloudflareからサイト用のURLが発行されます。

たとえば、次のようなURLです。

nyto-club.nyto.workers.dev

このURLをクリックすると、公開したサイトを確認できます。

ここで大事なのは、独自ドメインを持っていなくてもサイトを公開できるということです。

Cloudflareが用意した無料URLを使えるため、

「まず試しにサイトを公開してみたい」

という方にも使いやすいと思います。

URLを開いたら、次の項目を確認してください。

  • トップページが表示される

  • 画像が表示される

  • 文章が途中で消えていない

  • ボタンを押せる

  • リンク先を開ける

  • スマートフォンでも崩れていない

プロフィールサイトや商品LPの場合は、パソコンだけでなく、必ずスマートフォンでも確認しましょう。

読者の多くは、スマートフォンからアクセスする可能性が高いですからね♪

Cloudflareの無料URLは変更できる？

Cloudflareから発行されるURLは、次のような構造になっています。

nyto-club.nyto.workers.dev

分けると、次のようになります。

nyto-club

これは、アプリケーションやプロジェクトの名前です。

nyto

これは、Cloudflareアカウント側で設定されているサブドメインです。

workers.dev

これは、Cloudflareが提供しているドメインです。

workers.devの部分は変更できません。

たとえば、

mail-lp.nyto.workers.dev

から、

newsletter.nyto.workers.dev

のように、最初のアプリケーション名を変更できる場合があります。

ただし、名称変更の可否や操作方法は、作成したプロジェクトの種類や現在のCloudflare画面によって異なる可能性があります。

URLに完全に自由な名前を使いたい場合は、独自ドメインを設定します。

初めてサイトを公開する人はここまでで完了

Vercelを使っておらず、今回初めてサイトを公開した方は、CloudflareのURLでサイトが表示されれば、ひとまずデプロイ完了です。

今回行った作業を振り返ります。

専門知識がなくても、GitHubにサイトがあれば公開できましたよね♪

最初はCloudflareの管理画面に戸惑うと思います。

しかし、操作する場所が分かれば、GitHubとの連携自体はそれほど難しくありません。

GitHubを更新するとサイトも更新される

一度GitHubとCloudflareを接続すると、その後はGitHubの内容を更新するたびに、Cloudflareが自動で再デプロイしてくれます。

流れは次のようになります。

Cloudflareの公式ドキュメントでも、接続したブランチへ変更を送ると、自動でデプロイされると説明されています。

毎回Cloudflareを開いて、ファイルを手作業でアップロードする必要はありません。

この部分は、Vercelを使っていたときと同じような感覚で使えます。

Vercelから移行する場合は、すぐに止めない

ここからは、すでにVercelを使っている方向けです。

Cloudflareでサイトが表示されたからといって、すぐにVercelのプロジェクトを削除したり、有料プランを解約したりするのはおすすめしません。

次の順番で進めた方が安全です。

同じGitHubリポジトリを、一時的にVercelとCloudflareの両方へ接続しておくイメージです。

Cloudflareで問題が起きても、Vercel側のサイトを残しておけば、元のサイトは表示されたままです。

一気にすべてのサイトを移行するのではなく、まず1つのプロフィールサイトやLPから試してみると安心です。

独自ドメインを使っている場合

Vercelで独自ドメインを使っている方は、Cloudflareの無料URLで十分に動作確認してから切り替えます。

独自ドメインとは、

https://nyto.club

のように、自分で取得したオリジナルのURLです。

ドメインを切り替える前に、最低限、次の項目を確認してください。

  • Cloudflareの無料URLで正常に表示される

  • パソコンで表示できる

  • スマートフォンで表示できる

  • 画像がすべて表示される

  • ボタンやリンクが動く

  • お問い合わせフォームが動く

  • メルマガ登録ができる

  • 自動返信メールが届く

  • 商品購入ページへ移動できる

特に注意したいのが、フォームです。

サイトの見た目が正常でも、

  • メルマガに登録できない

  • お問い合わせが送信されない

  • 外部サービスと連携できない

という可能性があります。

商品LPやメルマガ登録LPでは、表示確認だけで終わらせず、実際に自分でテスト登録してください。

Vercelを止める前の確認リスト

Cloudflareへの移行が完了したと思っても、Vercelを止める前にもう一度確認します。

表示に関する確認

  • トップページが表示される

  • すべての画像が表示される

  • 文字化けしていない

  • スマートフォンでも崩れていない

  • 各ページへ移動できる

  • 外部リンクを開ける

機能に関する確認

  • お問い合わせフォームを送信できる

  • メルマガに登録できる

  • 自動返信メールが届く

  • 商品購入ページへ進める

  • 必要な外部サービスと連携できる

更新に関する確認

  • Claude Codeでサイトを修正した

  • GitHubへ変更を反映した

  • Cloudflareで自動デプロイされた

  • 公開中のサイトも更新された

ドメインに関する確認

  • 独自ドメインでCloudflareのサイトが表示される

  • https://で表示される

  • 古いVercelのサイトに接続されていない

  • 数日間、表示や機能に問題がない

ここまで確認してから、Vercel側のプロジェクトやプランを整理しましょう。

デプロイに失敗したらどうする？

ここまで画面どおりに進めても、デプロイに失敗する場合があります。

私も最初から何のエラーもなく終わったわけではありません。

しかし、非エンジニアがエラー内容をすべて理解する必要はありません。

大事なのは、エラーが表示された画面にある「ビルドログ」をコピーすることです。

ビルドログとは、デプロイ中に表示される英語の記録です。

デプロイに失敗した場合は、ログの最後付近に原因が書かれていることが多いです。

自分で英語を解読するのではなく、Claude CodeやChatGPTに貼り付けて確認してもらいます。

エラー解決用のプロンプト

次のプロンプトをコピーして使ってください。

Cloudflareへのデプロイに失敗しました。

私は非エンジニアなので、専門用語をできるだけ使わずに説明してください。

以下がCloudflareに表示されたビルドログです。

【ここにビルドログを貼る】

次の順番で、一つずつ教えてください。

1. 何が原因なのか
2. どのファイルを直すのか
3. どのように直すのか
4. Cloudflare側で設定が必要か
5. 修正後に再デプロイする方法

一度に複数の方法を出さず、
最も可能性が高い方法から説明してください。

Claude Codeをプロジェクトのフォルダ内で開いている場合は、次のように依頼してもよいです。

このプロジェクトをCloudflareにデプロイしたところ、以下のエラーが出ました。

【ここにビルドログを貼る】

私は非エンジニアです。

プロジェクト内のファイルを確認し、Cloudflareでデプロイできるように修正してください。

修正前に、

・エラーの原因
・修正するファイル
・修正内容

を簡単に説明してください。

エラーの原因としては、次のようなものがあります。

  • 必要な設定がCloudflareに登録されていない

  • Vercelだけで使える設定が残っている

  • サイトを公開するためのコマンドが違う

  • 使用しているNode.jsのバージョンが合わない

  • 外部サービスとの接続情報が不足しているこれらの意味を最初から理解する必要はありません。

正常にデプロイできた方は、調べなくて大丈夫です。

問題が起きたときだけ、AIにログを渡して1つずつ解決しましょう。

Cloudflareが向いている人

今回使ってみて、Cloudflareは次のような方に向いていると感じました。

  • 副業のランニングコストを抑えたい

  • Claude Codeでサイトを作っている

  • GitHubにサイトを保存している

  • プロフィールサイトを公開したい

  • 独自商品の紹介LPを公開したい

  • メルマガ登録LPを公開したい

  • 小規模なサイトから試したい

  • Vercelの商用利用料金が気になっている

特に、サイトを自分でバイブコーディングする人は増えています。

サイトを作るコストはAIで抑えられても、公開するための固定費が毎月積み重なると、少しずつ負担になります。

副業では、

「月額数千円だから大丈夫」

と契約したサービスが増え、気づいたら毎月かなりの金額になっていることがあります。

売上を増やすことも大事ですが、使っていないサービスや代替できる固定費を見直すことも大事ですよね♪

Vercelを使い続けた方がよい人

一方で、すべての方がCloudflareへ移行すべきとは思いません。

次のような方は、Vercelを使い続けた方がよい可能性があります。

  • Next.jsの高度な機能を使っている

  • Vercel固有の機能を利用している

  • 複雑なWebアプリを運営している

  • Vercel上で安定して運用できている

  • 月額料金よりも移行の手間を減らしたい

  • エンジニアのチームで開発している

  • Vercelのサポートや管理機能が必要

私はVercelを否定したいわけではありません。

これまで非エンジニアの私でも簡単にサイトを公開できたので、とても助かりました。

ただ、自分の使い方に対して月額20ドルを支払い続ける必要があるのか、見直してみたということです。

実際にCloudflareを使って感じたこと

Cloudflareを初めて使って感じたのは、最初の画面が少し分かりにくいということです。

機能が多いため、サイトを公開したいだけなのに、

「どこから始めるの？」

となりました。

私が特に迷ったのは、次の2点です。

  • 最初の管理画面で何を押すのか

  • Workers & Pagesがどこにあるのか

しかし、

左メニューの「コンピュート」
　↓
「Workers & Pages」
　↓
「アプリケーションを作成する」

という場所が分かれば、その後のGitHub連携は思ったより難しくありませんでした。

また、私はサイトのフレームワークやビルド設定を詳しく理解していたわけではありません。

それでも、Cloudflareが表示した設定を基本的に変更せず、GitHubのリポジトリを選んで進めることでデプロイできました。

非エンジニアだからといって、すべての技術を勉強してから始める必要はありません。

まずは画面どおりにやってみる。

エラーが出たらログをAIに渡す。

この進め方でいいと思います♪

まとめ

今回は、Claude Codeで作ったサイトを、GitHub経由でCloudflareへデプロイする方法を紹介しました。

手順をもう一度まとめます。

① Cloudflareのアカウントを作る
② 左メニューの「コンピュート」を開く
③ 「Workers & Pages」を開く
④ 「アプリケーションを作成する」を押す
⑤ GitHubと接続する
⑥ 公開するリポジトリを選ぶ
⑦ 自動設定のままデプロイする
⑧ 発行されたURLを確認する

Vercelから移行する方は、すぐにVercelを止めないでください。

まずCloudflareの無料URLで表示や機能を確認し、問題がないことを確認してから独自ドメインや契約を切り替えます。

Cloudflareは機能が多いため、最初は難しそうに見えます。

しかし、今回のようにGitHubにあるサイトを公開するだけなら、使う場所は限られています。

私自身、Cloudflareの仕組みをすべて理解しているわけではありません。

それでも公開できました。

Claude Codeでサイトは作れたけれど、

「公開方法が分からない」
「Vercelの料金が気になる」
「Cloudflareは難しそう」

と感じている非エンジニアの方は、まず1つのサイトから試してみてくださいね♪

サイトを作るだけで終わらず、実際に公開して、多くの人に見てもらいましょう！

【追記】移行前に確認しておきたいDNS設定の話

VercelからCloudflareへ移行するときに、ひとつ確認しておきたいのがDNS設定です。

といっても、難しいことを全部理解する必要はありません。

見るポイントはシンプルで、

「Vercel向きの設定が残ったままになっていないか」

を確認すればOKです。

今回の私のケースでは、独自ドメインとして使っているのは、

https://www.nyto.club/

だけです。

今はVercelで運用していますが、これからCloudflareへ移行する予定です。

そのときに確認するのは、主にこの3つです。

www.nyto.club
nyto.club
*.nyto.club

特に見ておきたいのが、www と * です。

www.nyto.club は、今使っているURLなので、Cloudflareへ移行するときに向き先をVercelからCloudflareへ変えます。

もうひとつ、念のため確認したいのが * です。

CloudflareのDNS画面で、Nameが * になっているレコードがある場合、それは「ワイルドカードDNS」と呼ばれるものです。

ざっくり言うと、

「いろいろなサブドメインをまとめて同じ場所に向ける設定」

です。

たとえば、*.nyto.club のような設定があると、abc.nyto.club や test.nyto.club のようなサブドメインにも影響することがあります。

この * の設定がVercel向きのまま残っていると、あとで少しややこしいことになる可能性があります。

特に、Vercel側のプロジェクトやドメイン設定を先に消してしまうと、DNSだけが古い向き先を見ている状態になることがあります。

専門的には “dangling DNS” と呼ばれる状態です。

言葉は難しいですが、やることはシンプルです。

Cloudflareへ移行したあとに、CloudflareのDNS画面で以下を検索します。

vercel
76.76.21.21
*

もし、使っていないVercel向きのレコードが残っていたら削除します。

たとえば、こんなものです。

Name: *
Target: cname.vercel-dns.com

または、

Name: *
Value: 76.76.21.21

私のように www.nyto.club だけを使っている場合、基本的に * のワイルドカードDNSは不要です。

なので、移行後に残っていないか確認しておくと安心です。

今回のチェックリストはこんな感じです。

https://www.nyto.club/ がCloudflare側のサイトを表示しているか確認する。

CloudflareのDNS画面で vercel を検索する。

CloudflareのDNS画面で 76.76.21.21 を検索する。

CloudflareのDNS画面で * を検索する。

使っていないVercel向きレコードがあれば削除する。

Vercel側の Project Settings → Domains から www.nyto.club が外れているか確認する。

Vercelプロジェクトを削除するのは、これらを確認したあとにする。

サイト移行というと、つい「新しいURLで表示されたら完了」と思ってしまいます。

でも、最後にDNS設定を見直しておくと、あとから余計なトラブルを避けられます。

特に * のワイルドカードDNSは、使っていないなら残さない。

ここまで確認して、安心してVercelからCloudflareへの移行完了と言えそうです。

最後にお知らせ♪

このような感じで毎日AIと格闘しながら、少ない時間の中で副業をやっています。note記事だけではなく、メルマガもやっているのでぜひ登録をお願いします。（以下のLPもCloudflareです♪）


いいなと思ったら応援しよう！

ないと｜AI時短化 私の記事があなたにとって 参考になった！ぜひ取り入れたい！ 純粋に面白かった！ という方はぜひサポートお願い致します。 今後もより良い記事を書けるようにインプットしていき、ドンドンアウトプットしていきます！

この記事が参加している募集

#

スキしてみて

83万件