暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

使用 Docker 桌面扩展简化 NGINX 配置

原创 刺史武都 2025-08-20
174

现代应用程序开发人员面临着管理依赖项、确保环境一致性以及扩展应用程序的挑战。Docker Desktop 通过直观的容器化简化了这些任务,提供可靠的环境、轻松的部署和可扩展的架构。容器中的 NGINX 服务器管理提供了增强功能的机会,NGINX 开发中心通过用户友好的工具来优化配置、性能和 Web 服务器管理。

提高工作流程效率的机会

Docker Desktop 简化了容器工作流程,但可以使用 NGINX 开发中心进一步改进 NGINX 配置:

  • 更轻松的配置:NGINX 的设置通常需要命令行方面的专业知识。NGINX 开发中心提供了直观的界面,可简化设置过程。
  • 简化的多服务器管理:管理多个配置涉及复杂的卷挂载。NGINX 开发中心可集中并简化配置处理。
  • 改进的调试功能:调试需要手动访问日志并检查容器。NGINX 开发中心提供清晰的诊断工具,以便更快地解决问题。
  • 更快迭代:反向代理更新需要频繁重启。NGINX 开发中心支持快速配置更改,最大程度减少停机时间。

通过将 Docker Desktop 的无缝容器化与 NGINX 开发中心的工具相结合,开发人员可以为现代应用程序实现更高效的工作流程。

App/Web 服务器开发的优势

NGINX 开发中心通过集成到 Docker Desktop 的直观 GUI 界面,增强了应用和 Web 服务器的开发,简化了服务器配置文件的管理,无需命令行专业知识。它简化了运行时配置预览的访问,最大限度地减少了手动容器检查,并实现了快速迭代,无需重启容器,从而缩短了开发和测试周期。

集中式配置管理可确保开发、测试和生产环境的一致性。该扩展与 Docker Desktop 无缝集成,降低了传统 NGINX 工作流程的复杂性,使开发人员能够专注于应用程序开发,而不是基础设施管理。

NGINX 开发中心概述

NGINX 开发中心由 Timo Stark 开发,旨在提升开发者在容器化环境中配置 NGINX 服务器的体验。该扩展现已在 Docker Extensions Marketplace 上线,利用 Docker Desktop 的可扩展性,提供专用的 NGINX 开发中心。主要功能包括:

图形配置界面
image.png
用于创建和编辑 NGINX 服务器块、路由规则和 SSL 配置的用户友好型 UI。

运行时配置更新
image.png
无需重启容器即可将变更应用到 NGINX 实例,支持快速迭代。

集成调试工具
image.png
直接在 Docker Desktop 中验证配置并解决问题。

NGINX 开发中心如何工作?

NGINX 开发中心 Docker 扩展基于NGINX Docker Desktop 扩展公共仓库,简化了 Docker Desktop 中 NGINX 的配置和管理。它以容器化应用程序的形式运行,具有基于 React 的用户界面和 Node.js 后端,并通过扩展市场和 Docker API 集成到 Docker Desktop 中。

简单来说,它的工作原理如下:

  • 安装和设置:该扩展可以从 Docker Extensions Marketplace 安装,也可以使用 Dockerfile 在本地构建,Dockerfile 会编译 UI 和后端组件。它作为 Docker Desktop 中的容器运行,并拉取镜像 nginx/nginx-docker-extension:latest。
  • 用户界面:基于 React 的 UI,可通过 Docker Desktop 中的 NGINX 开发中心选项卡访问,允许开发人员创建和编辑 NGINX 配置,例如服务器块、路由规则和 SSL 设置。
  • 配置管理:Node.js 后端处理来自 UI 的用户输入,生成 NGINX 配置文件,并将其应用到托管的 NGINX 容器。更改使用 NGINX 的重新加载机制动态部署,避免容器重启。
  • 与 Docker 集成:该扩展与 Docker Desktop 的 API 通信以管理 NGINX 容器,并使用 Docker 卷来存储配置文件和日志,确保与 Docker 生态系统无缝交互。
  • 调试支持:虽然它不提供直接日志访问,但该扩展通过实时验证配置并利用 Docker Desktop 的本机工具进行间接日志查看来支持调试。

该扩展程序的后端采用 Node.js 构建,负责生成配置和管理 NGINX 实例,而基于 React 的前端则提供了直观的用户体验。在开发方面,该扩展程序支持热加载,允许开发人员无需重建镜像即可测试更改。

架构图

下面是一个简化的架构图,说明了 NGINX 开发中心如何与 Docker Desktop 集成:
image.png

NGINX 开发中心架构展示了与 Docker Desktop 的集成,具有 Node.js 后端和 React UI,用于管理 NGINX 容器和配置文件。

  • Docker Desktop:托管扩展并提供对 Docker API 和扩展市场的访问。
  • NGINX 开发中心:作为容器运行,具有用于配置管理的 Node.js 后端和用于用户交互的 React UI。
  • NGINX 容器:托管的 NGINX 实例,由扩展动态配置。
  • 配置文件:由扩展生成和监控,存储在 Docker 卷中以实现持久性。

