Nginx UI 开发环境搭建:基于 Devcontainer 的一键容器化开发与多节点集群调试指南
后端前端运维MCP 服务【免费下载链接】nginx-uiYet another WebUI for Nginx项目地址https://gitcode.com/gh_mirrors/ngi/nginx-ui点击查看免费下载导读本文基于 Nginx UI 仓库的 docs/guide/devcontainer.md 与 .devcontainer 目录下的真实配置完整讲解如何通过 Visual Studio Code或 Cursor的 Dev Containers 能力在 Docker 中一键拉起 Nginx UI 的完整开发环境。你将掌握从打开容器、启动全部服务到使用内置的 ACME 测试服务器Pebble、Casdoor 认证、多节点集群联调的整套实操方法为后续开发前端、后端或参与 Cluster 功能贡献代码提供可直接落地的环境基线。为什么 Nginx UI 需要专门的开发容器Nginx UI 是一个前后端一体的 Web 管理界面后端为 Go 语言API 服务前端为 Vue 3 Vite 的 Web 应用同时还深度依赖 nginx 本身以及证书签发ACME、DNS、集群同步等外围组件。在本机直接开发时需要同时满足 Go 工具链、Node.js/Bun 运行时、nginx 及其大量扩展模块、Pebble 测试 CA、Casdoor 单点登录服务等多项依赖环境搭建成本高且容易互相污染。为此仓库在根目录提供了完整的 Devcontainer 定义.devcontainer/devcontainer.json、.devcontainer/docker-compose.yml、.devcontainer/Dockerfile把上述所有依赖封装进一个可复现的容器编排中。开发者只需本机装有 Docker、VSCode或 Cursor与 Git即可获得与 CI 一致、可随时销毁重建的开发环境。从 devcontainer.json 可以看到容器内置的关键运行时common-utils含 Oh My ZshNode.js用于前端工具链Bun1.3.14Nginx UI 前端包管理与构建脚本统一使用 Bun见 app/package.json 中的bun test、bun ci等脚本。后端 Go 工具链则在 .devcontainer/Dockerfile 中通过golang.org/dl/?modejson自动获取最新稳定版 Go 并按amd64/arm64架构下载安装同时设置了PATH包含 Go 与go install二进制目录并显式声明NGINX_UI_WORKING_DIR/var/run/作为运行工作目录。环境前提与初始化步骤1. 前置要求依赖用途Docker提供容器运行时与 Compose 编排能力VSCode或 Cursor承载 Dev Containers 扩展的 IDEGit克隆仓库、容器内提交代码与签名2. 一键启动开发容器按 docs/guide/devcontainer.md 的步骤操作打开 VSCode或 Cursor命令面板MacCmdShiftPWindowsCtrlShiftP搜索并点击Dev Containers: Rebuild and Reopen in Container等待容器构建并启动完成再次打开命令面板选择Tasks: Run Task→Start all services等待所有服务就绪容器启动过程由 devcontainer.json 中的postStartCommand触发 .devcontainer/start.sh该脚本会自动完成为 Git 配置 SSH 签名gpg.format sshcommit.gpgsign true便于在容器内直接以 SSH key 提交安装热重载工具airgo install github.com/air-verse/airlatest安装并启用zsh-autosuggestions插件调用 .devcontainer/init-nginx.sh 初始化 nginx 配置目录执行bun ci安装前端 workspace 依赖。此外 devcontainer.json 会把宿主机的~/.ssh以 bind mount 方式挂载进容器/root/.ssh保证容器内可以直接复用宿主机 SSH 密钥remoteUser为root方便在容器内执行系统级操作。3. nginx 初始化与扩展模块.devcontainer/init-nginx.sh 承担 nginx 环境的初始化首次启动时把镜像内保存的原始配置/etc/nginx.orig见 .devcontainer/Dockerfile 的cp -rp /etc/nginx /etc/nginx.orig复制到挂载卷/etc/nginx避免宿主数据目录为空导致 nginx 无法启动遍历modules-available中的 20 余个扩展模块配置按权重10/50/70在modules-enabled下创建符号链接涵盖mod-http-ndk、mod-http-lua、mod-http-geoip2、mod-stream、mod-mail、mod-nchan等为 Nginx UI 的站点/流/日志分析等功能提供完整的模块能力最后直接前台启动nginx。这套设计使容器内 nginx 尽可能接近生产发行版的能力集合避免开发时遇到“本地可以、容器不行”的模块缺失问题。端口与服务拓扑端口映射端口服务3002App前端 Web 应用3003Documentation文档站点9000API Backend后端 API其中前端开发服务器端口在 app/vite.config.ts 中定义默认监听3002并将/api请求含 WebSocket代理到后端地址默认http://localhost:9001可通过环境变量VITE_PROXY_TARGET覆盖同时保持浏览器 Origin 头以保证 WebSocket 鉴权在前后端端口不同时仍能正常工作。因此开发时前端访问3002、后端调试可关注对应代理目标端口。容器编排中的服务docs/guide/devcontainer.md 列出的核心服务对应 .devcontainer/docker-compose.yml 中的编排定义服务说明nginx-ui主开发节点挂载工作区与 Docker Socket由 .devcontainer/start.sh 完成初始化nginx-ui-2第二节点用于多节点集群联调casdoor基于casbin/casdoor-all-in-one镜像的单点登录服务映射8001:8000供 OIDC/Casdoor 登录流程调试challtestsrvPebble 配套的 ACME challenge DNS/HTTP 测试服务器管理接口映射8055:8055pebbleLets Encrypt 的 ACME 测试服务器ghcr.io/letsencrypt/pebble:latest提供 HTTPS ACME API14000与 Management API15000用于证书签发的端到端测试主节点通过环境变量NGINX_UI_CERT_CA_DIRhttps://pebble:14000/dir见 .devcontainer/docker-compose.yml把 Nginx UI 的证书签发 CA 指向容器内的 Pebble 测试实例配合PEBBLE_VA_NOSLEEP1、PEBBLE_VA_ALWAYS_VALID1等环境变量.devcontainer/docker-compose.yml可以在毫秒级完成证书签发测试而无需等待真实 CA 校验。Pebble 的测试证书与配置位于 .devcontainer/pebble-test 目录含pebble-config.json、pebble-config-external-account-bindings.json及本地 CA 证书。主节点还设置了NGINX_UI_DEV_SECURE_SESSION_MINUTES1440该变量对应后端 internal/user/secure_session_dev.go 中的SecureSessionDurationEnv用于在开发模式下延长安全会话有效期避免频繁登录打断调试。多节点集群开发Nginx UI 支持以 Cluster 模式管理多台主机的 nginx。Devcontainer 已为此内置了nginx-ui-2以及编排文件中的nginx-ui-3节点实现“一个 Compose 内模拟多主机”的联调环境。按 docs/guide/devcontainer.md 的说明在主节点中添加以下环境信息即可把第二节点纳入集群name: nginx-ui-2 url: http://nginx-ui-2 token: nginx-ui-2三个字段分别对应节点名称、节点在 Compose 网络内的访问地址nginx-ui自定义网络见 .devcontainer/docker-compose.yml以及节点鉴权 token。保存后即可在主节点的节点管理页面看到并连接nginx-ui-2。从节点的自动重载机制与主节点不同nginx-ui-2/nginx-ui-3等从节点运行的是 .devcontainer/node-supervisor.sh这是一个基于inotifywait的自研“热重载监督器”等待/workspaces/nginx-ui/tmp/mainGo 编译产物出现将可执行文件复制到/usr/local/bin/nginx-ui并以-config /etc/nginx-ui/app.ini启动持续监听tmp目录的close_write/moved_to/create/delete事件兼容原子保存产生的*-tmp-umask中间文件对编译产物做“可执行文件”稳定性校验最多重试 5 次确认有效后复制、杀掉旧进程并重启新进程。这意味着从节点可以随主节点代码改动自动更新二进制并重启无需手动进入每个容器操作多节点集群调试与单机开发几乎同样流畅。该机制与仓库内 Cluster 同步、节点鉴权等能力对应 internal/clustersync 与 internal/nodeauth 等目录配合覆盖从“开发环境自举”到“配置下发”的完整链路。开发过程中的常用验证路径前端修改app/src下代码后Vite HMR 会自动生效浏览器访问3002即可看到实时效果bun test、bun run typecheck、bun run lint分别对应测试、类型检查与代码规范校验见 app/package.json。后端air负责 Go 代码热重载主节点后端变更会即时重建从节点由node-supervisor.sh监听tmp/main自动滚动更新。证书签发在证书管理页面申请证书时签发请求会打到容器内 Pebblehttps://pebble:14000/dir由于PEBBLE_VA_ALWAYS_VALID1校验结果恒为有效可反复验证签发/续期流程而不污染真实 CA 配额。单点登录通过casdoor服务映射8001验证 OIDC/Casdoor 登录集成。常见问题与排查要点首次启动较慢容器需要拉取 Ubuntu base 镜像、下载 Go 最新稳定版并执行bun ci属正常现象依赖已通过go-modules命名卷.devcontainer/docker-compose.yml与工作区缓存复用重建后明显加快。端口冲突3002/3003/9000/14000/15000/8001/8055等端口若与本机服务冲突可调整 .devcontainer/docker-compose.yml 中的ports映射后重新Rebuild and Reopen in Container。nginx 配置目录为空删除本地data/nginx数据目录后重建init-nginx.sh 会从/etc/nginx.orig重新初始化。SSH 无法提交确认宿主机~/.ssh存在且包含id_ed25519.pubstart.sh 中的 Git 签名配置依赖该公钥。结语通过 .devcontainer 提供的容器化方案Nginx UI 把“Go Vue Bun nginx Pebble Casdoor 多节点”这一复杂开发矩阵收敛为两次命令面板操作。无论你是初次接触该项目的新贡献者还是需要验证集群同步、ACME 签发等深层能力的资深开发者都可以基于本文所述的环境基线快速进入开发状态并把精力集中在 app/src前端与 internal后端的实际业务代码上。赞分享后端前端运维MCP 服务【免费下载链接】nginx-uiYet another WebUI for Nginx项目地址https://gitcode.com/gh_mirrors/ngi/nginx-ui点击查看免费下载相关推荐nginx-ui 开发容器Devcontainer完整指南一键搭建多节点 Nginx 开发环境nginx ui 开发容器Devcontainer完整指南一键搭建多节点 Nginx 开发环境 导读 本文围绕 nginx ui 官方提供的开发容器De后端前端运维MCP 服务amis InputTimeRange 时间范围控件配置、值格式与字段拆分的完整指南amis InputTimeRange 时间范围控件配置、值格式与字段拆分的完整指南 本文围绕 amis 低代码框架中的 input time range 表后端前端运维MCP 服务darktable 容器化开发环境搭建指南基于 .devcontainer 镜像 CI 同源编译、调试与 AppImage 测试darktable 容器化开发环境搭建指南基于 .devcontainer 镜像 CI 同源编译、调试与 AppImage 测试 本指南以 .devconta桌面应用图像处理创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关新闻

