Cloudflare Workersとcloudflaredの体験すごい
cloudflaredというアプリケーションがありましてー、Cloudflare Tunnelという仕組みを実現するってことは知っていましたが… これがCloudflare Workersと組み合わせるとすごいよい。
Wrangler 2.0
Cloudflare Workersを開発する際に避けて通れないのがWranglerというCLIです。Cloudflare Workersの環境をローカルでエミューレートしてくれて、publishまで面倒見てくれます。そのWranglerの「2.0」ベータが出てます。
設定無しでindex.jsを引数にすればいきなりdevサーバーが立ち上がったり、ライブリロードできてそれが割と高速だったりで、「B」押すだけでブラウザ立ち上がったりと便利なんですが、
S to turn on (experimental) sharing
というコマンドがありました。
お。これなんだ？ってことで「S」押したんですが、それが冒頭で申した「Cloudflare Tunnel」を使ったシェアリングの仕組みです。現に最初に立ち上げた時にはcloudflaredが入ってないと警告が出ました。
Cloudflare Tunnel
さてこのSharingコマンドですが、先にざっくり言うと「ローカルサーバーを外部に公開する仕組み」です。Cloudflare Tunnel（Argo Tunnel）ってのはまぁそういうことだったのです。で、公式があげるユースケースには
- リモートワーカーの安全確保
- ゼロトラストネットワークアクセスの提供
- VPNの代替
- SaaSへのセキュアなアクセス
- 脅威からの保護
- 第三者のアクセス管理
なんて書かれていて、わりとエンプラよりというかなんというか個人の開発には必要ないものなのかと思っておりました。
それが違った。
Sharingコマンド
じゃあやってみます。適当にでっち上げたCloudflare Workersアプリ（これについては後述）をWranglerの2.0ベータで立ち上げます。
いよいよ「S」を押します。
なんかURLが発行されたーーー。https://ski-babes-madagascar-gets.trycloudflare.comとかいうハチャメチャなURLです。
これがそうです。トンネリングされてグローバルからアクセスできるURLです。試しにスマホの4G回線からURLを開くと…
見れてる！ターミナルを見ててもアクセスするたびにログが出てる！試しにクライアントのIPをconsole.logしてみたらスマホの回線のになった！
つまり
Client => Cloudflare Tunnerl => 手元のMacBook
ということだ！これすごくね？「S」ボタン押すだけで、トンネリングしてグローバルに見れるURL発行してくれるんだぜ。
こちらで開発サーバーをシャットダウンすれば、もうそのURLは使い物にならないので、適当に他人に見せれます。また都度URLが変わるので、今のところあれだけど（というかそういう設定あるかもですが）、開発環境でWeb Hook受けとりたい時とか便利っすね！
「（似たようなトンネリングサービスの）ngrokみたい」といえばそれまでですが、開発・デプロイ環境と統合されているのがすごい。
作ったアプリ
ちなみに今回検証用に作ったアプリですがHono[炎]で作りました。
このHono。絶賛開発中ですが、
- serve-static
- mustache
というBultin Middlewareを組み合わせるとわりとすぐにそれっぽいサイトが出来ます。「家系ラーメン食べたい」というサイトを作りました。
-
/=> 家系ラーメン家リスト -
/ie/:name=> 家系ラーメン家写真
というサイト構成です。仮想DBとしてこういう構造をもたせます。
const db = [
{
name: 'yoshimura',
image: 'yoshimura.jpg',
title: '吉村家',
},
{
name: 'sugita',
image: 'sugita.jpg',
title: '杉田家',
},
]
実際にできたページがこんなです。
/
/ie/yoshimura
/ie/sugita
家系ラーメンでも見た目が違うことが分かりますね。
コード
もうめんどくさいのでコード見てください。
冒頭のMiddlewareを呼ぶところがこうです。
import { Hono } from 'hono'
import { mustache } from 'hono/mustache'
import { serveStatic } from 'hono/serve-static'
const app = new Hono()
app.use('*', mustache({ root: 'view' }))
app.use('/static/*', serveStatic({ root: 'public' }))
serve-staticで静的ファイルも配信できます。今回はラーメン写真を配信してます。Cloudflare Workersにはファイルシステムという概念も仕組みもないので、「KV」という機能を使ってます。
named parameterを取りつつDBからマッチする家系を探してきて、データをmustacheのテンプレートに渡すルートとコントローラがこれです。
app.get('/ie/:name', (c) => {
const name = c.req.param('name')
const ie = db.find((i) => i.name === name)
if (!ie) {
return c.text('家系 is Not Found', 404)
}
return c.render('ie', ie, partials)
})
CDNのエッジでそれなりのMVCアプリケーションが出来ました。
このアプリケーションなのですが、当然ながら、Cloudflare Tunnelじゃなくて、ふつーにCloudflareのエッジにデプロイして公開できます。
npx wrangler publish index.js --name 'iekei'
ってことで、僕が消さない限り、ここで吉村家と杉田家のラーメン写真が見れるので見てください。
まとめ
以上、Wrangler 2.0に導入されたSharing機能について紹介しました。ローカルサーバーやデプロイの機能を備えたCLIがトンネリングもできるのは面白いですね。Hono[炎]もよろしく。
追記
ラーメンのアプリ、GitHubレポジトリに置きました。
Discussion