Runtime 0.3.0: TypeScript용 통합 서버리스 프레임워크

Source: Dev.to

One codebase. Three contexts. Zero configuration.

우리는 **Runtime Web 0.3.0**을 발표하게 되어 매우 기쁩니다 – Lambda 백엔드, AWS CDK 인프라, 그리고 React 프런트엔드를 하나의 타입‑안전 TypeScript 코드베이스로 통합하는 완전한 서버리스 프레임워크입니다.

Runtime Web이란?

Runtime Web은 AWS에서 풀스택 서버리스 애플리케이션을 구축하는 복잡성을 없애는 프로덕션 준비 프레임워크입니다. 백엔드, 인프라스트럭처, 프론트엔드 전체를 한 곳에서 작성하고, 단일 명령으로 배포할 수 있습니다.

runtime({
  app: ({ router }) => ,
  router: runtimeRouter({ router, defaults }),
  config: { serviceName: 'my-app', stage: 'prod' },
  register: {
    users: {
      ties: [UsersTies],
      lambdas: [createUserHandler, getUserHandler]
    }
  }
});

이 단일 진입점은 어디서든 동작합니다: Lambda 실행, CDK 합성, 그리고 브라우저 하이드레이션.

Core Features

Unified runtime() Entry Point

통합 runtime() 진입점

One function that automatically detects its execution context:
실행 컨텍스트를 자동으로 감지하는 하나의 함수:

No environment checks. No conditional imports. Just works.

Type‑Safe Dependency Injection

타입‑안전 의존성 주입

Access services through event.ties with full TypeScript support:
event.ties를 통해 서비스에 접근하고 전체 TypeScript 지원을 활용합니다:

type PaymentTies = {
  paymentService: PaymentsService;
  billingService: BillingService;
};

export const chargeHandler: LambdaDefinition = {
  ties: { paymentService: PaymentsService, billingService: BillingService },
  handler: async (event, context) => {
    // Full IntelliSense – no magic strings, no hash keys
    const result = await event.ties.paymentService.charge(event.body);
    await event.ties.billingService.record(result);
    return { statusCode: 200, body: JSON.stringify(result) };
  }
};

• Compile‑time errors for missing dependencies.
  누락된 의존성에 대해 컴파일 시 오류 발생.
• IDE autocomplete for everything.
  IDE 자동 완성 지원.

Declarative Microservice Architecture

선언형 마이크로서비스 아키텍처

Organise your backend into logical micro‑services with isolated DI containers:
백엔드를 논리적인 마이크로서비스와 격리된 DI 컨테이너로 구성합니다:

register: {
  payments: {
    ties: [PaymentsTies, BillingTies],
    lambdas: [chargeHandler, refundHandler, webhookHandler]
  },
  users: {
    ties: [UsersTies, AuthTies],
    lambdas: [createUserHandler, getUserHandler]
  }
}

Each micro‑service gets its own Lambda Layer with pre‑built dependencies, eliminating cold‑start overhead from unused services.
각 마이크로서비스는 사전 구축된 의존성을 가진 자체 Lambda 레이어를 받아, 사용되지 않는 서비스로 인한 콜드 스타트 오버헤드를 제거합니다.

Lambda Cold‑Start Initialization

Lambda 콜드 스타트 초기화

Execute expensive operations once, not on every request:
비싼 연산을 한 번만 실행하고, 각 요청마다 실행하지 않습니다:

export const getUserHandler: LambdaDefinition = {
  ties: { db: DatabaseService },

  // Runs ONCE during cold start — cached for all invocations
  init: async (ties) => ({
    dbPool: await ties.db.createConnectionPool(),
    config: await loadRemoteConfig(),
    warmSdk: await warmupAwsSdk()
  }),

  // Access cached snapshot on every request — zero overhead
  handler: async (event) => {
    const user = await event.snapshot.dbPool.query(event.pathParameters.id);
    return { statusCode: 200, body: JSON.stringify(user) };
  }
};

Why it matters
왜 중요한가

• Database connections created once, reused across thousands of requests.
  데이터베이스 연결을 한 번만 생성하고 수천 개 요청에 재사용합니다.
• Remote config loaded once, not on every cold start.
  원격 설정을 한 번만 로드하고, 각 콜드 스타트마다 로드하지 않습니다.
• SDK clients pre‑warmed before the first request hits.
  SDK 클라이언트를 첫 요청이 도착하기 전에 미리 워밍업합니다.

event.snapshot is fully typed – IDE autocomplete for cached resources. Works at micro‑service level too – share expensive resources across all handlers in a service.
event.snapshot은 완전한 타입을 가지고 있어 캐시된 리소스에 대한 IDE 자동 완성을 제공합니다. 마이크로서비스 수준에서도 작동하며, 서비스 내 모든 핸들러가 비싼 리소스를 공유할 수 있습니다.

HTTP API Authorization