西南交大计算机网络2019期末卷:3学分考点拆解与复习指南

西南交大计算机网络2019期末卷:3学分考点拆解与复习指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 3:03:18 阅读更多 →
国产MCU替代STM32实战:选型、硬件设计与软件迁移全解析

国产MCU替代STM32实战:选型、硬件设计与软件迁移全解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 3:03:17 阅读更多 →
GLM 5.3 Batch 模式高效应用指南

GLM 5.3 Batch 模式高效应用指南

在处理海量数据时,很多开发者最先遇到的瓶颈往往不是算法不够先进,而是工程架构无法支撑高并发下的吞吐量。想象一下,当你需要清洗百万级的用户评论、将成千上万份技术文档翻译成多国语言,或者为智能客服构建覆盖全业务线的知识库…

2026/9/24 3:03:17 阅读更多 →

最新新闻

AI陪伴机器人单文件H5宣传站-一个人怎么写出项目官网

AI陪伴机器人单文件H5宣传站-一个人怎么写出项目官网

11-单文件H5宣传站-一个人怎么写出项目官网系列:AI 伙伴(AI-Partner)——具身智能陪伴机器人 数据接口部署与二次开发篇(11/12)一、先抛问题:项目官网到底需要多重 AI 伙伴(AI-Partner&#xf…

2026/9/24 3:43:42 阅读更多 →
使用 Meshery 构建 NGINX Init Container 与 VHost 多域名托管的弹性设计模式

使用 Meshery 构建 NGINX Init Container 与 VHost 多域名托管的弹性设计模式

云原生微服务运维DevOps 【免费下载链接】meshery Meshery, the cloud native manager 项目地址: https://gitcode.com/GitHub_Trending/me/meshery 点击查看 免费下载 本指南围绕 Meshery Catalog 中一份标记为 resiliency(弹性)类型的 NGI…

2026/9/24 3:42:42 阅读更多 →
RQAlpha事件驱动回测:A股T+1与涨跌停规则实战解析

RQAlpha事件驱动回测:A股T+1与涨跌停规则实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 3:42:42 阅读更多 →
EMC四大测试的本质是能量路径物理建模

EMC四大测试的本质是能量路径物理建模

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 3:42:42 阅读更多 →
STM32简介:从芯片参数到硬件调度系统的工程启蒙

STM32简介:从芯片参数到硬件调度系统的工程启蒙

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 3:41:42 阅读更多 →
ESP32-P4 Rev 3.0电源优化实战:从供电架构到低功耗调优

ESP32-P4 Rev 3.0电源优化实战:从供电架构到低功耗调优

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 3:40:41 阅读更多 →

日新闻

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为…

2026/9/24 0:00:19 阅读更多 →
单细胞注释实战:基于Scanpy的标记基因与参考映射流程解析

单细胞注释实战:基于Scanpy的标记基因与参考映射流程解析

简介:一份基于单细胞RNA测序数据的细胞类型注释算法研究Python毕业设计源码,针对计算机相关专业正在做毕设或需要项目实战的学习者,可用于课程设计与期末大作业。项目代码完整、经导师指导评审通过,可直接运行,覆盖数据…

2026/9/24 0:00:19 阅读更多 →
C#源生成器实战:用增量生成器替代反射,告别AOT崩溃

C#源生成器实战:用增量生成器替代反射,告别AOT崩溃

第一次在项目里被反射卡住,是在一个老旧的WinForms模块里:几十个类依赖PropertyChanged通知,运行时反射读属性、发通知,每次启动慢半拍不说,一上.NET Native/AOT裁剪模式几乎全面崩盘。后来我把这段逻辑全部改成C#源生…

2026/9/24 0:00:19 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事:用Flutter给OpenHarmony做一款游戏集合类的App,说白了就是把若干小游戏塞进一个壳里,用统一入口分发。这个方向本身不算新鲜,真正让我花了不少心思的,是首页那堆游戏卡…

2026/9/23 4:55:02 阅读更多 →
Word表格编号全攻略:从列表编号到题注交叉引用

Word表格编号全攻略:从列表编号到题注交叉引用

写Word文档,最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事:今天在表后面多加了两个空白行,明天给客户交稿前发现整个章节的编号全部错位,光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/23 4:49:06 阅读更多 →
从第一个站到第二个站:独立开发者的静态网站选型与落地实践

从第一个站到第二个站:独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年,说实话,第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年,流量惨淡、功能臃肿、代码自己都懒得看第二遍之后,我才慢慢琢磨明白一个道理:第一个网站是练手&…

2026/9/23 9:53:41 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能分类:[AI/大模型]细分主题:AI 增强型 CI/CD 流水线自动化与 GitOps 实践:Agent 工作流、工具调用与任务拆解:从原型到生产的验收清单很多团队在尝试用大…

2026/9/23 9:53:40 阅读更多 →
容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场分类:[工程技术]细分主题:Kubernetes 生产环境运维与排障实战:可复制的项目复盘模板与决策记录大部分团队的事故复盘报告,最后都变成了躺在 Confluence 或钉…

2026/9/23 9:53:40 阅读更多 →
容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步分类:[工程技术]细分主题:Docker 容器化技术与镜像安全管理:核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用(包含 Web 接口、后台…

2026/9/23 9:53:40 阅读更多 →