Sandbox のサービスを公開 URL でシェアできる tunnels がやってきた！

やっほー、しぃちゃんだよ！今日は、コンテナの中で動かしてるサービスを、パパッと公開 URL で共有できるようになるって話だよ。開発中のプレビューを誰かに見せたいとき、すごく便利そうなの！

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog で、Sandboxes に sandbox.tunnels っていう新しい仕組みが入ったよって発表があったの。Sandbox のコンテナの中で動いてるサービスを、公開プレビュー URL で外に見せられるようになったんだよ。

裏側では Sandbox の中の cloudflared が動いてくれてて、exposePort() の設定もカスタムドメインもいらないんだって。これは Agents まわりのアップデートなの。

今までどうだったの？

これまでコンテナの中のサービスを外から見せるには、exposePort() を設定したり、自分でカスタムドメインを用意したりする必要があったの。ちょっと手間だったんだよね。

これで何が変わるの？

デフォルトだと sandbox.tunnels.get(port) を呼ぶだけで、クイックトンネル が作られて *.trycloudflare.com の URL がもらえるよ。Cloudflare アカウントも DNS レコードもカスタムドメインもいらない、ゼロコンフィグ。開発中にサッと確認したいときや、.workers.dev のデプロイにぴったりなの。

import { getSandbox } from "@cloudflare/sandbox";

const sandbox = getSandbox(env.Sandbox, "my-sandbox");
await sandbox.startProcess("python -m http.server 8080");

const tunnel = await sandbox.tunnels.get(8080);
console.log(tunnel.url); // → https://random-words-here.trycloudflare.com

深く潜ってみよう

もっとちゃんと使いたいときは「名前付きトンネル(named tunnel)」も選べるよ。sandbox.tunnels.get(port, { name }) みたいに name を渡すと、名前.ゾーン名 のホスト名が Cloudflare Tunnel と CNAME レコードで結びついて、https://my-app-preview.example.com みたいな URL になるの。

const tunnel = await sandbox.tunnels.get(8080, { name: "my-app-preview" });
console.log(tunnel.url); // → https://my-app-preview.example.com

クイックトンネルは毎回ランダムな URL に変わっちゃうけど、名前付きトンネルはコンテナを再起動しても同じ URL が残るのがポイント。だから、トンネルやオリジンをちゃんとコントロールしたい本番用途には、名前付きが向いてるんだって。

しかも sandbox.destroy() を呼ぶと、コンテナと一緒に Cloudflare Tunnel も DNS レコードもきれいに片付けてくれるから、宙ぶらりんのトンネルやレコードが残らないの。お掃除まで面倒みてくれるの、えらい！

アップデートは npm i @cloudflare/sandbox@latest でできるよ。詳しい API は Sandbox tunnels のリファレンス を見てね。

まとめ

• sandbox.tunnels.get(port) でゼロコンフィグのクイックトンネル(*.trycloudflare.com)がもらえる
• { name } を渡すと永続 URL の名前付きトンネル。コンテナを再起動しても URL が変わらない
• sandbox.destroy() でトンネルも DNS レコードも自動でお片付け
• 最新版は npm i @cloudflare/sandbox@latest

Sandbox の中で動かしてるものを、サクッと誰かに見せたい開発者に刺さるアップデートだよ！