尧图网页设计 
Rivet Actors × React 部署到 Renderreact-render 示例的完整实战指南【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors本指南围绕仓库中 examples/react-render 示例展开讲解如何用 React 前端 rivetkit/react类型安全 Hooks 连接 Rivet Actors 有状态后端并借助生产级 Hono HTTP 服务器、Vite 构建与render.yamlBlueprint 一键部署到 Render。读完本文你将掌握「本地开发 → 构建产物 → 云端部署」的完整链路以及RIVET_ENDPOINT、RIVET_PUBLIC_ENDPOINT、RIVET_ENVOY_VERSION等关键环境变量的取值逻辑与配置方法。示例概览为什么需要 react-renderreact-render是仓库中 react 示例的Render 优化版。它在原示例基础上补齐了三个生产化能力生产 HTTP 服务器使用 Hono hono/node-server同时承载/api/rivet/*的 Actor 注册表转发与静态资源托管Vite 构建将 React 前端构建为静态产物public/由同一服务器对外提供服务render.yaml Blueprint声明式描述部署配置在 Render 上实现「推代码即部署」。示例整体目录结构如下examples/react-render/ ├── frontend/ │ ├── app/ │ │ ├── App.tsx # React 组件useActor useEvent │ │ └── rivet-client.ts # 类型安全的客户端基地址解析 │ ├── main.tsx │ └── app.css ├── src/ │ ├── actors.ts # Actor 定义计数器 事件广播 │ ├── env.ts # 环境变量归一化与端口解析 │ ├── index.ts # 入口按环境选择 HTTP 服务或本地启动 │ └── server.ts # Hono 应用API 转发 静态托管 ├── render.yaml # Render Blueprint ├── vite.config.ts └── package.json本地快速开始按照 README 的引导克隆仓库并进入示例目录即可运行git clone https://github.com/rivet-dev/rivet.git cd rivet/examples/react npm install npm run dev说明README 中给出的本地路径指向基础版examples/reactreact-render目录结构与之对等在其下执行同样命令即可。实际项目的源码仓库根目录为GitHub_Trending/riv/actors对应示例位于 examples/react-render。package.jsonexamples/react-render/package.json定义了三个核心脚本脚本命令作用devconcurrently -n server,vite tsx --watch src/index.ts vite并行启动 Actor 运行时热重载与 Vite 开发服务器buildvite build构建前端产物到public/starttsx src/index.ts以生产模式运行 Hono 服务器本地开发时vite.config.tsexamples/react-render/vite.config.ts会把三个关键路径代理到本机 Actor 运行时端口server: { clearScreen: false, proxy: { /actors: { target: http://127.0.0.1:${managerPort}, ws: true }, /metadata: { target: http://127.0.0.1:${managerPort} }, /health: { target: http://127.0.0.1:${managerPort} }, }, }其中managerPort默认取RIVET_MANAGER_PORT缺省为6420。/actors显式开启ws: true因为 Actor 事件推送走 WebSocket。Actor 定义状态、动作与事件核心业务逻辑在 examples/react-render/src/actors.ts是一个最小计数器 Actorimport { actor, event, setup } from rivetkit; export const counter actor({ state: { count: 0 }, events: { newCount: eventnumber(), }, actions: { increment: (c, x: number) { c.state.count x; c.broadcast(newCount, c.state.count); return c.state.count; }, }, }); export const registry setup({ use: { counter }, });三个关键概念state{ count: 0 }定义 Actor 的有状态内存由 Rivet 运行时持久化管理前端不直接持有业务状态eventsnewCount: eventnumber()声明一个事件通道广播时携带number负载是「实时更新」的基石actionsincrement是客户端可远程调用的动作先更新状态再c.broadcast(newCount, c.state.count)把新值推给所有订阅者最后返回最新值。setup({ use: { counter } })生成registry它既承担本地启动registry.start()也暴露registry.handler()供 HTTP 服务器把请求转发给 Actor 运行时。前端集成useActor 与 useEventReact 端的关键代码在 examples/react-render/frontend/app/App.tsx使用rivetkit/react提供的 Hookconst rivet useMemo(() createRivetKitAppRegistry(rivetClientBase()), []); const { useActor } rivet; const [actorKey, setActorKey] useState(default); const [total, setTotal] useState(0); const counter useActor({ name: counter, key: [actorKey] }); const live Boolean(counter.connection); counter.useEvent(newCount, (next: number) setTotal(next)); const add async (delta: number) { if (counter.connection) await counter.connection.increment(delta); };要点拆解类型安全createRivetKitAppRegistry使用从src/actors.ts导出的registry类型见 frontend/app/rivet-client.ts 中的export type AppRegistry typeof registry让increment等动作在编译期即可获得完整签名useActor{ name: counter, key: [actorKey] }连接指定 Actor 与 Key。修改actorKey可切换到不同的 Actor 实例——UI 中的 helper 文案 Same key in another window same running total 正说明了 Key 与实例隔离的关系useEventcounter.useEvent(newCount, cb)订阅事件后端每次广播新计数都会触发setTotal实现多窗口实时同步调用动作counter.connection.increment(delta)直接以方法调用形式远程执行 Actor 动作参数x: number由 TS 类型系统保证。生产 HTTP 服务器与运行模式切换react-render的「生产化」体现在 examples/react-render/src/server.ts 的 Hono 应用const app new Hono(); app.all(/api/rivet/*, (c) registry.handler(c.req.raw)); app.get(/health, (c) c.json({ status: ok })); app.use(/*, serveStatic({ root: ./public })); app.get(*, serveStatic({ root: ./public, path: /index.html }));/api/rivet/*将请求原样交给registry.handler由 Rivet 运行时接管 Actor 通信/health健康检查端点对应render.yaml中的healthCheckPath: /health静态资源优先匹配public/下的构建产物其余路径回退到index.htmlSPA 路由兜底。入口 examples/react-render/src/index.ts 根据环境选择启动方式if (useRivetCloud) { const { serve } await import(hono/node-server); serve({ fetch: app.fetch, port }, () { console.log(react-render listening on http://0.0.0.0:${port}); }); } else { registry.start(); }判断逻辑来自 examples/react-render/src/env.tsexport const useRivetCloud process.env.NODE_ENV production Boolean(process.env.RIVET_ENDPOINT);即生产环境且配置了RIVET_ENDPOINT时启动 Hono 服务器作为反向代理 静态托管否则走registry.start()本地开发模式。端口默认6420可通过PORT覆盖。部署到 RenderBlueprint 与环境变量使用 render.yaml仓库内已提供声明式部署配置 examples/react-render/render.yamlservices: - type: web name: react-render runtime: node plan: free region: oregon buildCommand: npm ci --includedev npm run build startCommand: npm start healthCheckPath: /health envVars: - key: NODE_VERSION value: 22.12.0 - key: NODE_ENV value: production - key: RIVETKIT_STORAGE_PATH value: /tmp/rivetkit - key: RIVET_ENDPOINT sync: false - key: RIVET_PUBLIC_ENDPOINT sync: false字段说明字段值含义typewebRender 常驻 Web 服务runtimenodeNode 运行时版本由NODE_VERSION22.12.0锁定planfree免费计划即可跑通regionoregon部署地域可按需调整buildCommandnpm ci --includedev npm run build按 lockfile 安装含 devDependencies 的依赖再执行 Vite 构建startCommandnpm start即tsx src/index.ts启动生产服务器healthCheckPath/health对应 server.ts 中的健康检查路由RIVETKIT_STORAGE_PATH/tmp/rivetkitActor 状态存储目录Render 免费计划使用临时盘RIVET_ENDPOINT/RIVET_PUBLIC_ENDPOINTsync: false由用户在 Dashboard 手动填写不在配置文件中硬编码三个关键环境变量README 中明确了部署时必须配置的两个变量变量说明RIVET_ENDPOINT来自 Rivet Cloud 项目的后端端点 URLbackend endpointRIVET_PUBLIC_ENDPOINT来自 Rivet Cloud 项目的公共端点 URLpublic endpoint配置完成后在 Rivet 控制台将Connect your backend指向你的 Render 服务 HTTPS 地址即可让 Rivet Cloud 的回调流量落到该服务上。RIVET_ENDPOINT的取值还直接决定运行模式结合上文useRivetCloud的判断它在生产环境一旦被设置服务就会以「HTTP 服务器 云连接」模式启动。RIVET_ENVOY_VERSION 的自动推导README 特别提示RIVET_ENVOY_VERSION会自动从 Render 的RENDER_GIT_COMMIT推导无需每次部署手动 bump如需覆盖可显式设置。具体算法在 examples/react-render/src/env.ts 中可读function ensureRivetEnvoyVersion(): void { if (process.env.RIVET_ENVOY_VERSION) return; // 1. 显式设置优先 if (process.env.RIVET_RUNNER_VERSION) { process.env.RIVET_ENVOY_VERSION process.env.RIVET_RUNNER_VERSION; return; } const sha process.env.RENDER_GIT_COMMIT; // 2. 从 Git commit 派生 if (sha /^[0-9a-f]{7,40}$/i.test(sha)) { const n Number.parseInt(sha.slice(0, 8), 16); process.env.RIVET_ENVOY_VERSION String(n 0 ? n : 1); } }推导顺序显式环境变量 →RIVET_RUNNER_VERSION→ 取RENDER_GIT_COMMIT前 8 位十六进制转为十进制整数结果为 0 时兜底为 1。这一机制让「每次部署对应一个独特版本号」无需人工维护。前端构建期端点注入生产环境下前端需要通过RIVET_PUBLIC_ENDPOINT连接 Actor。构建期注入发生在 vite.config.tsconst rivetPublic env.VITE_RIVET_PUBLIC_ENDPOINT || env.RIVET_PUBLIC_ENDPOINT || ; define: { import.meta.env.VITE_RIVET_PUBLIC_ENDPOINT: JSON.stringify(rivetPublic), }运行时解析在 frontend/app/rivet-client.tsexport function rivetClientBase(): string { if (import.meta.env.DEV) return http://localhost:6420; const fromBuild import.meta.env.VITE_RIVET_PUBLIC_ENDPOINT as string | undefined; if (fromBuild fromBuild.length 0) { return fromBuild.replace(/\/$/, ); } return window.location.origin; }解析优先级开发模式固定http://localhost:6420→ 构建期注入的VITE_RIVET_PUBLIC_ENDPOINT→ 兜底为当前页面 Origin。这保证了本地开发、托管构建、直接访问三种场景下客户端都能找到正确的后端地址。部署步骤速查将仓库推送到 GitHub/GitLab/Bitbucket在 Render Dashboard 进入Blueprints New Blueprint Instance选择仓库并Apply若从 monorepo 部署将Root Directory设置为examples/react-renderrender.yaml 注释中亦明确此要求在服务环境变量中填写RIVET_ENDPOINT与RIVET_PUBLIC_ENDPOINT两者sync: false需手动配置在 Rivet 控制台把Connect your backend指向该服务健康检查为/health的 HTTPS 地址构建命令npm ci --includedev npm run build启动命令npm startNode 版本锁定22.12.0。小结react-render示例完整展示了 Rivet Actors 的「本地开发 → 云端部署」最佳实践rivetkit定义有状态 Actor 并通过事件广播实现实时推送rivetkit/react以useActor/useEvent提供类型安全的前端集成Hono Vite 将后端与静态资源合并为一个生产服务render.yaml则让 Render 部署可复现。对于任何需要「React 交互界面 有状态实时后端」的应用协作白板、多人计数器、实时状态面板这个示例都是一份可直接落地的参考模板。延伸阅读基础版示例examples/react无生产服务器与 Render BlueprintActor 运行时代码container-runnerRivetKit React 客户端实现rivetkit-typescript/packages更多部署形态参考examples/hello-world-render 与 examples/chat-room-render【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Rivet Actors × React 部署到 Render：react-render 示例的完整实战指南
Rivet Actors × React 部署到 Renderreact-render 示例的完整实战指南【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors本指南围绕仓库中 examples/react-render 示例展开讲解如何用 React 前端 rivetkit/react类型安全 Hooks 连接 Rivet Actors 有状态后端并借助生产级 Hono HTTP 服务器、Vite 构建与render.yamlBlueprint 一键部署到 Render。读完本文你将掌握「本地开发 → 构建产物 → 云端部署」的完整链路以及RIVET_ENDPOINT、RIVET_PUBLIC_ENDPOINT、RIVET_ENVOY_VERSION等关键环境变量的取值逻辑与配置方法。示例概览为什么需要 react-renderreact-render是仓库中 react 示例的Render 优化版。它在原示例基础上补齐了三个生产化能力生产 HTTP 服务器使用 Hono hono/node-server同时承载/api/rivet/*的 Actor 注册表转发与静态资源托管Vite 构建将 React 前端构建为静态产物public/由同一服务器对外提供服务render.yaml Blueprint声明式描述部署配置在 Render 上实现「推代码即部署」。示例整体目录结构如下examples/react-render/ ├── frontend/ │ ├── app/ │ │ ├── App.tsx # React 组件useActor useEvent │ │ └── rivet-client.ts # 类型安全的客户端基地址解析 │ ├── main.tsx │ └── app.css ├── src/ │ ├── actors.ts # Actor 定义计数器 事件广播 │ ├── env.ts # 环境变量归一化与端口解析 │ ├── index.ts # 入口按环境选择 HTTP 服务或本地启动 │ └── server.ts # Hono 应用API 转发 静态托管 ├── render.yaml # Render Blueprint ├── vite.config.ts └── package.json本地快速开始按照 README 的引导克隆仓库并进入示例目录即可运行git clone https://github.com/rivet-dev/rivet.git cd rivet/examples/react npm install npm run dev说明README 中给出的本地路径指向基础版examples/reactreact-render目录结构与之对等在其下执行同样命令即可。实际项目的源码仓库根目录为GitHub_Trending/riv/actors对应示例位于 examples/react-render。package.jsonexamples/react-render/package.json定义了三个核心脚本脚本命令作用devconcurrently -n server,vite tsx --watch src/index.ts vite并行启动 Actor 运行时热重载与 Vite 开发服务器buildvite build构建前端产物到public/starttsx src/index.ts以生产模式运行 Hono 服务器本地开发时vite.config.tsexamples/react-render/vite.config.ts会把三个关键路径代理到本机 Actor 运行时端口server: { clearScreen: false, proxy: { /actors: { target: http://127.0.0.1:${managerPort}, ws: true }, /metadata: { target: http://127.0.0.1:${managerPort} }, /health: { target: http://127.0.0.1:${managerPort} }, }, }其中managerPort默认取RIVET_MANAGER_PORT缺省为6420。/actors显式开启ws: true因为 Actor 事件推送走 WebSocket。Actor 定义状态、动作与事件核心业务逻辑在 examples/react-render/src/actors.ts是一个最小计数器 Actorimport { actor, event, setup } from rivetkit; export const counter actor({ state: { count: 0 }, events: { newCount: eventnumber(), }, actions: { increment: (c, x: number) { c.state.count x; c.broadcast(newCount, c.state.count); return c.state.count; }, }, }); export const registry setup({ use: { counter }, });三个关键概念state{ count: 0 }定义 Actor 的有状态内存由 Rivet 运行时持久化管理前端不直接持有业务状态eventsnewCount: eventnumber()声明一个事件通道广播时携带number负载是「实时更新」的基石actionsincrement是客户端可远程调用的动作先更新状态再c.broadcast(newCount, c.state.count)把新值推给所有订阅者最后返回最新值。setup({ use: { counter } })生成registry它既承担本地启动registry.start()也暴露registry.handler()供 HTTP 服务器把请求转发给 Actor 运行时。前端集成useActor 与 useEventReact 端的关键代码在 examples/react-render/frontend/app/App.tsx使用rivetkit/react提供的 Hookconst rivet useMemo(() createRivetKitAppRegistry(rivetClientBase()), []); const { useActor } rivet; const [actorKey, setActorKey] useState(default); const [total, setTotal] useState(0); const counter useActor({ name: counter, key: [actorKey] }); const live Boolean(counter.connection); counter.useEvent(newCount, (next: number) setTotal(next)); const add async (delta: number) { if (counter.connection) await counter.connection.increment(delta); };要点拆解类型安全createRivetKitAppRegistry使用从src/actors.ts导出的registry类型见 frontend/app/rivet-client.ts 中的export type AppRegistry typeof registry让increment等动作在编译期即可获得完整签名useActor{ name: counter, key: [actorKey] }连接指定 Actor 与 Key。修改actorKey可切换到不同的 Actor 实例——UI 中的 helper 文案 Same key in another window same running total 正说明了 Key 与实例隔离的关系useEventcounter.useEvent(newCount, cb)订阅事件后端每次广播新计数都会触发setTotal实现多窗口实时同步调用动作counter.connection.increment(delta)直接以方法调用形式远程执行 Actor 动作参数x: number由 TS 类型系统保证。生产 HTTP 服务器与运行模式切换react-render的「生产化」体现在 examples/react-render/src/server.ts 的 Hono 应用const app new Hono(); app.all(/api/rivet/*, (c) registry.handler(c.req.raw)); app.get(/health, (c) c.json({ status: ok })); app.use(/*, serveStatic({ root: ./public })); app.get(*, serveStatic({ root: ./public, path: /index.html }));/api/rivet/*将请求原样交给registry.handler由 Rivet 运行时接管 Actor 通信/health健康检查端点对应render.yaml中的healthCheckPath: /health静态资源优先匹配public/下的构建产物其余路径回退到index.htmlSPA 路由兜底。入口 examples/react-render/src/index.ts 根据环境选择启动方式if (useRivetCloud) { const { serve } await import(hono/node-server); serve({ fetch: app.fetch, port }, () { console.log(react-render listening on http://0.0.0.0:${port}); }); } else { registry.start(); }判断逻辑来自 examples/react-render/src/env.tsexport const useRivetCloud process.env.NODE_ENV production Boolean(process.env.RIVET_ENDPOINT);即生产环境且配置了RIVET_ENDPOINT时启动 Hono 服务器作为反向代理 静态托管否则走registry.start()本地开发模式。端口默认6420可通过PORT覆盖。部署到 RenderBlueprint 与环境变量使用 render.yaml仓库内已提供声明式部署配置 examples/react-render/render.yamlservices: - type: web name: react-render runtime: node plan: free region: oregon buildCommand: npm ci --includedev npm run build startCommand: npm start healthCheckPath: /health envVars: - key: NODE_VERSION value: 22.12.0 - key: NODE_ENV value: production - key: RIVETKIT_STORAGE_PATH value: /tmp/rivetkit - key: RIVET_ENDPOINT sync: false - key: RIVET_PUBLIC_ENDPOINT sync: false字段说明字段值含义typewebRender 常驻 Web 服务runtimenodeNode 运行时版本由NODE_VERSION22.12.0锁定planfree免费计划即可跑通regionoregon部署地域可按需调整buildCommandnpm ci --includedev npm run build按 lockfile 安装含 devDependencies 的依赖再执行 Vite 构建startCommandnpm start即tsx src/index.ts启动生产服务器healthCheckPath/health对应 server.ts 中的健康检查路由RIVETKIT_STORAGE_PATH/tmp/rivetkitActor 状态存储目录Render 免费计划使用临时盘RIVET_ENDPOINT/RIVET_PUBLIC_ENDPOINTsync: false由用户在 Dashboard 手动填写不在配置文件中硬编码三个关键环境变量README 中明确了部署时必须配置的两个变量变量说明RIVET_ENDPOINT来自 Rivet Cloud 项目的后端端点 URLbackend endpointRIVET_PUBLIC_ENDPOINT来自 Rivet Cloud 项目的公共端点 URLpublic endpoint配置完成后在 Rivet 控制台将Connect your backend指向你的 Render 服务 HTTPS 地址即可让 Rivet Cloud 的回调流量落到该服务上。RIVET_ENDPOINT的取值还直接决定运行模式结合上文useRivetCloud的判断它在生产环境一旦被设置服务就会以「HTTP 服务器 云连接」模式启动。RIVET_ENVOY_VERSION 的自动推导README 特别提示RIVET_ENVOY_VERSION会自动从 Render 的RENDER_GIT_COMMIT推导无需每次部署手动 bump如需覆盖可显式设置。具体算法在 examples/react-render/src/env.ts 中可读function ensureRivetEnvoyVersion(): void { if (process.env.RIVET_ENVOY_VERSION) return; // 1. 显式设置优先 if (process.env.RIVET_RUNNER_VERSION) { process.env.RIVET_ENVOY_VERSION process.env.RIVET_RUNNER_VERSION; return; } const sha process.env.RENDER_GIT_COMMIT; // 2. 从 Git commit 派生 if (sha /^[0-9a-f]{7,40}$/i.test(sha)) { const n Number.parseInt(sha.slice(0, 8), 16); process.env.RIVET_ENVOY_VERSION String(n 0 ? n : 1); } }推导顺序显式环境变量 →RIVET_RUNNER_VERSION→ 取RENDER_GIT_COMMIT前 8 位十六进制转为十进制整数结果为 0 时兜底为 1。这一机制让「每次部署对应一个独特版本号」无需人工维护。前端构建期端点注入生产环境下前端需要通过RIVET_PUBLIC_ENDPOINT连接 Actor。构建期注入发生在 vite.config.tsconst rivetPublic env.VITE_RIVET_PUBLIC_ENDPOINT || env.RIVET_PUBLIC_ENDPOINT || ; define: { import.meta.env.VITE_RIVET_PUBLIC_ENDPOINT: JSON.stringify(rivetPublic), }运行时解析在 frontend/app/rivet-client.tsexport function rivetClientBase(): string { if (import.meta.env.DEV) return http://localhost:6420; const fromBuild import.meta.env.VITE_RIVET_PUBLIC_ENDPOINT as string | undefined; if (fromBuild fromBuild.length 0) { return fromBuild.replace(/\/$/, ); } return window.location.origin; }解析优先级开发模式固定http://localhost:6420→ 构建期注入的VITE_RIVET_PUBLIC_ENDPOINT→ 兜底为当前页面 Origin。这保证了本地开发、托管构建、直接访问三种场景下客户端都能找到正确的后端地址。部署步骤速查将仓库推送到 GitHub/GitLab/Bitbucket在 Render Dashboard 进入Blueprints New Blueprint Instance选择仓库并Apply若从 monorepo 部署将Root Directory设置为examples/react-renderrender.yaml 注释中亦明确此要求在服务环境变量中填写RIVET_ENDPOINT与RIVET_PUBLIC_ENDPOINT两者sync: false需手动配置在 Rivet 控制台把Connect your backend指向该服务健康检查为/health的 HTTPS 地址构建命令npm ci --includedev npm run build启动命令npm startNode 版本锁定22.12.0。小结react-render示例完整展示了 Rivet Actors 的「本地开发 → 云端部署」最佳实践rivetkit定义有状态 Actor 并通过事件广播实现实时推送rivetkit/react以useActor/useEvent提供类型安全的前端集成Hono Vite 将后端与静态资源合并为一个生产服务render.yaml则让 Render 部署可复现。对于任何需要「React 交互界面 有状态实时后端」的应用协作白板、多人计数器、实时状态面板这个示例都是一份可直接落地的参考模板。延伸阅读基础版示例examples/react无生产服务器与 Render BlueprintActor 运行时代码container-runnerRivetKit React 客户端实现rivetkit-typescript/packages更多部署形态参考examples/hello-world-render 与 examples/chat-room-render【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考