一、docker-port-viewer介绍

1.1 docker-port-viewer简介

docker-port-viewer 是一个现代化的网络应用程序，旨在帮助用户轻松查看和操作 Docker 容器的端口。它使用 TypeScript、React 和 Material-UI 构建，提供了一个直观、响应式的用户界面，方便开发者和系统管理员管理和访问他们的 Docker 容器。

1.2 docker-port-viewer主要特点

1. 查看所有正在运行的 Docker 容器及其暴露的端口
   实时展示所有运行中容器的基本信息与对外开放的端口。

2. 按名称搜索容器
   提供快速搜索功能，帮助您在众多容器中迅速定位目标。

3. 按名称或创建日期排序容器
   支持对容器列表进行排序，便于组织和浏览。

4. 查看容器详细信息（名称、镜像、状态、启动时间、暴露端口等）
   提供全面的容器元数据，方便监控和调试。

5. 通过内嵌框架直接访问容器网页界面
   无需离开应用即可在嵌入式 iframe 中预览容器提供的 Web 页面。

6. 支持在新标签页中打开容器网页界面
   提供快捷链接，在新窗口中打开容器服务页面，便于深入操作。

7. 可自定义访问容器的主机名
   允许用户配置自定义域名或 IP 地址来访问容器服务。

8. 集成安全的 Docker 套接字代理
   通过反向代理方式安全地连接 Docker 套接字，防止直接暴露敏感接口。

9. 响应式设计，适配各种设备
   基于 Material-UI 的响应式布局，确保在桌面和移动设备上都能良好显示。

二、本次实践规划

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为Ubuntu 22.04.1。

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.sock

3.2 检查Docker版本

检查Docker版本

root@jeven01:~# docker -v
Docker version 27.1.1, build 6312585

3.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-viewer

5.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/tcp

5.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 应用中，具备良好的实用性和扩展性。