文档教程云原生【免费下载链接】docsUser documentation for Knative components.项目地址https://gitcode.com/gh_mirrors/docs1/docs点击查看免费下载本篇技术指南以 Knative 官方示例仓库docs中的 bookstore-sample-app 前端frontend为核心讲解如何基于 Next.js 16 Tailwind CSS TypeScript 搭建一个事件驱动书店应用的用户界面并完整走通从依赖安装、本地开发、Docker 容器化到部署进 Kubernetes 集群、与 Knative Eventing 事件链路对接的整个过程。阅读完成后你将掌握该示例前端工程的目录设计、WebSocket 代理与 CloudEvent 提交的实现方式以及config/100-front-end-deployment.yaml中的部署要点。应用定位事件驱动书店的“门面”在 Knative Bookstore 教程中整个示例被拆分为多个独立组件仓库根目录下的 start/README.md 给出了整体视图db-service/存储书评与评论的数据库服务frontend/基于 Next.js 构建的书店用户界面即本文主角node-server/处理后端业务逻辑的 Node.js 服务sequence/用于编排工作流的 Knative Sequenceslack-sink/通过 Apache Camel 对接 Slack 通知setup.sh一键安装 Knative 并部署前端与后端服务的脚本。前端是整个事件驱动链路的入口用户在页面上提交评论前端将其包装为 CloudEvent 交给 node-server事件再经由 Knative Broker、Sequence 等组件流转例如依次做敏感词过滤、情感分析最终写库并通知 Slack随后前端通过 WebSocket 实时刷新评论列表。理解 frontend 的代码就理解了整条事件链的“起点”。环境准备与依赖安装原文档的第一步是安装依赖。进入前端目录后执行npm install依赖清单以仓库内的 package.json 为准主要分为两组类别包用途框架next16.2.6、react/react-dom^18Next.js 应用运行时与渲染样式tailwindcss^3.3.0、postcss^8、autoprefixer^10Tailwind CSS 编译链路主题next-themes^0.3.0明暗主题切换配合darkMode: classUI 辅助heroicons/react、nextui-org/react、framer-motion图标、组件与动效实时通信ws^8.20.1、next-ws^2.1.4、types/wsWebSocket 服务端代理与客户端连接工程化typescript^5、eslint^8、eslint-config-next、types/node、types/react类型检查与代码规范其中next-ws是前端实现 WebSocket 代理的关键依赖其prepare脚本next-ws patch会在npm install阶段自动对 Next.js 运行时打补丁对应package.json中的prepare: next-ws patch使应用可以在 Next.js 路由中处理 WebSocket 升级请求。本地开发运行依赖安装完成后原文档提供了四种等价启动方式npm run dev # 或 yarn dev # 或 pnpm dev # 或 bun dev它们最终都指向package.json中scripts定义的dev: next dev。启动后在浏览器打开http://localhost:3000即可看到书店页面左侧是书籍详情封面、作者、ISBN、出版社、价格右侧是评论提交表单与实时评论列表。此外package.json还提供了生产构建与启动命令npm run build # next build产物输出到 .next/ npm run start # next start以生产模式启动 npm run lint # next lint检查代码规范项目结构与源码解析原文档给出了前端目录的功能划分结合仓库实际文件各目录职责如下目录 / 文件职责app/Next.js App Router 的应用根layout.tsx定义全局布局与元信息page.tsx是首页入口globals.css引入 Tailwind 与全局字体client/页面与组件层内部再分pages/与components/public/images/静态图片资源书籍封面、头像、favicon、Knative logonext.config.mjs、package.json、postcss.config.js、tailwind.config.ts、tsconfig.jsonNext.js、Tailwind CSS、TypeScript 的工程配置页面入口与布局app/layout.tsx引入Inter字体设置站点标题Knative Bookstore、描述Bookstore Sample Application from Knative与 favicon并声明suppressHydrationWarning以配合主题切换。app/page.tsx客户端组件用ThemeProvider来自next-themesattributeclass包裹主页面组件Main。app/globals.css声明tailwind base/components/utilities三段式指令并从 Google Fonts 引入 Poppins 字体作为全局body字体。组件树client/pages/Main.js 是页面主体内部组合了以下组件Header展示 Knative 书店 Logo 与标题并挂载主题切换按钮BookDetail渲染书籍信息封面图、标题、作者、ISBN、出版社、出版日期、描述、价格示例书目数据直接在Main.js中以对象形式定义CommentForm评论提交表单同时展示“事件驱动处理进度条”CommentList通过 WebSocket 订阅评论并渲染列表顶部带有StatusBadge状态徽章Connecting / Connected to node server / Service UnavailableCommentDisplay单条评论展示头像、时间、正文、情感 emoji、预留的删除按钮Toggle/Emoji明暗主题切换与带无障碍标签的 emoji 组件。主题切换的实现位于 client/components/Toggle.js它读取系统prefers-color-scheme偏好作为初始主题点击按钮在dark与light间切换tailwind.config.ts 中对应配置了darkMode: class并将 Poppins 设置为sans字体族。前端如何接入事件驱动链路这是本示例最值得深入的部分前端并不直接调用数据库而是把用户动作转成 CloudEvent并实时接收处理后的事件结果。后端代理路由/backend/[slug]app/backend/[slug]/route.ts 是一个动态路由把前端的 HTTP 请求与 WebSocket 连接统一代理到后端的node-server-svcGET / POST / PUT / DELETE通过proxyRequest将请求转发至后端地址默认值为http://node-server-svc.${process.env.POD_NAMESPACE}.svc.cluster.local/${slug}。其中POD_NAMESPACE来自部署时注入的环境变量见下文也可用环境变量BACKEND_URL覆盖转发时会重写host头并透传原始请求体。UPGRADE处理 WebSocket 升级将前端客户端的/backend/comments连接透明转发到ws://node-server-svc.${process.env.POD_NAMESPACE}.svc.cluster.local/comments可用BACKEND_WS_URL覆盖双向转发消息并在任一侧断开时做对应清理。提交评论 发送 CloudEventclient/components/CommentForm.js 在提交评论时向http://${window.location.host}/backend/add发起 POST请求头携带标准 CloudEvents 字段Ce-Type: new-review-comment Ce-Specversion: 1.0 Ce-Source: commentForm Ce-Id: unique-comment-id Content-Type: application/json请求体为{ reviewText: 评论内容 }。对照后端 node-server/index.js 的/add处理逻辑服务端用HTTP.toEvent解析出 CloudEvent校验type new-review-comment后将其连同ce-specversion、ce-type、ce-source、ce-id等头部转发到K_SINK环境变量指向的 Knative Broker/insert路由则负责把处理完成的评论写入 PostgreSQL。前端界面上用StatusProgress组件逐条展示“评论已被包装为 CloudEvent → 以 HTTP POST 发给 Node 服务 → 转发到 Broker → 等待回执 → 处理完成”的完整事件流状态帮助学习者直观理解事件驱动架构的每个环节。实时刷新评论client/components/CommentList.js 建立ws://${window.location.host}/backend/comments的 WebSocket 连接收到服务端推送的 JSON 数组后按post_time渲染onopen/onclose/onerror分别把页面顶部状态徽章切到connected/connecting组件卸载时关闭连接。后端的/commentsWebSocket 端点会立即推送一次全量评论并每秒刷新一次见node-server/index.js中的setInterval(sendComments, 1000)。容器化Dockerfile 与 standalone 输出原文档的容器化章节以仓库内的 Dockerfile 为准采用多阶段构建构建阶段builder基于node:lts-alpine关闭遥测NEXT_TELEMETRY_DISABLED1先只拷贝package*.json并执行npm install以充分利用镜像层缓存再拷贝全部源码并执行npm run build运行阶段runner同样基于node:lts-alpine设置NODE_ENVproduction利用 Next.js 的output: standalone追踪产物该开关定义在 next.config.mjs 中只拷贝public、.next/standalone与.next/static显著缩小最终镜像体积端口与启动镜像EXPOSE 8080设置PORT8080最终以node server.js启动。注意应用对外端口是8080而非本地开发的 3000这与下文的 Kubernetes 部署端口保持一致。构建并运行容器原文档命令docker build -t frontend . docker run -d -p 3000:3000 frontend若需在容器内验证 Knative 集群环境可把宿主端口映射到 8080例如docker run -d -p 8080:8080 frontend。部署到 Kubernetes 集群前端在集群中的部署清单位于 config/100-front-end-deployment.yaml包含两个对象Deploymentbookstore-frontend镜像ghcr.io/knative/bookstore-frontend:latest容器端口containerPort: 8080与 Dockerfile 的EXPOSE 8080对应环境变量POD_NAMESPACE通过fieldRef从metadata.namespace注入供/backend/[slug]路由拼接node-server-svc.${POD_NAMESPACE}.svc.cluster.local集群内 DNS 地址时使用。Servicebookstore-frontend-svc端口80 → targetPort 8080selector匹配app: bookstore-frontendtype: LoadBalancer对外暴露访问入口。应用清单kubectl apply -f code-samples/eventing/bookstore-sample-app/start/frontend/config/100-front-end-deployment.yaml仓库还提供了自动化安装脚本 setup.sh它会依次安装 Knative Serving含 Kourier 入口网关并 patchconfig-network的ingress-class、安装 Knative Eventing含 in-memory channel 与 MT channel broker、等待相关命名空间 Pod 就绪、部署前端与后端并等待 LoadBalancer 获取到外部 IP 后输出访问地址。在 Kind 等本地集群中运行时需确保cloud-provider-kind等 LoadBalancer 提供方处于活动状态。调试与常见问题本地页面打不开确认 3000 端口未被占用npm run dev失败时先重新执行npm install注意prepare: next-ws patch会在安装阶段打 WebSocket 补丁若跳过将导致/backend的 UPGRADE 处理失效。状态徽章一直显示 Connecting / Service Unavailable检查node-server-svc是否已创建且同命名空间可达并确认代理路由读取的POD_NAMESPACE是否正确注入对应 100-front-end-deployment.yaml 中的fieldRef配置。评论提交后无响应按StatusProgress的进度条逐环节排查——CloudEvent 头Ce-Type: new-review-comment等是否完整、node-server 的/add是否正确转发到 Broker依赖K_SINK注入、Broker 与 Sequence 的 Trigger 是否就绪。容器端口不匹配镜像默认监听 8080若使用docker run -p 3000:3000需确认应用确实以PORT8080启动并映射为宿主机 3000 端口否则可改用-p 8080:8080。进一步探索完整实现版前端位于 solution/frontend/可对照start目录比较差异整条事件链的其他组件见 solution/README.mddb-service、node-server、sequence、slack-sink 等后端事件处理与数据库写入细节可阅读 node-server/index.js 及 node-server 部署清单。通过本文你已完整掌握 Knative Bookstore 前端工程从本地开发到集群部署的全流程并理解了它如何以 CloudEvent WebSocket 的方式成为事件驱动架构中的数据入口与实时展示层。赞分享文档教程云原生【免费下载链接】docsUser documentation for Knative components.项目地址https://gitcode.com/gh_mirrors/docs1/docs点击查看免费下载相关推荐Knative Bookstore 前端指南Next.js 书城应用的本地开发、Docker 容器化与集群部署Knative Bookstore 前端指南Next.js 书城应用的本地开发、Docker 容器化与集群部署 本指南围绕 Knative 官方端到端示例应用文档教程云原生Knative Bookstore 示例应用全解基于 Knative Eventing 的端到端事件驱动书店系统Knative Bookstore 示例应用全解基于 Knative Eventing 的端到端事件驱动书店系统 本篇文章基于 Knative 官方文档仓库中文档教程云原生Knative Bookstore 示例应用基于 Knative Eventing 的事件驱动架构端到端实践Knative Bookstore 示例应用基于 Knative Eventing 的事件驱动架构端到端实践 导读 code samples/eventing文档教程云原生上一篇AAS Deep Context Builder 深度解析面向安全审计的 Ultra-Granular 纯上下文构建方法论下一篇用 ax-extract-workflow 重构 Coding-Agent 产物从 commit 到完整工作流回溯创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考