Docker项目实践：部署docker-port-viewer监控容器端口
原创
Docker项目实践：部署docker-port-viewer监控容器端口
原创
一、docker-port-viewer介绍
1.1 docker-port-viewer简介
docker-port-viewer是一个现代化的网络应用程序，旨在帮助用户轻松查看和操作 Docker 容器的端口。它使用 TypeScript、React 和 Material-UI 构建，提供了一个直观、响应式的用户界面，方便开发者和系统管理员管理和访问他们的 Docker 容器。
1.2 docker-port-viewer主要特点
- 查看所有正在运行的 Docker 容器及其暴露的端口undefined实时展示所有运行中容器的基本信息与对外开放的端口。
- 按名称搜索容器undefined提供快速搜索功能，帮助您在众多容器中迅速定位目标。
- 按名称或创建日期排序容器undefined支持对容器列表进行排序，便于组织和浏览。
- 查看容器详细信息（名称、镜像、状态、启动时间、暴露端口等）undefined提供全面的容器元数据，方便监控和调试。
- 通过内嵌框架直接访问容器网页界面undefined无需离开应用即可在嵌入式 iframe 中预览容器提供的 Web 页面。
- 支持在新标签页中打开容器网页界面undefined提供快捷链接，在新窗口中打开容器服务页面，便于深入操作。
- 可自定义访问容器的主机名undefined允许用户配置自定义域名或 IP 地址来访问容器服务。
- 集成安全的 Docker 套接字代理undefined通过反向代理方式安全地连接 Docker 套接字，防止直接暴露敏感接口。
- 响应式设计，适配各种设备undefined基于 Material-UI 的响应式布局，确保在桌面和移动设备上都能良好显示。
二、本次实践规划
2.1 本地环境规划
本次实践为个人测试环境，操作系统版本为Ubuntu 22.04.1。
hostname | IP地址 | 操作系统版本 | Docker版本 | 部署项目 |
|---|---|---|---|---|
jeven01 | 192.168.3.88 | Ubuntu 22.04.1 LTS | 27.1.1 | docker-port-viewer |
2.2 本次实践介绍
1.本次实践部署环境为个人测试环境，生产环境请谨慎；
2.在Docker环境下部署docker-port-viewer端口查看器。
三、本地环境检查
3.1 检查Docker服务状态
检查Docker服务是否正常运行，确保Docker正常运行。
root@jeven01:~# systemctl status docker
● docker.service - Docker Application Container Engine
Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
Active: active (running) since Wed 2025-07-02 14:16:57 UTC; 21h ago
TriggeredBy: ● docker.socket
Docs: https://docs.docker.com
Main PID: 878 (dockerd)
Tasks: 28
Memory: 1.2G
CPU: 1min 50.356s
CGroup: /system.slice/docker.service
├─ 878 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock3.2 检查Docker版本
检查Docker版本
root@jeven01:~# docker -v
Docker version 27.1.1, build 63125853.3 检查docker compose 版本
检查Docker compose版本，确保2.0以上版本。
root@jeven01:~# docker compose version
Docker Compose version v2.19.1四、拉取docker-port-viewer镜像
拉取docker-port-viewer容器镜像，如下所示：
docker pull tecnativa/docker-socket-proxy
docker pull docker pull hollowpnt/docker-port-viewer:latest
五、部署docker-port-viewer服务
5.1 创建部署目录
- 创建部署目录
mkdir -p /data/docker-port-viewer && cd /data/docker-port-viewer5.2 编辑部署文件
在部署目录下，创建docker-compose.yaml文件，如下所示：
vim docker-compose.yaml
services:
# Docker socket proxy for security
docker-socket:
image: tecnativa/docker-socket-proxy
container_name: docker-socket-proxy
environment:
- CONTAINERS=1
- POST=0
- PUT=0
- DELETE=0
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
# Main application
docker-port-viewer:
image: hollowpnt/docker-port-viewer:latest
container_name: docker-port-viewer
ports:
- "3003:80"5.3 创建docker-port-viewer容器
执行以下命令，创建docker-port-viewer容器。
docker compose up -d
5.4 查看docker-port-viewer容器状态
检查docker-port-viewer容器运行状态，确保docker-port-viewer容器正常启动。
root@jeven01:/data/docker-port-viewer# docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUSPORTS
docker-port-viewer hollowpnt/docker-port-viewer:latest "/docker-entrypoint.…" docker-port-viewer About a minute ago Up About a minute0.0.0.0:3003->80/tcp, [::]:3003->80/tcp
docker-socket-proxy tecnativa/docker-socket-proxy "docker-entrypoint.s…" docker-socket About a minute ago Up About a minute2375/tcp5.5 查看docker-port-viewer容器日志
检查docker-port-viewer容器运行日志，确保docker-port-viewer服务正常运行。
docker compose logs
六、访问docker-port-viewer服务
浏览器地址：
http://<个人的服务器IP>:3003，访问docker-port-viewer的初始页。如果无法访问，请确保宿主机的防火墙已关闭或已放行相关端口，对于云服务器还需配置相应的安全组规则。
将hostname改为自己服务器地址后，可以打开宿主机上的容器服务。
七、总结
通过本次 Docker 项目实践，我们成功部署了 docker-port-viewer，实现了一个轻量级但功能强大的容器端口监控与访问工具。该工具不仅提升了对运行中容器的可视化管理能力，还简化了开发者调试和操作容器服务的流程。借助现代前端技术和安全的 Docker 套接字代理机制，项目展示了如何将容器管理集成到现代化 Web 应用中，具备良好的实用性和扩展性。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
