后端开发工具运维【免费下载链接】wettyTerminal in browser over http/https. (Ajaxterm/Anyterm alternative, but much better)项目地址https://gitcode.com/gh_mirrors/we/wetty点击查看免费下载本文是基于 docs/development.md 展开的源码级开发指南完整覆盖 WeTTYTerminal in browser over http/https从源码安装、构建到启动热重载开发服务器的全部步骤并结合 build.js、package.json、conf/config.json5 与 src/server/socketServer/socket.ts 等源码讲清每条命令背后实际发生了什么以及开发模式下allowedOrigins为何是绕不开的安全配置。读完本文你可以独立在本机从源码跑起一个可热重载的 WeTTY 开发环境并理解从开发到生产的行为差异。前置条件与工具链在开始前先确认本机环境满足以下要求依据 README.md 与 package.json 的engines字段依赖版本/说明Node.js 20.0.0package.json中engines.node明确声明pnpm仓库锁定packageManager: pnpm9.4.0pnpm-lock.yaml已提交应使用 pnpm 安装依赖make / python / build-essential编译原生模块如node-pty所需的系统构建工具第一步从源码安装 WeTTYWeTTY 既可以通过 npm 全局安装npm -g i wetty也可以从源码构建。从源码安装的完整流程如下来自 docs/development.md$ git clone https://github.com/butlerx/wetty.git $ cd wetty $ pnpm install $ pnpm build四步分别完成拉取源码、安装依赖pnpm 基于pnpm-lock.yaml解析、执行构建、产出可直接运行的build/产物。构建过程内部发生了什么pnpm build实际执行的是node build.js见 package.json 的scripts.build。打开 build.js 可以看到构建分客户端与服务端两条线客户端browser 平台使用 esbuild入口为src/client/wetty.ts与src/client/dev.ts产物输出到build/client打包为 ESM 并开启压缩非 watch 模式minify: true。同时挂载了三个插件typechecker每次构建开始前先执行pnpm tsc -p tsconfig.browser.json做浏览器侧 TypeScript 类型检查类型错误会以警告形式暴露sassPlugin编译src/assets/scss/下的 SCSS 样式copy把src/assets/xterm_config/、favicon.ico、manifest.json、sw.js、wetty.svg等静态资源复制进构建产物。服务端node 平台通过pnpm tsc -p tsconfig.node.json将src/下服务端 TypeScript 编译到build/。构建完成后build/main.js即为 WeTTY 的可执行入口package.json的bin字段build/server.js是库形式导出。构建产物被谁使用src/server/socketServer/shared/path.ts 通过findUpSync(package.json)定位仓库根目录再拼接build/目录作为静态资源根路径src/server/socketServer.ts 则把build/client以/client前缀对外提供静态服务。也就是说没有执行pnpm build服务端将无法提供前端页面——这正是开发模式下需要build --watch常驻后台的原因。第二步启动开发服务器pnpm dev执行pnpm dev即可进入开发模式WeTTY 随后会在http://localhost:3000提供服务docs/development.md。这个命令远不止启动一个进程。package.json中scripts.dev的定义为NODE_ENVdevelopment concurrently --kill-others --raw --success first \pnpm build --watch\ \nodemon -w build -i build/client -w conf/config.json5 --delay 200ms ./build/main.js -- --conf conf/config.json5\逐段拆解片段作用NODE_ENVdevelopment设置环境变量使 src/shared/env.ts 中的isDev判定为true进而影响日志级别、页面脚本加载等开发行为详见下文开发与生产的差异concurrently --kill-others --raw --success first并行运行两个子任务--kill-others表示任一任务退出就终止另一个--success first表示以第一个正常退出的任务结果作为整体退出码pnpm build --watch让 build.js 以--watch模式运行esbuild 调用buildCtx.watch()监听客户端源码变更tsc追加--watch --preserveWatchOutput监听服务端变更增量重编译nodemon -w build -i build/client -w conf/config.json5 --delay 200ms ./build/main.js -- --conf conf/config.json5监控build/目录排除build/client避免前端资源重编译也触发重启以及conf/config.json5配置文件一旦这些文件变化延迟 200ms 后自动重启服务端进程并以--conf conf/config.json5加载配置文件文件编辑 → 自动重启的完整链路你编辑src/下任一源码文件esbuild / tsc 的 watch 进程增量重建build/nodemon 侦测到build/变化重启./build/main.js浏览器刷新即可看到新版本。官方文档特别提醒docs/development.md每次重启WeTTY 中所有当前 SSH 会话都会被终止用户会被登出。这是进程级重启的必然结果——src/server/spawn.ts 中每个 PTY 都监听了 socket 的disconnect事件并调用term.kill()进程退出导致所有 WebSocket 断开会话随之消亡。因此在开发模式下请勿把重要工作放在 WeTTY 会话中此外src/client/dev.ts 会在页面加载时清空全部 Service Worker 缓存caches.keys().then(... caches.delete(...))确保开发阶段永远加载最新资源而不是被sw.js缓存住旧版本。开发模式下的默认配置开发服务器加载的正是仓库自带的 conf/config.json5JSON5 格式允许注释与尾逗号。其完整内容如下{ ssh: { host: localhost, auth: password, port: 22, knownHosts: /dev/null, allowRemoteHosts: false, allowRemoteCommand: false }, server: { base: /, port: 3000, host: 0.0.0.0, title: WeTTY - The Web Terminal Emulator, allowIframe: false, pingInterval: 3000, pingTimeout: 7000, allowedOrigins: [http://localhost:3000] }, forceSSH: false, command: login }对照 src/shared/defaults.ts 可以确认各字段的语义与默认值ssh.host/ssh.port默认 SSH 目标为localhost:22即开发环境直接连接本机 SSH 服务ssh.knownHosts: /dev/null配合 src/server/command/ssh.ts 中StrictHostKeyCheckingno使用跳过主机密钥校验仅适合本地开发server.port: 3000、server.host: 0.0.0.0监听所有网卡的 3000 端口server.pingInterval/server.pingTimeoutSocket.IO 心跳间隔 3000ms、超时 7000ms。源码 src/server/socketServer/socket.ts 中heartbeat()会对非法值做回退处理——socket.io 会把NaN或非正数变成 1ms 的定时器导致疯狂 ping 与断连因此坏输入会回退到默认值并打印警告forceSSH: false以 root 运行时允许走本机/bin/login登录流程详见下文验证开发环境command: login默认启动命令。此外defaults 中还支持通过环境变量覆盖各项默认值例如SSHHOST、SSHPORT、PORT、TITLE、ALLOWEDORIGINS、PINGINTERVAL、PINGTIMEOUT、FORCESSH、COMMAND等适合容器化部署场景。allowedOrigins开发环境绕不开的安全配置这是开发文档中着墨最多、也最容易踩坑的一点示例配置显式允许了http://localhost:3000如果你通过其他主机名或端口访问开发服务器必须更新server.allowedOrigins。生产部署必须显式配置浏览器侧来源origin监听地址和请求的 Host 头都不被信任docs/development.md。为什么必须配置在 src/server/socketServer/socket.ts 中originAllowlist()在allowedOrigins为空数组时会直接抛出异常if (origins.length 0) { throw new Error( Configure at least one allowed origin with --allowed-origin, ALLOWEDORIGINS, or server.allowedOrigins, ); }即 WeTTY 强制要求至少配置一个可信来源否则拒绝启动。每个配置项还会经过parseOrigin()校验只接受http://或https://开头的裸 origin不允许带路径、查询串、凭据或特殊字符非法的值同样会抛错。三种配置方式配置文件server.allowedOrigins数组开发示例即[http://localhost:3000]命令行参数--allowed-origin可重复传入多个见 src/main.ts 中 yargs 的array: true定义环境变量ALLOWEDORIGINS逗号分隔列表如ALLOWEDORIGINShttp://a.example.com,http://b.example.com。底层校验逻辑每个 Socket.IO 连接到达时allowRequest回调调用originAllowed()做决策src/server/socketServer/socket.ts带 Origin 头解析为规范 origin仅 scheme 主机 端口后与白名单集合比对命中才放行无 Origin 头浏览器同源轮询场景默认拒绝仅当请求为same-originsec-fetch-site头且请求Host与白名单中的主机完全一致时才放行以此防 DNS rebinding非浏览器客户端无 Origin 头的 CLI 工具可额外开启--allow-missing-origin或环境变量ALLOWMISSINGORIGINtrue放行。注意 origin 校验针对的是浏览器侧地址如果开发时通过http://127.0.0.1:3000访问而白名单里只有http://localhost:3000连接同样会被拒绝——请把实际访问所用的 scheme、主机名与端口逐一加入白名单。验证开发环境是否就绪启动pnpm dev后浏览器访问http://localhost:3000若以root运行且未开启--force-sshsrc/server/command.ts 的localhost()判定getuid() 0且目标为 localhost/0.0.0.0/127.0.0.1会走/bin/login流程让你在页面中直接输入用户名密码登录本机若以普通用户运行则默认通过ssh连接localhost如需强制走 SSH即使以 root 运行加--force-ssh若要连远程主机分别用--ssh-host、--ssh-port、--ssh-user指定目标README.md。页面脚本在开发模式下会有差异src/server/socketServer/html.ts 依据isDev决定注入的脚本开发模式额外加载dev.js即清缓存用的 src/client/dev.ts生产模式只加载wetty.js。运行测试与静态检查仓库还提供了完整的测试与质量门禁$ pnpm test # mocha 运行 src 下全部 *.spec.ts 测试 $ pnpm lint # eslint 检查 src例如 src/server/command/ssh.spec.ts 会验证sshOptions()生成的远程命令工作目录路径中的命令替换$(touch ...)被视为字面量而不会执行、shell 元字符被安全引用——这印证了 src/server/command/ssh.ts 中quoteShellArgument()对远程路径的转义处理。从开发模式到生产模式NODE_ENV在开发与生产之间扮演着决定性角色src/shared/env.ts具体差异包括行为开发NODE_ENVdevelopment生产NODE_ENVproduction日志级别debug默认值见 src/shared/defaults.tshttp日志格式彩色可读格式colorizesimple见 src/shared/logger.tsJSON 结构化输出页面脚本加载dev.jswetty.js仅wetty.js客户端构建未压缩、带 sourcemap、watch 模式压缩minify: true启动生产服务器使用$ pnpm start # 等价于 NODE_ENVproduction node ./build/main.js最后再次强调 docs/development.md 的生产部署要点必须显式配置面向浏览器的allowedOrigins如公网 HTTPS 域名而不是内部后端地址origin 从不包含 base path监听地址host与请求的Host头均不被视为可信依据。开发环境连本机 localhost 随意跑的宽松配置绝不能原样带到生产环境。小结从git clone到pnpm devWeTTY 的开发链路可以概括为pnpm 安装依赖 → esbuild/tsc 双线构建 → nodemon 热重载重启。理解 build.js 与 package.json 中的脚本编排你就能掌控改代码即生效背后的每一步而 conf/config.json5 与allowedOrigins则决定了开发服务器能否被浏览器正确连接——这是所有 WeTTY 二次开发者绕不开的第一课。赞分享后端开发工具运维【免费下载链接】wettyTerminal in browser over http/https. (Ajaxterm/Anyterm alternative, but much better)项目地址https://gitcode.com/gh_mirrors/we/wetty点击查看免费下载相关推荐RTXGI-DDGI未来展望实时全局光照技术发展趋势分析RTXGI DDGI未来展望实时全局光照技术发展趋势分析 RTXGI DDGI实时光线追踪全局光照作为NVIDIA推出的革命性渲染技术正在重新定义游戏和JupyterLab开发环境搭建从源码编译到热重载配置JupyterLab开发环境搭建从源码编译到热重载配置 你还在为JupyterLab源码编译耗时过长而烦恼还在为修改代码后需要重启服务才能看到效果而抓狂本前端后端数据科学开发工具Label Studio 开发环境搭建从源码编译到热重载配置Label Studio 开发环境搭建从源码编译到热重载配置 你是否在为数据标注工具的二次开发环境配置而烦恼本文将带你从零开始通过6个步骤完成Label数据标注人工智能上一篇V 语言 x.async 基准测试实战指南本地谨慎测量 Group / Task / Pool / 超时与周期任务下一篇WarcraftHelper终极指南5分钟解决魔兽争霸3所有兼容性问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考