Zenn
📝

ElysiaJSをVercelで使う時にハマったこと [2024年令和最新版]

2024/10/18に公開
TypeScript
Vercel
Serverless
ElysiaJS
elysia
tech

あらすじ

サーバーレスで使えるいい感じのフレームワークがないかと探していたところ、ElysiaJS というプロジェクトに出会いました。
https://elysiajs.com/

公式ページにアクセスするなりかわいいロゴがお出迎えしてくれます。かなり若いプロジェクトで活発に開発されていますが、1.xの安定版のリリースまで到達しており趣味で基本的な機能を使う分には十分安定していそうです。

若干off-topic

Elysia（エリシア）の由来は崩壊3rdに登場する同名のキャラクターかと思われます。公式サイトのブランディングカラーもエリシアのイメージカラーに似た配色になっている上、バージョンのコードネームも3rd由来と思われるなど開発者の遊び心とマニアっぷりが伝わってきます。

罠1: Vercel CLIに内蔵されているTypeScriptのバージョンが古すぎてビルドできない

いざvercel devで実行しようとすると恐ろしい量のtscのエラーがコンソールに流れ込んできます。Vercelに内蔵されているTypeScriptのバージョンが4.xと古いのが原因です。
https://github.com/vercel/vercel/issues/8680

Solution

package.jsonに以下の内容を追記してください。指定するバージョンはプロジェクトで使ってるTypeScriptバージョンと合わせるようにしてください。

{
    "resolutions": {
        "**/ts-node": "10.9.2",
        "**/typescript": "^5.6.2"
    }
}

罠2: Error from API Route /api/index: Code generation from strings disallowed for this context がコンソールに流れ500エラーが出る

セキュリティ上の理由でコードの実行時コンパイルがブロックされています。

Solution

ElysiaのAhead of Time compliationを無効にします。

export const app = new Elysia({
    // これを追加
    aot: false
})

完成ソースコード

yarn vercel devで/apiにアクセスしてメッセージが出てくれば成功です

api/index.ts 

import { app } from "@/vercel"

export const config = { runtime: "edge" }

export default async function handler(request: Request) {
    return app.fetch(request)
}

src/vercel.ts 

import Elysia from "elysia"

export const config = { runtime: "edge" }

export const app = new Elysia({
    aot: false
})

app.get("/api", () => "Hello from Elysia!!!")

Discussion