エッジは誰のもの？ - ゆーすけべー日記

CDNの文脈でいうエッジコンピューティングはフロントエンドのものとされることが多い気がするけど、そうじゃない。フロントエンドの技術を使ったバックエンドである。

フロントエンド？

ユーザーに近いところで実行されるという意味ではフロントエンドかもしれない。あと、VercelのNext.jsのように、フロントエンドフレームワークのファンクションがエッジで動くからフロントエンドでしょというのはある。そしてエッジのファンクションはたいていフロントエンドで使われているJavaScriptもしくはTypeScriptで書く。そうするとツールチェーンも、例えば「Vite」と聞いてそれが何であるか？を答えられる人はフロントエンドやってる人の方が多いだろう。

2つのユースケース

エッジには2つのユースケースがある。

CDNの機能を拡張する。オリジンありき。
サーバーレスコンピュート。オリジンそのものになる。

オリジンありき

これについては以前、Cloudflare Workersプロキシパターンという記事で、Cloudflare Workersを使った例をまとめた。

レスポンスヘッダの追加
CORS
Basic認証
ETagの追加
リダイレクト
オリジンの振り分け
キャッシュ
デバイス別のキャッシュ
HTMLタグの置換
ホットリンク禁止 - リファラ編
ホットリンク禁止 - SignedRequest編
動的コンテンツのキャッシュ

クラシカルな人はお気づきかもしれないが、ApacheやNginxの設定でできることも含まれている。

Nginxでカスタムヘッダを追加するにはnginx.confにこう書けばいい。

add_header 'X-Message' 'Hello!';

一方、エッジとされるCloudflare Workersで書くとこうなる。

response.headers.add("X-Message", "Hello!");

おお、バックエンドやないかい！

オリジンそのもの

拙作のHonoは当初、エッジ環境で動かすことを想定してつくられた。Honoを使うとCloudflare WorkersやFastly Compute上でアプリをオリジンそのものとして動かすことができる。

import { Hono } from "hono";
const app = new Hono();

app.get("/", (c) => c.text("Hono!"));

export default app;

この文法をみて分かる通り、Node.jsのExpressやKoaの実装を参考にしている。はたまたRubyのSinatraや、PerlのMojoliciousがルーツにある。バックエンドやないかい！

Web標準

面白いのは、例えば、Cloudflare WorkersはエンジンがV8で、Chromeのタブが開くようなイメージで起動する。そうするとfetchに代表されるように、フロントエンドの人が触っていた技術がベースになると想像できる。

バックエンドの人がエッジをやると無双できる

つまりエッジとは、フロントエンドで多様されているJavaScriptもしくはTypeScriptとWeb標準の技術を使ってバックエンドを書くことだから、もともとバックエンドの人がフロントエンドの技術をかじれば無双できる。その結果がHonoである。

PlackとWeb標準

エッジの世界に入った時、Web標準のAPIを知って興奮した。Web標準のAPIって洗練されていて、こちとらPerlのWebのAPIがPSGIで標準化される模様をリアルタイムでみてたから、それがそもそもあるのが強い。

Plackを使ったPerlのコード。

use Plack::Request;
use Plack::Builder;

my $app = sub {
    my $env = shift;
    my $req = Plack::Request->new($env);
    my $message = $req->param('message')
    return [
        200,
        ['Content-Type' => 'text/plain'],
        [$message],
    ];
};

エッジで動くHonoのコード。

import { Hono } from "hono";

const app = new Hono();

app.get("/", (c) => {
  const message = c.req.query("message");
  return c.text(message);
});

export default app;

PerlはそれまでCGIやMVCフレームワークを含めてHTTPのリクエストをハンドルして、レスポンスを返す仕様と実装が標準化されていなかったんだけど、先行を行ってたRubyのRackとかPythonのWSGIを参考にPSGIが策定された。miyagawa++

なので、繰り返すけどそれがもともと組み込みのAPIであるJavaScriptのランタイムは素晴らしいなと。その上でフレームワークを作るのは、僕にとってはいとも簡単なことだし、だいぶMojoliciousに感化されたし、PerlのバックグラウンドがあるusualomaさんがRouter::Boomに（たぶん）インスパイアされて、RegExpRouterを作ったのはその流れがあって面白い。

みんなやろうぜ

で、何が言いたいかというと、エッジはフロントエンドの人もバックエンドの人も楽しめるので一緒にやろうぜ！ということ。ついでにいうとフロントエンドとバックエンドの境目も曖昧だろうし、Cloudflareではエッジという言葉は使わずに「Earth」を使うともなっているんだけれども。ひいきにしてるCloudflare Workersなんかはデプロイも速いし、コンテナいらなくなるし、APIは揃っているし、なによりもHono使えるしおすすめだよ！

その他

壮大な宣伝だったんだけど、8/1(木)にそのCloudflare Workersに特化した開発者向けのイベント「Workers Tech Talks in Tokyo」をやります。うちのCloudflareのDevRelチームからマネージャーのRickyと同じDeveloper AdvocateのKristianがゲストです。ぜひ来てください！

Cloudflare Workers Tech Talks in Tokyo #3

あと、このテーマはaijiさんって人のフロントエンドカンファレンス北海道2024の「エッジはフロントエンドなのか？バックエンドなのか？について考えてみる by aiji」というプロポーサルに感化されました。