HTTP API 인증

Built‑in support for JWT, IAM, Cognito, and custom Lambda authorizers:
JWT, IAM, Cognito 및 커스텀 Lambda authorizer에 대한 내장 지원:

http: {
  method: 'POST',
  path: '/api/payments/charge',
  auth: {
    type: 'jwt',
    issuer: 'https://auth.example.com',
    audience: ['api.example.com']
  }
}

Or use Cognito with minimal configuration:
또는 최소 설정으로 Cognito를 사용할 수 있습니다:

auth: {
  type: 'cognito',
  userPoolId: 'us-east-1_xxxxx',
  region: 'us-east-1'
}

HTTP API Authorization – Lifecycle & Behavior

HTTP API 인증 – 라이프사이클 및 동작

Declarative route‑level security for your API endpoints:
API 엔드포인트에 대한 선언형 라우트 수준 보안:

React SSR with Streaming

스트리밍을 활용한 React SSR

Server‑side rendering with renderToPipeableStream() and multi‑layer caching:
renderToPipeableStream()와 다중 레이어 캐싱을 활용한 서버‑사이드 렌더링:

• CloudFront edge caching – sub‑200 ms TTFB for cached routes.
  CloudFront 엣지 캐싱 – 캐시된 라우트에 대해 200 ms 이하의 TTFB 제공.
• S3 HTML cache – deterministic ETags, automatic invalidation.
  S3 HTML 캐시 – 결정적인 ETag와 자동 무효화.
• Streaming HTML – faster Time‑to‑F
  스트리밍 HTML – 더 빠른 Time‑to‑F

Source:

irst‑Byte.

runtimeAsync 데이터 로딩

React Router의 loader를 프레임워크 수준 추상화로 교체합니다:

const routes: RuntimeRoute[] = [
  {
    path: '/products/:id',
    Component: ProductPage,
    runtimeAsync: [productRetriever, reviewsRetriever] // 병렬 실행
  }
];

• Promise.allSettled를 사용한 병렬 데이터 페칭.
• 자동 SEO 메타데이터 로딩.
• 클라이언트 하이드레이션과 함께 서버‑사이드 실행.
• 타입‑안전한 useRuntimeData() 훅.

내장 SEO 관리

SEO 메타데이터는 DynamoDB에 저장되며 각 라우트에 대해 자동으로 제공됩니다. 이를 통해 추가 작업 없이 최신 Open Graph, Twitter Card, JSON‑LD 데이터를 유지할 수 있습니다.

자동 업데이트가 있는 데이터

// RuntimeHeadManager handles everything

// Access SEO data in components
const seo = useRuntimeSeoMeta();

• 제목, 설명, Open Graph, Twitter 카드
• JSON‑LD 구조화 데이터
• 클라이언트‑사이드 네비게이션 업데이트

CLI 도구: runtime seo init, runtime seo sync

HMR이 포함된 개발 서버

Hot Module Replacement를 이용한 로컬 개발:

npx runtime dev

• esbuild를 이용한 파일 감시
• WebSocket 기반 실시간 재로드
• Lambda 에뮬레이션
• 즉각적인 피드백 루프

제로‑컨피그 AWS 배포

CDK 구성은 모든 것을 자동으로 프로비저닝합니다:

npx runtime deploy --stage prod

생성되는 리소스:

• API Gateway HTTP API – Lambda 통합 포함
• Lambda 함수 – 최적화된 레이어 적용
• S3 버킷 – 정적 자산 및 SSR 캐시용
• CloudFront 배포 – 엣지 캐싱 적용
• DynamoDB – SEO 메타데이터 저장용
• IAM 역할 – 최소 권한 원칙에 따른 권한 부여

CloudFront 캐시 무효화

배포 시 자동 캐시 정리:

// Enabled by default
clearCacheOnDeploy: true

오래된 콘텐츠가 없으며 – 사용자는 즉시 업데이트를 확인할 수 있습니다.

CLI Reference

CLI Commands

# 새 프로젝트 초기화
npx @worktif/runtime init

# 개발
npx runtime dev              # HMR이 포함된 개발 서버 시작
npx runtime build           # 모든 타깃 빌드

# 배포
npx runtime deploy --stage dev
npx runtime destroy --stage dev

# SEO 관리
npx runtime seo init
npx runtime seo sync --stage dev

# 유틸리티
npx runtime cache-clear --stage dev
npx runtime stacks list
npx runtime doctor

멀티‑스택 아키텍처

인프라/런타임 분리를 통한 안정적인 배포:

Lambda 함수는 첫 배포 시 올바른 환경 변수를 받아 — 닭‑달걀 문제 없이.

성능 목표

• Lambda bundle: (source에 자세한 내용이 생략됨)
• Examples: (source에 자세한 내용이 생략됨)

빌드할 준비가 되셨나요? Run npx @worktif/runtime init and ship your first unified server‑less application today.