Cloudflare に載せて誰でも遊べるようにする

なぜ要るか

いまのゲームは、自分のパソコンの中にしかありません。 ファイルを送れば遊んでもらえますが、それは「渡した人」だけです。

URLにすると変わります。リンクを1本投げれば、誰でも開けます。

そして、ここまでの作り方のおかげで、この工程はほとんど何もしません。 3-2でこう決めたからです。

外部のCSSやフォントの読み込み → 避ける
ライブラリのCDN読み込み → 避ける

ここでいう読み込みとは、ゲームを開いたときに、別のサーバーへ「これをください」と取りに行くことです。取りに行く先が1つでもあると、そこが止まった日にゲームも止まります。

外から何も読み込んでいないファイルは、置くだけで動きます。

置き場に使うのは Cloudflare Workers です。ファイルを預けると、世界中から開けるURLを1本くれるサービスだと思ってください。

使う道具: Cloudflare Workers

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

このゲームを Cloudflare Workers に静的に置きたい。public/ を配るだけの wrangler.jsonc と、実行すると先にテストが走る npm run deploy を作って。秘密の値は設定ファイルへ書かない方針で。

配るフォルダの名前が public/ でない場合は、そこを自分のフォルダ名に置き換えてください。

出てくる言葉を先に一言だけ。wrangler.jsonc は「どのフォルダを配るか」を書いておく設定ファイルです。npm run deploy は「公開する」という作業に自分で付けた呼び名で、これを打つだけで公開できるようにします。どちらもこの後で中身を見ます。

置き場は2種類あります

選ぶのは1回だけです。動きが要るかどうかで決まります。

置き方	向いている場合	いまのゲームは
静的に置くだけ	HTMLと画像と音を配るだけ	これで足りる
サーバー側の処理も動かす	会員、保存、順位表、対戦の中継	まだ要らない

いまのゲームは前者です。 6-4でセーブをブラウザに置いたので、サーバー側の処理が1つもありません。

僕がいま動かしているものを並べます。

三つの的のようなゲーム  静的に置くだけ
この講座のサイト         サーバー側の処理あり（会員とデータベース）
対戦の中継               それだけ別の小さいサーバーに分けた

3つ目が要点です。 対戦の中継だけは常に動く仕組みが必要なので、そこだけ切り出しています。 全部を重い構成にしていません。

実際の設定は10行くらいです

この講座のサイトの設定から、要るところだけ抜き出します。

{
  "name": "ichininmae",              // 置き場の名前
  "main": "app/index.ts",            // サーバー側の処理（静的だけなら不要）
  "assets": {
    "directory": "./public"          // ここのファイルをそのまま配る
  },
  "routes": [
    { "pattern": "ichinin.kenty.app", "custom_domain": true }
  ],
  "d1_databases": [
    { "binding": "DB", "database_name": "ichininmae", ... }
  ]
}

assets の directory が「配るフォルダ」です。 静的に置くだけなら、実質これ1行で終わります。

上の各行にある // から後ろは、人が読むためのメモ（コメント）です。動きには関係ありません。ファイルの拡張子が jsonc になっているのは、そのコメントを書ける形式だという意味です。

routes は次の術（8-2）で扱います。ここまでの段階では、割り当てられたURLで動きます。

秘密はコードに書きません

これは事故になるので先に書きます。

APIキー、パスワード、接続情報。設定ファイルへ書くと、Gitに残ります。 消したつもりでも履歴から取り出せます。

だから別に登録します。

wrangler secret put RESEND_API_KEY

wrangler は Cloudflare を手元から操作するためのコマンドです。これを打つと値の入力を求められます。打ち込んだ値は Cloudflare 側だけに保管されるので、手元のファイルにもGitにも残りません。

そして設定ファイルには、名前だけ書きます。

// Secrets（wrangler secret put で登録。ここには書かない）:
//   EMAIL_ENC_KEY / EMAIL_HASH_KEY / RESEND_API_KEY

「ここには書かない」というコメントを残すのが効きます。次に触るとき（自分でもAIでも）、書き込む場所を間違えません。

やってみる

配るフォルダを決める
```
public/
  index.html
  char.png
  char-me.png
  char-kuchi.png
  bgm.mp3
```
遊ぶのに要るものだけ入れてください。設計メモ、素材の元データ、テストは入れません。

設定を書く

