当前位置：

社区首页

电脑数码

存储设备

网络存储

文章详情

Docker实战：轻松搞定JSON可视化神器！

一、JSON Hero介绍

1.1 JSON Hero工具简介

JSON Hero 是由 Trigger.dev 团队开发和维护的一款强大的 JSON 查看和编辑工具，提供了一个美观且功能丰富的用户界面。

1.2 JSON Hero工具特点

多种视图模式：支持列视图、树视图、编辑视图等多种视图模式，满足不同需求。
智能预览：自动推断字符串内容并提供有用的预览，增强数据理解。
生成 JSON 模式：自动生成 JSON 模式，用于验证 JSON 数据的结构。
快速扫描：快速扫描相关值，检查边缘情况，确保数据一致性。
强大搜索：支持对 JSON 文件中的键和值进行搜索，方便定位信息。
键盘导航：完全支持键盘操作，提高使用效率。
分享功能：提供带有路径支持的可共享 URL，方便团队协作。

1.3 主要使用场景

开发调试：开发人员可以轻松查看和调试 API 响应，确保数据格式正确。
数据验证：自动生成的 JSON 模式帮助验证数据的合法性和结构。
团队协作：团队成员通过共享 URL 协作查看和编辑 JSON 文件，提高效率。
数据分析：快速查找和分析 JSON 数据中的特定信息，适用于大数据集。

二、本次实践规划

2.1 本地环境规划

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

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境，生产环境请谨慎； 2.在Docker环境下部署JSON可视化管理工具JSON Hero。

三、本地环境检查

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 Mon 2024-09-09 10:43:35 CST; 3 weeks 5 days ago Main PID: 695 (dockerd) Tasks: 135 (limit: 9387) Memory: 4.0G CPU: 46min 46.854s CGroup: /system.slice/docker.service ├─ 695 /usr/bin/dockerd ├─ 846 containerd --config /var/run/docker/containerd/containerd.toml

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

四、下载JSON Hero镜像

拉取JSON Hero镜像，镜像名称为：henryclw/jsonhero-web:latest。

root@jeven01:~# docker pull henryclw/jsonhero-web:latest latest: Pulling from henryclw/jsonhero-web Digest: sha256:1e514ed9fd9bd0efd42ff21c85c9aa2cca6c6f8ad7f76eac6ca39732b41dab21 Status: Image is up to date for henryclw/jsonhero-web:latest docker.io/henryclw/jsonhero-web:latest

五、部署JSON Hero应用

5.1 创建部署目录

mkdir -p /data/json_hero && cd /data/json_hero

5.2 编辑部署文件

如果使用docker-cli部署，可参考以下命令：

docker run -d --restart always --name jsonhero-web -p 9500:8787 henryclw/jsonhero-web:latest

在`部署目录下，创建docker-compose.yaml文件，其中宿主机映射端口等可以自定义配置。

vim docker-compose.yaml

version: '3' services: jsonhero-web: image: henryclw/jsonhero-web:latest container_name: jsonhero-web restart: always ports: - 9500:8787

5.3 创建JSON Hero容器

执行以下命令，创建JSON Hero容器。

root@jeven01:/data/json_hero# vim docker-compose.yaml root@jeven01:/data/json_hero# docker compose up -d [+] Running 2/2 ✔ Network json_hero_default Created 0.1s ✔ Container jsonhero-web Started 0.3s

5.4 查看JSON Hero容器状态

检查JSON Hero容器状态状态，确保JSON Hero容器正常启动。

root@jeven01:/data/json_hero# docker compose ps NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS jsonhero-web henryclw/jsonhero-web:latest "npm start" jsonhero-web 4 minutes ago Up 4 minutes 0.0.0.0:9500->8787/tcp, :::9500->8787/tcp

5.5 查看JSON Hero容器日志

检查JSON Hero容器日志，确保JSON Hero服务正常运行。

docker compose logs

六、访问JSON Hero服务

6.1 访问JSON Hero主页

访问地址：http://192.168.3.88:9500，将IP替换为自己服务器IP地址。如果无法访问到以下页面，则检查宿主机的防火墙是否关闭或者放行相关端口，云服务器则还需要设置安全组规则。

6.2 上传json文件

我们使用一个本地的测试json文件是，上传到JSON Hero。

{ "person": { "name": "张三", "age": 30, "email": "zhangsan@example.com", "address": { "street": "幸福路123号", "city": "北京", "country": "中国" }, "hobbies": ["阅读", "编程", "旅行"], "is_student": false } }

七、总结

在使用 Docker 部署 JSON 可视化管理工具 JSON Hero 的过程中，Docker 的简便性和高效性得到了充分体现。通过 Dockerfile 和简单的命令，能够迅速搭建和运行 JSON Hero，大幅简化了环境配置和依赖管理。JSON Hero 的用户界面友好，多种视图模式和智能预览功能使得 JSON 数据的查看和编辑变得直观高效。这次实践不仅展示了 Docker 的强大能力，也突显了 JSON Hero 的实用性和易用性。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～