(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主要特點

1. 查看所有正在運行的 Docker 容器及其暴露的端口
   實時展示所有運行中容器的基本信息與對外開放的端口。

2. 按名稱搜索容器
   提供快速搜索功能，幫助您在眾多容器中迅速定位目標。

3. 按名稱或創建日期排序容器
   支持對容器列表進行排序，便於組織和瀏覽。

4. 查看容器詳細信息（名稱、鏡像、狀態、啓動時間、暴露端口等）
   提供全面的容器元數據，方便監控和調試。

5. 通過內嵌框架直接訪問容器網頁界面
   無需離開應用即可在嵌入式 iframe 中預覽容器提供的 Web 頁面。

6. 支持在新標籤頁中打開容器網頁界面
   提供快捷鏈接，在新窗口中打開容器服務頁面，便於深入操作。

7. 可自定義訪問容器的主機名
   允許用户配置自定義域名或 IP 地址來訪問容器服務。

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

9. 響應式設計，適配各種設備
   基於 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.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 應用中，具備良好的實用性和擴展性。

---