Cloudflare を使い倒す Cloudflare Tunnel 編

この記事は ひとりCloudflareを使い倒す Advent Calendar 2025 の12日目です

まえがき

こんにちは。この前「アプリ作った！」って久しぶりに http://localhost:3000 を共有してしまった @toreis-up です。

この記事は同じことをやらかしたことある人か、ngrok が Cloudflare にもあればいいのにと思った人向けの記事です。

localhost は 127.0.0.1 として解決され、このアドレスはコンピューター自身のことを指すように設定されています。(RFC1122 3.2.1.3 Addressing (g) に Internal host loopback address と書いてある)

ということで、localhost を共有することはできませんが、それでも localhost に公開しているものにアクセスしてもらうことは可能です。
そう、Cloudflare Tunnel ならね！

とりあえず使ってみる

Quick Tunnels を使って、とりあえず localhost:3000 を世界に公開してみます。

まずは cloudflared を入れましょう。入れ方はこちらに公式のページがありますので、ご参照ください。

適当な Web サーバーを立てます。この記事では Vue のテンプレートを使っています。

pnpm create vue@latest

で Vue のテンプレートを作ります。

そして pnpm run dev --port 3000 を実行すると、http://localhost:3000 にサーバーが立つことを確認します。

立てっぱにしておいて、外からアクセスできるようにしましょう。

ターミナルをもう一個立てて

cloudflared tunnel --url http://localhost:3000

と実行しますと、ブワーっと色々出てくるログの中に

Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):
https://heating-loans-pressed-extraction.trycloudflare.com

から始まるログがあり、その中にリンクがくっついています。

アクセスしてみると～？

Blocked request. This host ("heating-loans-pressed-extraction.trycloudflare.com") is not allowed.
To allow this host, add "heating-loans-pressed-extraction.trycloudflare.com" to `server.allowedHosts` in vite.config.js.

弾かれました…。というか、Vite が弾いてきました。

なるほど、安全だ。

vite.config.ts を書き換えます。

vite.config.ts

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
+ server: {
+   allowedHosts: ['.trycloudflare.com'],
+ },
})

この指定は trycloudflare.com と hoge.trycloudflare.com といったすべてのサブドメインを許可してしまうので、場合によっては危険です。できる限りくっついてきたドメインを指定してください。

さて、気を取り直してもう一度アクセスしてみましょう。

正真正銘の You did it! です。
Cloudflare の Quick Tunnels を通して、ローカルのサーバーを世界に公開することができました。

で、どうなってるんよ

超簡単にローカルのサーバーを公開する例を紹介しました。

これを実現する仕組みを調べていきましょう。

まずは、大本丸の Cloudflare Docs を読んでいきます。

Cloudflare Tunnel の素こと cloudflared は、Cloudflare との "送信専用の接続" を作って通信するアプリケーションです。これで終わりです。

これのメリットは 自分のネットワークを外から入れるように穴あけしなくて良いこと と、Cloudflare のセキュリティをくぐってくること の 2 点です。

どちらもセキュリティ面のメリットですが、そもそも localhost を共有するときに考えられる危険性は穴あけによるセキュリティと、外から飛んでくる攻撃なので、それら 2 つを克服した形になります。

基本的に inbound は厳しく制限しないと、外から何が飛んでくるかわかりません。しかし、outbound は許可されていることが多いので、それに着目した形です。

先述の通り、cloudflared は Cloudflare との間に outbound のトンネルを立てて情報をやり取りするので、inbound が制限されている環境でも安全に動作します。

おわり。

使い方

先程の例ではローカルの Web サーバーを公開しました。

これを超応用すると、ssh サーバーやリモートデスクトップなどが安全に公開できます。

Cloudflare Tunnel は Cloudflare Zero Trust を使うことで簡単にアクセス制限が設定できるので、オレオレ OAuth を使ってみたり、WARP を使ってみたり、企業レベルでも IdP を組み合わせて使ってみたりすることで、安全に家の外からアクセスできるようになります。

おわりに

今回は一番ローカロリーな記事ですが、Cloudflare でもこんなことができるんだなあと伝われば幸いです。