はじめての公開
はじめての公開
自分のページがインターネットに出ます
この章の終わりには、あなたが作ったページが、世界中から見られるURLを持っています。手順は4つ。ページを作って、手元で見て、ログインして、公開します。
この章でできるようになること
- ページを1枚作って、公開前に手元のパソコンで表示して確かめる
- Cloudflareにログインして、そのページをインターネットに公開する
- もらったURLをスマホで開いて、本当に世界に出ていることを確認する
横にスクロールできます
ステップ1：ページを1枚作ってもらう
第4章で作った cloudflare-lesson フォルダをClaude Codeで開いた状態にして、これを送ります。
このフォルダに、Cloudflare Workers の静的アセットとして公開するための最小構成を作ってください。 ・public フォルダを作り、その中に index.html を1枚。内容は自己紹介のシンプルなページで、日本語で書いてください ・wrangler.jsonc を作り、name は my-first-site、assets の directory は ./public にしてください ・main（Workerのプログラム）は書かないでください。静的なページだけの構成にします 作り終わったら、どんなファイルができたかを日本語で説明してください。
これで、フォルダの中にファイルが2つできます。中身を見る必要はありませんが、見ておくと後で効いてきます。
wrangler（ラングラー）
Cloudflareに物を届けるための道具です。あなたのパソコンにあるファイルを、Cloudflareのコンピューターに送る役をします。この道具を動かすのはClaude Codeなので、あなたが名前を覚える必要はありません。ただ、画面にこの単語が何度も出てくるので、見覚えがあると安心です。
wrangler.jsonc
「何という名前で、どのフォルダを公開するか」を書いた設定ファイルです。今回はたった4行です。Cloudflareはこのファイルを見て、あなたの意図を理解します。
ステップ2：公開する前に、手元で見てみる
いきなり世界に出す前に、自分のパソコンの中だけで表示して確かめます。ここは何度失敗しても誰にも見られません。
作ったページを、公開する前に自分のパソコンだけで表示して確認したいです。ローカルで動かして、開くためのURLを教えてください。確認が終わったら止められるように、止め方も教えてください。
http://localhost:8787 のようなURLが表示されます。ブラウザで開くと、さっき作ったページが出ます。これはあなたのパソコンの中だけのURLで、他の人からは見えません。
localhost（ローカルホスト）
「このパソコン自身」を指す言葉です。localhostで始まるURLは、あなたのパソコンの中にしか存在しません。友達に送っても開けません。公開前の確認用だと思ってください。
ステップ3：Cloudflareにログインする
ここが、この教科書であなたが自分の手で操作する数少ない場面です。とはいえ、ブラウザで「許可する」を押すだけです。
Cloudflareにログインしたいです。ログインの操作を実行して、ブラウザが開いたら私が何を押せばいいか教えてください。
ブラウザが開いて、Cloudflareの承認画面が出ます。内容を読んで、許可のボタンを押してください。これで、あなたのパソコンからCloudflareにファイルを送れるようになります。
この承認は最初の1回だけです。次からは聞かれません。
ステップ4：公開する
このページをCloudflareに公開してください。公開が終わったら、できあがったURLを教えてください。途中で何か選択を求められたら、その内容を日本語で説明してから進めてください。
初めて公開するときだけ、自分専用のアドレスの一部を決めてくださいと聞かれることがあります。好きな文字（英数字）を決めてください。これは後から変えないほうがいいので、名前やニックネームなど、長く使えるものがおすすめです。
終わると、こんな形のURLが表示されます。
https://my-first-site.あなたが決めた名前.workers.devこれがあなたのページです。世界中のどこからでも開けます。
うまくいったか確認する
- 表示されたURLをブラウザで開くと、自分が作ったページが出る
- スマホでも開いてみる。Wi-Fiを切って、モバイル回線で開けたら本物です
- URLの先頭が
httpsになっている（鍵の設定を自分でやらなくても、最初から付いています） - Cloudflareの管理画面で、Workers の一覧に
my-first-siteが並んでいる
いま何が起きたのか
あなたのパソコンにあったHTMLファイルが、Cloudflareのコンピューターにコピーされました。第1章で出てきた、世界中に散らばっているあのコンピューターたちです。
だから、あなたのページはもう「あなたのパソコンが動いているかどうか」とは無関係です。パソコンの電源を切っても、ページは表示され続けます。サーバーを借りてもいないし、月額も払っていません。第2章で見た登場人物が、まるごとCloudflareの中で完結した状態です。
よくあるつまずき
- Authentication error / not logged in
- ログインができていません。ステップ3に戻って、ブラウザでの承認をやり直してください。承認画面を閉じてしまった場合も、もう一度実行すれば開き直せます。
- A worker with this name already exists
- 同じ名前がすでに使われています。
my-first-siteをmy-first-site-2のように変えて、もう一度公開してもらってください。 - URLを開いたら404 Not Found
- 公開したフォルダの中に
index.htmlが無い可能性が高いです。「public フォルダの中身を確認して、index.html があるか教えてください」と頼んでください。 - ページは出るけど、直した内容が反映されない
- 直したあとに、もう一度公開する操作が必要です。ファイルを直しただけでは、Cloudflare側は変わりません。「変更を公開してください」ともう一度頼んでください。
この章のまとめ
ページを作って、手元で確かめて、公開しました。あなたはもう「自分のものをインターネットに出したことがある人」です。ここを越えると、あとは中身を足していくだけになります。
次の章では、置いてあるだけのページにプログラムを1つ足します。アクセスされたら返事をする、小さな係を作ります。
章末チェックリスト
公開できました。次の第06章で、ページにプログラムを足します。