CDN(Cloudflare Workers)の中で地理空間データの計算処理を行い、結果をGeoJSONとしてクライアントに返す。

最終更新日

Cloudflare Workers

お手軽エッジコンピューティング!

発端

Service Workerの勉強に、JSONデータをペイロードしたPOSTリクエストをService Workerでフックし、そのまんま受け取ったJSONをレスポンスとして返すというエコーサーバ的なコードを書いていたのですが、その最中「Service Workerの中でGeoJSONを生成して返したりすると面白いんじゃないか」と思いついて脇道に逸れたのがきっかけです。
結果的にservice Workerの中でGeoJSONを生成することにはあまり意味がなかったのですが、CDN上でJavaScriptを実行できるCloudflare WorkersがService WorkerのAPIを用いて実装されているので、Cloudflare Workers上に移して実行することで負荷が高くなりがちな地理空間データの分析処理をCDN上で行える可能性が見えてきました。

Service Worker

まずは、シンプルにService Workerの中でGeoJSONを生成するサンプルを試してみました。
POSTリクエストにペイロードされたbbox(範囲を指定する2点の座標)を受け取り、Turf.jsを使って指定範囲内のポイントグリッドをGeoJSONとして生成し返却します。
Turf.jsの読み込みをimportScriptsでなくrequireで行なっているのは後ほどCloudflare Workersに登録する兼ね合いでwebpackを使って一枚のjsファイルに結合しているためです。
(一つのjsファイルに結合できればなんでもいいのですが、webpackが一番なれていたので)

Service Workerが正しく登録されているかは、Chrome開発者ツールのApplicationのタブで確認することができます。
また、登録されているスクリプトのアップデートや削除もこのタブ上で行えます。

Seervice Workerがアプリケーションに登録された様子

Service Workerが正しく登録されていれば、「Send bbox」を押して生成されたGeoJSONがちゃんと返ってくるか確認しましょう。

ボタンを押した際のコンソールへの出力

NetworkタブでpointGrid.jsonの通信内容をみると、データがService Workerから返却されていることが確認できます。

service workerをネットワークタブで確認

Cloudflare Workers

Cloudflare Workers はCDNプロバイダのCloudflareが提供する、CDNのエッジにJavaScriptコードを配置し実行することができるサービスです。

Cloudflare Workersを使用することで、開発者はエンドユーザーの近くにあるCloudflareのエッジでJavaScriptコードを展開できます。Service Workers APIに基づいて、今や開発者はユーザーのデバイス上のブラウザーを経由せずに、コードを安全に実行することができます。

参考:VMよりコンテナよりもさらに軽量な分離技術、V8のIsolateを用いてサーバレスコンピューティングを提供するCloudflare Workers

Service Workerとして正しく動作していることが確認できていれば、サーバーにindex.htmlをアップロードしビルドしたjsをCloudflare Workersのエディタにコピペすればほぼ問題なく動作するはずです。
(index.htmlをアップロードする際は、service workerを登録するコードは削除しておきます)

そのままコピペしてもつまらないので、index.htmlではleafletを読み込み地図上でbboxを指定できるように変更しました。

cloudflare workersを使った地図

DEMO

一見すると昨日あげた記事のサンプルとなにも変わっていないように見えますが、ここでのTurf.jsを使った地理情報データの処理は全てCDN上で実行されています。

Turf.jsは丸ごと読み込むとビルド後のファイルサイズが大きくなるので、必要なモジュールのみ読み込むように変更しています。

上記スクリプトを、CloudflareダッシュボードのWorkers Editorで「Script」のエリアに貼り付けます。

Cloudflare Workers Editor画面のスクショ

登録されたスクリプトは、即座にCDNに配信され動作するようになります。

Cloudflare Workers 感想

思いの外、簡単にサクッと使えてとても楽しいです。
[email protected]はちょっとハードル高いなって感じている人は、試しにCloudflare Workersを使ってみてはいかがでしょうか。

一つ残念なこととしては、Enterpriseプラン以外では一つのドメインで一つのスクリプトしか動かせないことですかね。
なので複数の処理を行おうと思ったら、受け取ったリクエストをルーティングするコードが必要になってきます。

How many Workers scripts can I have per domain? – Developers / Workers – Cloudflare Community

そこだけ気をつければ、お手軽価格(月5$)で遊べるのでおすすめです。