본문 바로가기
Backend2026년 5월 15일6분 읽기

Hono 4 + Cloudflare Workers — Edge 풀스택 30분 셋업 가이드

YS
김영삼
조회 1111
Hono 4 + Cloudflare Workers — Edge 풀스택 30분 셋업 가이드

핵심 요약

Hono 4는 14KB로 가장 빠른 Edge 웹 프레임워크. Cloudflare Workers와 묶으면 인증·DB·스토리지·이미지 처리·실시간을 단일 코드베이스 30분 안에 띄운다. RPC 클라이언트로 프론트엔드와 타입 공유, JSX 서버 렌더, D1·R2·KV 직접 바인딩이 핵심. 단, 30초 CPU 제한·메모리 128MB 등 Workers 제약은 그대로.

1. 왜 Hono인가

  • 표준 Request/Response: Web 표준만 사용 — Workers, Bun, Deno, Node 어디서나
  • 14KB: cold start 1ms 이내
  • RPC 타입 공유: tRPC 비슷하지만 별도 schema 정의 불필요
  • 플랫폼 미들웨어 내장: CF Workers, Vercel, AWS Lambda 어댑터

2. 30분 셋업 — 부트스트랩

npm create hono@latest my-app
# Template: cloudflare-workers
# Package manager: pnpm

cd my-app
pnpm install
pnpm dev   # localhost:8787

3. 라우트 + JSX 렌더

// src/index.tsx
import { Hono } from "hono";
import { jsxRenderer } from "hono/jsx-renderer";

const app = new Hono<{ Bindings: Env }>();

app.get("*", jsxRenderer(({ children }) => (
  <html>
    <head><title>Edge App</title></head>
    <body>{children}</body>
  </html>
)));

app.get("/", (c) => c.render(<h1>Hello Edge</h1>));

export default app;

4. RPC 클라이언트 — 타입 공유

// 서버
const route = app
  .get("/users/:id", (c) => c.json({ id: c.req.param("id"), name: "Sam" }))
  .post("/users", async (c) => {
    const body = await c.req.json<{ name: string }>();
    return c.json({ ok: true, name: body.name });
  });

export type AppType = typeof route;

// 클라이언트
import { hc } from "hono/client";
import type { AppType } from "./api";

const client = hc<AppType>("https://api.example.com");
const res = await client.users[":id"].$get({ param: { id: "1" } });
const user = await res.json();   // 타입 추론 완료

5. D1 (SQLite) 바인딩

// wrangler.toml
[[d1_databases]]
binding = "DB"
database_name = "app-prod"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

// src/index.ts
app.get("/posts", async (c) => {
  const { results } = await c.env.DB
    .prepare("SELECT * FROM posts WHERE published = ?1 ORDER BY created_at DESC LIMIT 20")
    .bind(1)
    .all();
  return c.json(results);
});

6. 성능 실측 — Workers vs Bun vs Node

같은 Hono 코드, "Hello World + JSON 응답" 벤치마크.

런타임RPSp99 mscold start월 비용 1B req
CF Workers148K91ms$300
Bun 1.2 (VPS)165K640ms$60 (인스턴스)
Node 22 (VPS)112K11180ms$60
Vercel Edge (Hono)78K1830ms$420

7. R2 + KV로 세션·캐시

app.get("/cached/:slug", async (c) => {
  const slug = c.req.param("slug");
  const cached = await c.env.KV.get("post:" + slug, "json");
  if (cached) return c.json(cached);

  const fresh = await fetchPostFromAPI(slug);
  await c.env.KV.put("post:" + slug, JSON.stringify(fresh), {
    expirationTtl: 300,
  });
  return c.json(fresh);
});

8. 함정 — Workers 제약 7가지

제약한계해결
CPU 시간요청당 30s (Paid)긴 작업 Queue로
메모리128MB스트리밍 처리
서브리퀘스트50개 (Free 50, Paid 1000)병렬화·캐싱
Node APInodejs_compat 켜야 일부 가능표준 API 우선
파일 시스템없음R2/KV로 대체
WebSocket 시간hibernation 권장Durable Objects
D1 쿼리 크기응답 1MB페이지네이션

참고

  • hono.dev
  • developers.cloudflare.com/workers

댓글 0

아직 댓글이 없습니다.
Ctrl+Enter로 등록