VercelのEdge Functionsで日本の祝日を検索するサービスを作ってみた

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に下記の制限があります。

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

Edge Functionsの長所は？

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

エッジリージョンはデータセンターのリージョンより多いので、ユーザの近くのリージョン（エッジプラットフォーム）から返答できる。レスポンスがとにかく早い。特にデータセンターから離れているところからのアクセス。
安い。食うリソースーが違うので、安い。Vercelなら月100万回のcallまで無料。Netlifyはなんと300万回まで。
キャッシュできる。ブラウザーのキャッシュ機能を使わずにエッジにキャッシュできる。新しいEdge Functionsがデプロイするときも、自動的にinvalidateしてくれるので、古いキャッシュが参照していることも心配しなくてもいい。
Serverless Functionsより起動が早い。node.js環境を起動する必要がないからです。

VercelのEdge Functionsを作ってみよう

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

ライブラリーをimportしても自動的に解決してくれる。相対パスなど使いたい場合でも、普段と同じように、tsconfig.jsonにbaseUrlとpathsを設定すればOK。
- Vercel CLIだったらかなり面倒。自分のtranspile用のツールを導入しなければいけない。少し試してみたが、デバッグするとき、vercel devがruntimeエラーを出したので諦めた
next/serverから、便利なclass: NextResponseとNextRequestを使える。
- <-> Vercel CLIには使えなく、たとえJSONを返したい場合い、Response, RequestとJSONを一緒に使う必要がある。

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',
    },
  });
}

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/v1にholidays.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

では。