本地化JSON 处理新方案：基于 Docker的JSON Hero部署全记录

【本地化JSON 处理新方案：基于 Docker的JSON Hero部署全记录

[一、JSON Hero介绍](#一、JSON Hero介绍)
- [1.1 JSON Hero工具简介](#1.1 JSON Hero工具简介)
- [1.2 JSON Hero工具特点](#1.2 JSON Hero工具特点)
- [1.3 主要使用场景](#1.3 主要使用场景)
二、本次实践规划
- [2.1 本地环境规划](#2.1 本地环境规划)
- [2.2 本次实践介绍](#2.2 本次实践介绍)
三、本地环境检查
- [3.1 检查Docker服务状态](#3.1 检查Docker服务状态)
- [3.2 检查Docker版本](#3.2 检查Docker版本)
- [3.3 检查docker compose 版本](#3.3 检查docker compose 版本)
[四、下载JSON Hero镜像](#四、下载JSON Hero镜像)
[五、部署JSON Hero应用](#五、部署JSON Hero应用)
- [5.1 创建部署目录](#5.1 创建部署目录)
- [5.2 编辑部署文件](#5.2 编辑部署文件)
- [5.3 创建JSON Hero容器](#5.3 创建JSON Hero容器)
- [5.4 查看JSON Hero容器状态](#5.4 查看JSON Hero容器状态)
- [5.5 查看JSON Hero容器日志](#5.5 查看JSON Hero容器日志)
[六、访问JSON Hero服务](#六、访问JSON Hero服务)
- [6.1 访问JSON Hero主页](#6.1 访问JSON Hero主页)
- [6.2 上传json文件](#6.2 上传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。

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正常运行。

bash 复制代码

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版本

bash 复制代码

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

3.3 检查docker compose 版本

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

bash 复制代码

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

四、下载JSON Hero镜像

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

bash 复制代码

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 创建部署目录

bash 复制代码

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

5.2 编辑部署文件

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

bash 复制代码

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

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

bash 复制代码

vim docker-compose.yaml

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容器。

bash 复制代码

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容器正常启动。

bash 复制代码

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服务正常运行。

bash 复制代码

docker compose logs

六、访问JSON Hero服务

6.1 访问JSON Hero主页

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

6.2 上传json文件

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

json 复制代码

{
  "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 的实用性和易用性。