{
  "name": "mitsunomato",
  "compatibility_date": "2026-07-19",
  "assets": { "directory": "./public" }
}

設定と公開コマンドの用意ごと、AIへ頼んでも構いません。

claude -p "このゲームを Cloudflare Workers に静的に置きたい。public/ を配るだけの wrangler.jsonc と、実行すると先にテストが走る npm run deploy を作って。秘密の値は設定ファイルへ書かない方針で。"

「先にテストが走る」を入れてください。 7-3で作った関門を、公開の入り口に繋ぐ指示です。

公開する
```
npm run deploy
```
7-3で作った関門があるので、テストが通らなければここで止まります。

成功すると、こういう出力が出ます。
```
✨ Success! Uploaded 5 files
Uploaded mitsunomato (4.59 sec)
Deployed mitsunomato triggers (1.74 sec)
Current Version ID: e4e3602b-2ecd-492e-ae1e-dc15fb0dbaa3
```
Uploaded 5 files は配ったファイルの数です。最後の行は、今回上げた版に付いた番号です。この形の出力が出れば、公開先にファイルが届いています。あわせて公開先のURLも表示されるので、それを次で開きます。
出たURLを開く

自分のパソコンではなく、スマホから開いてください。 手元のキャッシュに騙されません。

キャッシュとは、一度開いたページや画像をブラウザが手元に取っておく仕組みです。自分のパソコンで開くと、その古い控えが表示されて、公開できたのかどうかが分かりません。
人に投げる

ここが目的です。リンク1本で遊んでもらえる状態になりました。

保存する

git add .
git commit -m "Cloudflare に載せて公開した"
git push

公開直後は「古いもの」が返ります

今日、僕が何度も踏んだので書いておきます。

デプロイが成功しても、すぐには新しいものが返りません。 世界中の配信先へ広がるのに少し時間がかかります。

実際にこうなりました。

デプロイ完了 → すぐ確認 → 古いページが返る（新しい記事が404）
数十秒待って再確認 → 正しく新しいものが返る

さらに厄介なことに、ページと画像が別々に広がります。 ページは新しいのに、その中の画像だけ404、という状態が普通に起きます。僕はこれで「画像が壊れた」と勘違いしました。

だから確認の手順を決めています。

手順	中身
1	デプロイ後、すぐには判断しない
2	数十秒待ってから確認する
3	それでもおかしければ、URLの末尾に `?x=1` を付けて確認する

3番目は、キャッシュを避けて素の状態を見るためです。これで新しいものが返るなら、単に広がる途中です。

つまずきどころ

手元では動くのに、公開したら動かない

原因はほぼ2つです。

原因	直し方
ファイルの読み込みパスが手元専用	`file:///Users/...` のような絶対パスを、`char.png` のような相対パスへ
大文字小文字の違い	`Char.png` と `char.png` は別物として扱われる

1番目は、ファイルの置き場所の書き方の問題です。自分のパソコンの中の住所をそのまま書くと、公開先にはその住所がないので見つかりません。index.html から見た位置で書けば、どこへ置いても届きます。

2番目が地味に多いです。 手元（macOS）では区別しないのに、公開先では区別されます。つまり、手元で動いていても、公開先では「そんなファイルは無い」と言われます。

404になる

配るフォルダの中に index.html がありますか。フォルダの1つ下に入っていると見つかりません。

音が鳴らない

5-1で書いたとおり、操作なしでは鳴りません。 公開先でも同じです。音を出すボタンが必要です。

画像だけ出ない

広がる途中か、パスの間違いです。数十秒待ってから、それでも出なければパスを疑ってください。

費用が心配

小さいゲームなら、まず無料の範囲で足ります。心配なのは費用より、うっかり重いものを置くことです。 3MBを超える曲や動画を何本も置くと、読み込みが遅くなって遊ばれません。

設定ファイルにキーを書いてしまった

消しても履歴に残ります。 その鍵は使えないものとして作り直してください。面倒ですが、これが唯一の正しい対処です。

Windows の場合

コマンドは同じです。パスの区切りだけ注意してください。

次の一歩

公開したURLを、自分のスマホで開いてください。

そして家族か友人に1人送ってください。 感想は要りません。「開けたか」だけ聞いてください。

開けたなら、この術は終わりです。ここから先、あなたの作ったものは他人が触れる場所にあります。 次はURLを自分の名前にします！