@TOC
一、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。
| hostname | IP地址 | 操作系统版本 | Docker版本 | 镜像版本 |
|---|---|---|---|---|
| jeven01 | 192.168.3.88 | Ubuntu 22.04.1 LTS | 27.1.1 | latest |
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
Docs: https://docs.docker.com
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 的实用性和易用性。
