2022年8月28日 • ☕️ 6 min read

ウェブ技術が日進月歩で、新しい物が次々に現れます。Edge Computing(エッジコンピューティング)はその中の1つです。実はエッジコンピューティングがすごい新鮮な技術ではありません。元々IoTのためのものでした。今いよいよウェブ業界にServerless Functions以外の選択肢としてーーEdge Functionsが登場してきました。

  • エッジコンピューティングのwikipedia
  • 今各サービスのEdge Functionsはbeta版が多いので、プロダクションに使うのがまだ早いかもしれません
  • サービスによってEdge FunctionのRuntimeが異なる、本記事はVercelが提供しているEdge Functionsを紹介します

Serverless Functionsの代替者?

いいえ。Serverless Functionsを完全に置換できるものではありません。Edge Functionsがエッジリージョンにデプロイされ、データセンターに置いてあるServerless Functionsみたいに大量なリソースーを食う処理に向いていません。例えば、VercelにデプロイできるEdge Functionsに下記の制限があります。

  1. 圧縮後のバンドルサイズは1Mb以下
  2. 消費できるメモリは128Mb以内
  3. 実行時間は5秒以内
  4. Node.jsのAPIを利用できない(file処理のfsなど)

Edge Functionsの長所は?

では、Serverless Functionsと比べると、優れているのは何でしょうか?

  1. エッジリージョンはデータセンターのリージョンより多いので、ユーザの近くのリージョン(エッジプラットフォーム)から返答できる。レスポンスがとにかく早い。特にデータセンターから離れているところからのアクセス。

  2. 安い。食うリソースーが違うので、安い。Vercelなら月100万回のcallまで無料。Netlifyはなんと300万回まで。

  3. キャッシュできる。ブラウザーのキャッシュ機能を使わずにエッジにキャッシュできる。新しいEdge Functionsがデプロイするときも、自動的にinvalidateしてくれるので、古いキャッシュが参照していることも心配しなくてもいい。

  4. Serverless Functionsより起動が早い。node.js環境を起動する必要がないからです。

VercelのEdge Functionsを作ってみよう

ドキュメント通りにやればいいですが、Next.jsの使いをおすすめ。

  1. ライブラリーをimportしても自動的に解決してくれる。相対パスなど使いたい場合でも、普段と同じように、tsconfig.jsonにbaseUrlとpathsを設定すればOK。

    • Vercel CLIだったらかなり面倒。自分のtranspile用のツールを導入しなければいけない。少し試してみたが、デバッグするとき、vercel devがruntimeエラーを出したので諦めた
  2. next/serverから、便利なclass: NextResponseNextRequestを使える。

    • <-> Vercel CLIには使えなく、たとえJSONを返したい場合い、Response, RequestJSONを一緒に使う必要がある。
Copy
// Next.jsを使う場合
export function createCacheResponse(
  data: Record<string, any> | string | number,
) {
  return NextResponse.json(data, {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'max-age=0, s-maxage=86400',
    },
  });
}

// Next.jsを使わない場合
export function createCacheResponse(
  data: Record<string, any> | string | number,
) {
  return new Response(JSON.stringify(data), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'max-age=0, s-maxage=86400',
    },
  });
}
  1. apiフォルダをsrcフォルダに置いてもOK。 → 個人的にこれが大きい

では、日本の祝日検索サービスを作ってみよう。

Step1: Next.jsプロジェクトを作って、フォルダを整理

Copy
npx create-next-app@latest --typescript
  • public, styles, pagesフォルダを削除
  • next.config.jsを削除
  • src/pages/api/v1フォルダを作成

Step2: endpointを作成

src/pages/api/v1holidays.tsを作ります。

holidays.ts
Copy
import type { NextRequest, NextResponse } from 'next/server';

export default function handler(req: NextRequest) {
  return NextResponse.json({ holidays: "2022-01-01 元日" }, {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'max-age=0, s-maxage=86400',
    },
  });
}

export const config = {
  runtime: 'experimental-edge',
};

Step3: クエリパラメータの処理

クエリパラメータをライブラリあるいは自分で解析する必要があります。

holidays.ts
Copy
export default function handler(req: NextRequest) {
  const query = new URL(req.url).searchParams;
  const from = query.get('from');
  const to = query.get('to');
  ...
}

Step4: ロジックの作成が終わったらローカルで確認

Copy
yarn dev

http://localhost:3000/api/v1/holidays?from=20220101&to=20221231

にアクセスすれば確認できます。

Step5: Vercelにデプロイ

ソースコードをGithubへプッシュして、Vercelにログインしプロジェクトを追加するだけでOKです。コンパイルは30秒もかからないでしょう。

完了

Vercel上でEdge Functionsを作るのがとても簡単です。値段も安い、スピードが早い、とりあえず試してみたらいかがでしょうか?

ちなみに日本の祝日検索サービスのソースコードはこちらです。 https://github.com/thundermiracle/jp-holidays

では。


ThunderMiracle

Blog part of ThunderMiracle.com