CI/CDDevOps【免费下载链接】woodpeckerWoodpecker is a simple, yet powerful CI/CD engine with great extensibility.项目地址https://gitcode.com/gh_mirrors/wo/woodpecker点击查看免费下载本篇技术指南以 Woodpecker 官方开发文档为骨架系统讲解 Woodpecker 前端web/目录的开发环境搭建、dev-proxy 热更新调试机制、远程服务器联调、技术栈约定与国际化翻译流程。读完本文你将掌握从pnpm install到基于WOODPECKER_DEV_WWW_PROXY免重启调试 UI、再到通过VITE_DEV_PROXY对接真实服务器数据源的完整实战方案并理解 UI 与 Go 后端通过 REST API 协作的底层原理。概览Woodpecker UI 的技术形态Woodpecker 的 UI 是位于仓库web/目录下的一套Vue 3 单页应用SPA通过调用 Woodpecker REST API 与后端交互。它与 Go 编写的 server、agent 等组件共存于同一仓库但使用完全独立的前端技术栈Vue 3采用 Composition APIsetup语法组件与视图分层组织Vite构建与开发服务器类似 Webpack 的下一代构建工具TypeScript全量类型检查lint 规则禁止使用any/unknownTailwind CSS原子化样式类名按 prettier tailwind 排序插件约定排序Vue I18n国际化与翻译Pinia状态管理见web/package.json依赖清单。生产构建路径pnpm build生成的静态资源最终通过 Go 的 go-embed 机制嵌入 Woodpecker server 二进制随服务一起分发。因此改完 UI 后如果走常规路线需要每次重新pnpm build并重启 server 才能看到效果——这正是下文 dev-proxy 机制要解决的问题。环境准备安装 Node.js 与 pnpm开发 UI 前需要安装 Node.jspackageManager: pnpm12.4.1, engines: { node: 20 }即要求Node.js ≥ 20pnpm 版本为 12.4.1pnpm 会根据packageManager字段自动切换对应版本。安装 pnpm 可参考 pnpm 官方安装指南。说明若同时要编译后端 Go 代码、运行 server 与 agent还需要安装 Go 与 GNU Make完整步骤见 开发环境准备Getting started。安装依赖进入 UI 目录并安装全部依赖cd web/ pnpm installweb/package.json中定义的核心脚本如下pnpm start即vitepnpm build为vite build --base/BASE_PATH命令作用pnpm start启动 Vite 开发服务器带热更新pnpm build构建生产产物用于 go-embed 集成pnpm lintESLint 检查--max-warnings 0零警告放行pnpm format/pnpm format:checkPrettier 格式化 / 校验pnpm typecheckvue-tsc --noEmit类型检查pnpm testVitest 单元测试推荐 IDE 配置官方推荐使用 VS Code并安装推荐插件组合以获得**自动格式化Prettier、lintESLint与类型检查Volar vue-tsc**的开箱体验。其中 Volar 负责.vue单文件组件的类型检查建议按照官方指南启用 Volar 的 take-over 模式以获得完整语言服务能力。核心调试机制dev-proxy 架构为什么需要 dev-proxy如果每次改动 UI 都要执行pnpm build并重启 Woodpecker server开发效率极低。为此 Woodpecker server 内置了一个dev-proxy开发代理它会把所有非 API 请求转发给一个独立的 HTTP 服务器而该服务器只负责托管 UI 文件。这样你可以在 Vite 开发服务器上以**热更新hot-reloading**的方式实时预览 UI 改动后端逻辑仍由真实的 Woodpecker server 处理。┌──────────────┐ /api/* ┌──────────────────┐ │ Browser │ ────────▶ │ Woodpecker server │ (REST API Go 逻辑) │ localhost:8000│ └──────────────────┘ └──────────────┘ │ │ 其余请求HTML/JS/CSS 等 ▼ ┌──────────────────┐ │ Vite dev server │ (热更新托管 web/ 源码) │ localhost:8010 │ └──────────────────┘dev-proxy 的底层实现位于 cmd/server/server.go当配置了www-proxy时server 不再加载 go-embed 的静态文件而是创建一个httputil.ReverseProxy把请求含X-Forwarded-Host、X-Origin-Host头反向代理到 Vite 开发服务器未配置时则回退到内嵌 Web 引擎web.New()对应 server/web/web.go。步骤一启动 UI 开发服务器cd web/ pnpm startVite 会监听127.0.0.1:8010端口并提供热更新。默认端口与监听地址定义在 web/vite.config.ts 的server段host: process.env.VITE_DEV_SERVER_HOST ?? 127.0.0.1、port: 8010若需在容器内运行可设置VITE_DEV_SERVER_HOST0.0.0.0。步骤二在 server 端开启 dev-proxy在项目根目录的.env文件中加入WOODPECKER_DEV_WWW_PROXYhttp://localhost:8010该环境变量对应 server 的隐藏命令行参数--www-proxy其定义见 cmd/server/flags.gocli.StringFlag{ Sources: cli.EnvVars(WOODPECKER_DEV_WWW_PROXY), Name: www-proxy, Usage: serve the website by using a proxy (used for development), Hidden: true, },.env文件会被 server 自动加载一个典型的本地开发配置可参考 开发环境准备文档其中包含了WOODPECKER_OPEN、WOODPECKER_ADMIN、forge 配置、agent 配置等并注释掉了默认不开启的WOODPECKER_DEV_WWW_PROXY。步骤三启动 server 并访问按照 调试 Woodpecker 一节启动 Woodpecker server例如 VS Code 中选择 Woodpecker CI 调试配置或直接go run ./cmd/server随后浏览器访问 http://localhost:8000 即可看到由 Vite 提供、支持热更新的 UI。提示当未配置VITE_DEV_PROXY时Vite 启动日志会打印三条引导信息见 web/vite.config.ts 的woodpeckerInfoPlugin1) 向.env添加WOODPECKER_DEV_WWW_PROXYhttp://localhost:80102) 启动 Woodpecker server3) 访问http://localhost:8000。这相当于内置的配置检查器。对接远程真实服务器VITE_DEV_PROXY 模式如果你的本地测试实例数据太简单希望直接在生产或类生产环境的真实 Woodpecker 服务器上预览 UI 改动可以运行VITE_DEV_PROXYhttps://ci.woodpecker-ci.org \ VITE_DEV_USER_SESS_COOKIE你的 user_sess cookie 值 \ pnpm start两个环境变量的作用VITE_DEV_PROXY远程 Woodpecker 服务器地址。此时 Vite 会把/api、/web-config.js与/authorize请求代理到该地址见 web/vite.config.ts浏览器里的 UI 操作将直接读写远程服务器数据VITE_DEV_USER_SESS_COOKIE浏览器中user_sesscookie 的值Vite 代理时会在请求头中携带cookie: user_sess该值从而以你的身份完成对远程 API 的认证代码中通过viteUserSessCookie注入请求头。配置完成后打开http://localhost:8010即可在本地浏览器中操作远程数据源非常适合验证复杂数据场景下的 UI 行为。注意web-config.js也由 Vite 代理到远程因此远程服务器的根路径rootPath等运行时配置会一并生效路由前缀处理逻辑可参考 web/src/router.ts。代码组织与开发约定Woodpecker UI 的代码组织遵循清晰的约定对应目录均已在仓库中就位可复用组件放在web/src/components/如各类通用按钮、表单、弹窗视图页面放在web/src/views/并且必须在 web/src/router.ts 中注册路由路由设计web/src/router.ts使用 Vue Router 的懒加载import(~/views/...)定义仓库页/repos、组织页/orgs/:orgId、管理页/admin、用户页/user等完整路由树并通过meta.authentication声明页面是否需要登录鉴权路由前缀由运行时配置rootPath决定组合式函数compositionsweb/src/compositions/存放可复用的逻辑如useAuthentication状态管理Pinia store 位于web/src/store/。各框架的编码约定Vue 3优先使用setup与 Composition APITailwind CSS能用 Tailwind 类就用 Tailwind 类如需新增自定义类则扩展 Tailwind 配置类名顺序遵循 prettier tailwind 排序插件TypeScript避免使用any与unknown——事实上 ESLint 规则会直接拦截这类写法ESLint仓库使用antfu/eslint-config等规则集见 web/package.json devDependencies并配置了intlify/eslint-plugin-vue-i18n校验 i18n 用法Volar vue-tsc负责.vue文件类型检查建议开启 take-over 模式。国际化与翻译Messages and TranslationsWoodpecker 使用Vue I18n作为翻译库vue-i18n依赖配合intlify/unplugin-vue-i18n的 Vite 插件在构建期打包 locale 文件见 web/vite.config.ts。翻译工作流的硬性约定所有新增翻译必须写入web/src/assets/locales/en.json英文源文件也是唯一允许在 PR 中提交翻译的文件英文源文件会被自动导入 WeblateWoodpecker 使用的社区翻译平台其他语言由社区基于英文源进行翻译不要在 PR 中提供英文以外的翻译——否则可能与 Weblate 正在进行的翻译产生 git 冲突当某语言文件已被社区翻译但尚未合入 main 分支时。仓库当前包含 29 个语言文件web/src/assets/locales/下从ar.json、en.json到zh-Hans.json、zh-Hant.jsonVite 会通过虚拟模块virtual:vue-i18n-supported-locales动态读取目录下的 locale 文件列表自动生成支持的语言清单。更多细节见 翻译Translations文档。代码质量与测试开发 UI 期间可以随时运行质量检查对应 Makefile 目标详见 开发环境准备文档# lint UI 代码 make lint-frontend # 运行 UI 测试Vitest make test-frontend在web/目录内也可以直接使用 pnpm 脚本pnpm lint # eslint --max-warnings 0 pnpm typecheck # vue-tsc --noEmit pnpm test # vitest pnpm format # prettier --write .Vitest 的配置已内置于 web/vite.config.tsglobals: true、environment: jsdomUI 组件测试可直接基于 jsdom 环境编写。小结一条完整的 UI 开发工作流综合以上内容Woodpecker UI 开发的标准工作流如下安装 Node.js ≥ 20 与 pnpm进入web/执行pnpm install在项目根.env中添加WOODPECKER_DEV_WWW_PROXYhttp://localhost:8010终端 A 运行pnpm start启动 Vite端口 8010热更新终端 B 启动 Woodpecker serverVS Code 调试或go run ./cmd/server浏览器访问http://localhost:8000享受热更新式 UI 开发如需真实数据改用VITE_DEV_PROXY远程地址 VITE_DEV_USER_SESS_COOKIEcookie pnpm start并访问http://localhost:8010提交前依次执行pnpm lint、pnpm typecheck、pnpm test、pnpm format新增界面文案只改web/src/assets/locales/en.json其余语言交给 Weblate 社区翻译。该流程的每一步都能在仓库源码中找到对应实现dev-proxy 的 Go 侧实现见 cmd/server/server.go 与 cmd/server/flags.goVite 侧代理与启动引导见 web/vite.config.ts脚本与依赖见 web/package.json路由与页面组织见 web/src/router.ts。按此流程你可以在不改动后端、不重新构建二进制的前提下高效迭代 Woodpecker 的整个前端界面。赞分享CI/CDDevOps【免费下载链接】woodpeckerWoodpecker is a simple, yet powerful CI/CD engine with great extensibility.项目地址https://gitcode.com/gh_mirrors/wo/woodpecker点击查看免费下载相关推荐ai-engineering-from-scratch 翻译工作流源码解析translate_lessons.py 与多语言分支如何免费运转ai engineering from scratch 翻译工作流源码解析translate_lessons.py 与多语言分支如何免费运转 本文带你解析开源CI/CDDevOpsMediaGo 前端工程解析基于 React 19 Vite 8 的跨端 UI 架构与开发指南MediaGo 前端工程解析基于 React 19 Vite 8 的跨端 UI 架构与开发指南 MediaGo 的前端由 apps/ui 这个 React音视频桌面应用后端Gatus Web 前端开发指南基于 Vue CLI 的仪表盘构建、调试与集成全流程Gatus Web 前端开发指南基于 Vue CLI 的仪表盘构建、调试与集成全流程 Gatus 是一个自动化、面向开发者developer oriente后端健康检查告警上一篇三步给 SRS 装上免费 HTTPSOryx 一键申请 Lets Encrypt 证书从此不用手动续期下一篇如何免费解锁Adobe全家桶3分钟掌握终极解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考