为什么要将 NGINX 配置管理作为 Docker 桌面扩展来运行?

将 NGINX 配置管理作为 Docker Desktop Extension 运行,为已经在 Docker 生态系统中工作的开发者提供统一、流畅的体验。通过直接集成到 Docker Desktop 界面,该扩展消除了在多个工具和命令行界面之间切换的麻烦,使开发者能够在一个熟悉的环境中管理 NGINX 配置及其容器化应用程序。

扩展方法充分利用了 Docker 固有的隔离性和一致性优势,确保 NGINX 配置管理能够在不同的开发机器和操作系统之间可靠运行。这种容器化方法可以避免与本地系统配置发生冲突,并消除了安装和维护单独的 NGINX 管理工具的复杂性。

此外,Docker Desktop 是 NGINX 开发中心的唯一先决条件。安装 Docker Desktop 后,开发人员可以立即访问复杂的 NGINX 配置功能,无需额外安装软件、设置复杂的环境或具备专业的 NGINX 专业知识。该扩展将传统上需要熟练掌握命令行的操作转变为直观的图形化工作流程,并与现有的基于 Docker 的开发实践无缝集成。

入门

按照以下步骤设置和使用 Docker 扩展:NGINX 开发中心

先决条件:Docker Desktop,1 个正在运行的 NGINX 容器。

Docker Desktop 中的 NGINX 开发中心设置

确保 Docker Desktop 已安装并正在您的机器(Windows、macOS 或 Linux)上运行。

安装 NGINX 开发中心

  • 打开 Docker Desktop 并导航到扩展市场(左侧菜单)。
  • 搜索“NGINX”或“NGINX开发中心”。
  • 点击“安装”来拉取并安装 NGINX 开发中心镜像

访问 NGINX 开发中心:

  • 安装后,Docker Desktop 左侧菜单中会出现一个新的“NGINX”选项卡。
  • 单击选项卡打开 NGINX 开发中心,您可以在其中管理配置和监控 NGINX 实例。

image.png

image.png
使用 NGINX 开发中心进行配置管理:

  • 使用 GUI 配置编辑器创建新的 NGINX 配置文件。
  • 配置现有的 nginx 配置文件。
  • 在应用配置之前预览并验证配置。
  • 保存更改,这些更改通过热重载动态应用,无需重新启动 NGINX 容器。

实际用例示例:本地服务的开发代理

在现代应用程序开发中,NGINX 充当反向代理,对全栈或微服务项目的开发者非常有用。它管理组件之间的流量路由,缓解基于浏览器的测试中的 CORS 问题,支持安全的本地 HTTPS 设置,并通过允许多个服务共享单个入口点而无需直接暴露端口来支持高效的工作流程。这有助于在本地环境中模拟生产设置、测试 API 集成或处理 WebSocket 等实时功能,同时避免手动重启和复杂的配置。NGINX 可以代理各种本地服务,包括前端框架(例如 React 或 Angular 应用)、后端 API(例如 Node.js/Express 服务器)、带有 Web 界面的数据库(例如 phpMyAdmin)、静态文件服务器或第三方工具(例如模拟服务和缓存层)。

开发人员通常需要本地代理来路由服务之间的流量(例如,端口 3000 上的前端和后端 API)并避免 CORS 问题,但手动 NGINX 设置需要文件编辑和重新启动。

使用 Docker 扩展:NGINX 开发中心

  • 设置:通过 Docker Desktop 中的 Docker Extensions Marketplace 安装 NGINX 开发中心。确保本地服务(例如,端口 3000 上的 Node.js 后端)在单独的容器中运行。打开“NGINX 开发中心”选项卡。

image.png

容器单独运行。

配置:在 UI 中创建一个新服务器。将上游设置为本地服务器。将 /api/* 的代理添加到 http://backend:3000。通过图形选项发布。

image.png
通过 Docker Desktop UI 编辑服务器配置

image.png
应用服务器配置

  • 验证和测试:在 NGINX 开发中心 UI 中预览配置以检查是否存在错误。通过在浏览器中访问 http://localhost/ 和 http://localhost/api 进行测试;确认路由到后端。
  • 部署:动态保存并应用更改(无需重启)。导出配置以便在 Docker Compose 文件中重复使用,从而编排服务。

此用例利用 NGINX 开发中心的 React UI 进行代理配置,使用 Node.js 后端生成配置,并利用 Docker API 实现无缝网络连接。立即安装扩展程序并探索 NGINX 开发中心,尝试设置您自己的本地代理。

原文地址:https://www.docker.com/blog/streamline-nginx-configuration-with-docker-desktop-extension/
原文作者:Dylen Turnbull、Timo Stark

「喜欢这篇文章,您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容,转载时必须标注文章的来源(墨天轮),文章链接,文章作者等基本信息,否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容,欢迎发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论