Runtime 0.3.0：统一的 Serverless 框架（适用于 TypeScript）

Source: Dev.to

一个代码库。三种上下文。零配置。

我们很高兴宣布 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 合成和浏览器水合。

核心特性

统一的 runtime() 入口

一个函数即可自动检测其执行上下文：

无需环境检查。无需条件导入。直接可用。

类型安全的依赖注入

通过 event.ties 访问服务，完整的 TypeScript 支持：

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

export const chargeHandler: LambdaDefinition = {
  ties: { paymentService: PaymentsService, billingService: BillingService },
  handler: async (event, context) => {
    // 完整的 IntelliSense – 无需魔法字符串，无需哈希键
    const result = await event.ties.paymentService.charge(event.body);
    await event.ties.billingService.record(result);
    return { statusCode: 200, body: JSON.stringify(result) };
  }
};

• 编译时检测缺失的依赖。
• IDE 自动补全全部内容。

声明式微服务架构

将后端组织为逻辑微服务，并为每个服务提供独立的 DI 容器：

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

每个微服务拥有自己的 Lambda Layer，预先构建依赖，避免因未使用的服务导致的冷启动开销。

Lambda 冷启动初始化

一次性执行昂贵操作，而不是在每次请求时都执行：

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

  // 在冷启动期间 **仅运行一次** — 对所有调用进行缓存
  init: async (ties) => ({
    dbPool: await ties.db.createConnectionPool(),
    config: await loadRemoteConfig(),
    warmSdk: await warmupAwsSdk()
  }),

  // 每次请求访问缓存快照 — 零开销
  handler: async (event) => {
    const user = await event.snapshot.dbPool.query(event.pathParameters.id);
    return { statusCode: 200, body: JSON.stringify(user) };
  }
};

为何重要

• 数据库连接只创建一次，跨数千次请求复用。
• 远程配置仅加载一次，而不是每次冷启动都加载。
• SDK 客户端在首次请求前预热。

event.snapshot 完全带类型 —— 对缓存资源的 IDE 自动补全。微服务层面同样适用 —— 在同一服务的所有处理器之间共享昂贵资源。

HTTP API 授权

内置对 JWT、IAM、Cognito 以及自定义 Lambda authorizers 的支持：

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

或使用最少配置的 Cognito：

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

HTTP API 授权 – 生命周期与行为

声明式的路由级安全，为你的 API 端点提供保护：

React SSR 与流式渲染

使用 renderToPipeableStream() 进行服务器端渲染，并结合多层缓存：

• CloudFront 边缘缓存 – 缓存路由的首字节时间 (TTFB) 可低于 200 ms。
• S3 HTML 缓存 – 确定性的 ETag，自动失效。
• 流式 HTML – 更快的 Time‑to‑First‑Byte。

irst‑Byte.

runtimeAsync 数据加载

用框架级抽象替代 React Router 的 loader：

const routes: RuntimeRoute[] = [
  {
    path: '/products/:id',
    Component: ProductPage,
    runtimeAsync: [productRetriever, reviewsRetriever] // 并行执行
  }
];

• 使用 Promise.allSettled 并行获取数据。
• 自动加载 SEO 元数据。
• 服务器端执行并在客户端进行 hydration。
• 类型安全的 useRuntimeData() Hook。

内置 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 参考

CLI Commands

# Initialize new project
npx @worktif/runtime init

# Development
npx runtime dev              # Start dev server with HMR
npx runtime build           # Build all targets

# Deployment
npx runtime deploy --stage dev
npx runtime destroy --stage dev

# SEO Management
npx runtime seo init
npx runtime seo sync --stage dev

# Utilities
npx runtime cache-clear --stage dev
npx runtime stacks list
npx runtime doctor

多堆栈架构

可靠的部署，基础设施/运行时分离：

Lambda 函数在首次部署时即可获得正确的环境变量——不存在先有鸡还是先有蛋的问题。

性能目标

• Lambda bundle: (details omitted in source)
• Examples: (details omitted in source)

准备好构建吗？ Run npx @worktif/runtime init and ship your first unified server‑less application today.