一、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
       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 -vDocker version 27.1.1, build 6312585

3.3 检查docker compose 版本

检查Docker compose版本，确保2.0以上版本。

root@jeven01:~# docker compose versionDocker Compose version v2.19.1

四、下载JSON Hero镜像

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

root@jeven01:~# docker pull henryclw/jsonhero-web:latestlatest: 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.yamlroot@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 psNAME                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 的实用性和易用性。