PassNAT LogoPassNAT

免费在线JSON格式化工具ZJSON自建部署教程,智能纠错支持非标准格式,配置帕斯内网穿透公网访问随时随地处理JSON数据

作者

小编

发布时间

Curving abstract shapes with an orange and blue gradient

基于我获取到的信息,这个项目是一个前端JSON格式化工具,没有提供Docker部署方式。这是一个纯前端项目,基于Vite5 + Vue3构建。由于项目没有Docker支持,我需要为用户提供一个通用的前端项目Docker化部署方案。

项目介绍

ZJSON(转杰森)是一个功能强大的在线JSON格式化工具,专为开发者和数据处理人员设计。该项目基于 Vite5 + Vue3 + Pinia + Ant-design-vue + Monaco-editor 构建,提供了丰富的JSON处理功能。

主要功能包括:

- 支持非标准JSON解析和错误提示,能够处理Python collection等格式 - 提供JSON转义、反转义、压缩等多种处理选项 - 支持键值引号设置,可以自定义输出格式 - 内置本地保存和历史记录功能,方便管理常用数据 - 支持深浅双色主题切换和中英文国际化 - 多任务标签页支持,可同时处理多个JSON文件 - 文档对比功能,支持代码差异对比 - 集成Monaco编辑器,提供专业的代码编辑体验

界面简洁美观,无广告干扰,完全免费使用。相比其他在线工具,ZJSON提供了更专业的JSON处理能力和更好的用户体验。

项目地址: 点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。

由于该项目是纯前端项目,我们使用Nginx容器来部署静态文件。

打开飞牛 NAS 或其他的 NAS 设备 点击本地镜像-添加镜像-从 URL 添加。这一步先添加 docker 镜像

镜像填 nginx:alpine 等待下载完成后点击启动按钮启动容器

勾选开机自动启动后下一步,端口设置这里。请设置容器端口 80 映射到主机端口 8080(如果端口冲突可以修改主机端口,但容器内端口必须保持80)

存储位置这里,需要创建一个文件夹用于存放网站文件。在NAS上创建一个名为 zjson 的文件夹,然后将容器路径 /usr/share/nginx/html 映射到这个文件夹。

环境变量设置:无需设置任何环境变量

其他的都不用填写,直接下一步启动就好了。

重要步骤:部署网站文件

1. 访问 ZJSON官网 2. 由于这是开源项目,你需要从GitHub下载源码并构建,或者直接使用官方在线版本 3. 如果要自建,需要先安装Node.js环境,然后执行:

1git clone https://github.com/CN-Tower/zjson.git
2cd zjson
3npm install
4npm run build

4. 将构建后的dist文件夹内容复制到NAS上创建的 zjson 文件夹中

创建成功后可以访问 ip:8080 到这里就可以正常显示项目了

穿透公网

打开帕斯内网穿透控制台,点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选,一般选个负载低的就可以

接下来填写信息,隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式,教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 8080 端口,这里本地端口就填 8080

远程端口可以留空也可以自定义。下图仅做参考,请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道,点击获取配置文件

回到飞牛 NAS,点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件,点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束