“魔改”it-tools前端界面与Docker镜像构建实录

“都是自己人，咱就捞干的说。”兄弟们，不知道你们有没有这种体验：网上找个JSON格式化、密码生成之类的小工具，要么广告满天飞，要么就得扫码关注，用起来那叫一个憋屈。反正李哥我是受够了！这不，就在Github上发现了这个叫 it-tools 的宝贝，一个集成了50多种开发者工具的纯前端网站，干净、免费、即开即用。官方提供了Docker镜像，一键部署是爽，但默认全是英文界面，Logo、标题啥的也都是人家的，用着总感觉是“寄人篱下”，不够得劲。

所以，李哥今儿个要干票啥？咱不满足于“能用”，咱要的是“好用”，而且是“完全属于自己”的好用！这篇笔记，就手把手带你“扒掉”it-tools的官方外衣，给它换上咱自己的“皮肤”。从怎么克隆源码、修改标题Logo，到如何亲手构建一个写着咱自己大名的Docker镜像，最后部署上线。整个过程，说白了就是一次轻量级的“二次开发”。你放心，不需要你有多深的前端功底，跟着李哥的步骤，改改文字、换换图片，就跟给WordPress换个主题差不多简单。但做完之后，成就感绝对拉满——访问自己服务器上那个完全定制化的工具站，那感觉，就跟开盲盒开出了隐藏款一样爽！“工具嘛，就得驯服得贴贴心心，用起来才顺手。” 废话不多说，开整！

一、核心思路

it-tools是纯前端项目（Vue.js框架），所有界面内容都在源码的src/目录中。修改流程为： 克隆源码 → 修改前端文件 → 本地构建Docker镜像 → 运行自定义镜像

二、详细步骤

1. 准备环境

确保安装Git、Node.js（16+）、Docker：

# 安装依赖（Ubuntu示例）
sudo apt install -y git nodejs npm docker.io

2. 克隆源码并修改内容

# 克隆仓库
git clone https://github.com/CorentinTh/it-tools.git
cd it-tools

# 安装前端依赖
npm install

根据红框位置修改对应文件（以常见修改为例）：

修改内容	文件路径	示例操作
顶部标题/Logo	src/App.vue	搜索<header>标签，替换<h1>内容或<img>的src属性（Logo建议用Base64编码）
工具分类名称	src/tools/index.ts	修改categories数组中的name字段（如将”Converter”改为”格式转换”）
工具卡片名称/描述	src/tools/[工具类型]/[工具名].ts	如修改JSON格式化工具：src/tools/formatters/json-formatter.ts中的name和description
页脚版权信息	src/components/layout/Footer.vue	修改<footer>标签内的文本

修改后可本地预览效果：npm run dev（访问http://localhost:5173）。

3. 构建自定义Docker镜像

修改完成后，用官方Dockerfile构建镜像：

# 在源码目录执行构建（约5分钟，依赖网络环境）
docker build -t my-it-tools:custom .  # 镜像名自定义，如my-it-tools:custom

构建成功后，本地镜像列表会新增my-it-tools:custom。

4. 运行自定义镜像

用修改后的镜像启动容器，命令与官方类似：

# 先停止并删除旧容器（如有）
docker stop it-tools && docker rm it-tools

# 启动自定义镜像
docker run -d \
  --name it-tools \
  --restart unless-stopped \
  -p 9580:80 \  # 主机端口9580，可自定义
  my-it-tools:custom  # 使用本地构建的镜像名

三、验证与更新

访问验证：浏览器打开http://IP:9580，确认红框内容已修改。
后续更新：若官方源码更新，需重新克隆并合并修改（git pull），再重复构建步骤。

四、注意事项

不建议直接修改容器内文件：通过docker exec进入容器修改文件会随容器删除丢失，且无法同步到新镜像。
保留官方镜像：自定义镜像命名避免与官方corentinth/it-tools冲突，便于区分。
复杂修改需前端基础：如调整样式需修改src/assets/styles/下的CSS文件，或通过src/main.ts注入全局样式。

这种方式本质是“二次开发”，适合需要深度定制的场景。若仅需简单修改（如标题），10分钟即可完成；若涉及工具功能逻辑调整，需参考Vue.js和项目的开发文档。修改后的镜像可推送到私有仓库，方便多服务器部署。

进阶容器持久化：

通过Docker安装it-tools（开发者在线工具集）仅需三步，官方提供了两种镜像源选择，适用于Linux、Windows和macOS系统。以下是基于官方文档的完整部署指南。

一、环境准备

首先确保已安装Docker和Docker Compose。验证命令：

docker -v          # 需显示20.10+版本
docker compose version  # 需显示v2.0+版本

未安装可参考Docker官方文档，或使用简化脚本（Ubuntu示例）：

sudo apt update && sudo apt install -y docker.io docker-compose
sudo systemctl enable docker --now

二、核心部署步骤

选项1：从Docker Hub拉取镜像（推荐）

官方镜像体积约150MB，包含所有工具功能。执行以下命令启动容器：

docker run -d \
  --name it-tools \          # 容器名称
  --restart unless-stopped \ # 异常退出时自动重启
  -p 8080:80 \               # 端口映射（主机端口:容器端口）
  corentinth/it-tools:latest # 镜像名称:版本标签

参数说明：-d后台运行，-p 8080:80将主机8080端口映射到容器80端口（可修改主机端口避免冲突，如-p 9000:80）。

选项2：从GitHub Packages拉取镜像

若Docker Hub访问缓慢，可使用GitHub容器仓库：

docker run -d \
  --name it-tools \
  --restart unless-stopped \
  -p 8080:80 \
  ghcr.io/corentinth/it-tools:latest

三、验证与访问

检查容器状态：

docker ps | grep it-tools  # 应显示STATUS为Up
docker logs it-tools       # 查看启动日志，无报错即可

访问工具网站：在浏览器输入 http://服务器IP:8080（本地部署用http://localhost:8080），即可看到it-tools的工具列表，包含Base64编码、JSON格式化、正则表达式测试等50+开发者工具。

四、进阶配置（可选）

1. 数据持久化（针对未来版本）

当前官方镜像未提供持久化目录（工具数据保存在浏览器本地存储），若需保存配置，可关注项目后续更新或通过Docker卷挂载：

docker run -d \
  --name it-tools \
  --restart unless-stopped \
  -p 8080:80 \
  -v ./it-tools-data:/app/data \  # 挂载本地目录（需提前创建）
  corentinth/it-tools:latest

2. HTTPS配置（生产环境）

配合Nginx反向代理实现SSL加密：

安装Nginx并配置虚拟主机，示例配置（/etc/nginx/sites-available/it-tools）：

server {
     listen 443 ssl;
     server_name tools.yourdomain.com;
     
     ssl_certificate /path/to/cert.pem;
     ssl_certificate_key /path/to/key.pem;
     
     location / {
       proxy_pass http://localhost:8080;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
     }
   }

重启Nginx：sudo systemctl restart nginx。

五、更新与卸载

更新镜像：

docker stop it-tools && docker rm it-tools
docker pull corentinth/it-tools:latest  # 拉取最新版本
# 重新执行docker run命令

完全卸载：

docker stop it-tools && docker rm it-tools  # 停止并删除容器
docker rmi corentinth/it-tools:latest       # 删除镜像

通过Docker部署的it-tools保持与官方同步更新，单容器设计使其资源占用极低（ idle状态内存<50MB），适合个人开发者或小型团队内部部署。若需自定义工具或贡献代码，可参考项目README中的开发指南。访问时遇到端口冲突，只需修改-p参数的主机端口即可快速解决。

其它说明：

sudo mkdir -p /www/wwwroot/it-tools-data && sudo chmod 777 /www/wwwroot/it-tools-data  #先手动创建主机目录（避免权限问题）

docker run -d \
  --name it-tools \
  --restart unless-stopped \
  -p 9090:80 \  # 主机端口9090 → 容器端口80（正确映射）
  -v /www/wwwroot/it-tools-data:/data \  # 绝对路径挂载（当前无实际作用）
  corentinth/it-tools:latest

docker exec -it it-tools /bin/sh   #进入容器

docker ps | grep it-tools   #查看容器运行状态（应显示 Up X分钟）
docker logs it-tools   #若状态异常，查看错误日志
docker stop it-tools && docker rm it-tools     #通过容器名称删除
docker ps -a | grep it-tools  # 找到名为"it-tools"的容器
docker images | grep it-tools  #  查看it-tools镜像ID
docker rmi def67890  #删除镜像（替换def67890为实际镜像ID）
docker images | grep it-tools # 应无输出（镜像已删除）
ls -la /www/wwwroot/it-tools  #先检查目录内容（避免误删）
sudo rm -rf /www/wwwroot/it-tools   #确认无重要文件后删除

通过GIT项目安装：

IT-TOOLS如果需要定制LOGO修改前端内容最好是通过GIT在本地修改后再用DOCKER进行构建再次部署。因为你直接部署的话就不能自定义一些自己的内容

sudo mkdir -p /www/wwwroot/it-tools-dev && sudo chmod 777 /www/wwwroot/it-tools-dev
cd /www/wwwroot/it-tools-dev
git clone https://github.com/CorentinTh/it-tools.git
cd it-tools
apt install npm
npm install

构建DOCKER镜像：

docker build -t leepoet-tools:custom .

如果遇到问题解决方案：

# 1. 删除错误的 Dockerfile
rm Dockerfile

# 2. 创建正确的 Dockerfile
cat > Dockerfile << 'EOF'
FROM node:20.19.5-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
ENV NODE_OPTIONS="--max_old_space_size=8192"
RUN npx vite build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
EOF

# 3. 验证文件内容
cat Dockerfile

# 4. 构建镜像
docker build -t leepoet-tools:custom .

# 5. 运行容器
docker run -d -p 3000:80 --name it-tools-container leepoet-tools:custom

后续管理指令：

# 停止容器
docker stop it-tools-container

# 启动容器
docker start it-tools-container

# 重启容器
docker restart it-tools-container

# 进入容器内部（调试用）
docker exec -it it-tools-container sh

# 删除容器
docker rm it-tools-container

# 查看容器详细信息
docker inspect it-tools-container

# 查看容器使用的资源
docker stats it-tools-container

构建完镜像后打包：

使用镜像保存/加载（适合内网环境）

# 保存镜像为文件
docker save -o leepoet-tools.tar leepoet-tools:custom

传输到服务器

# 使用 scp 传输（替换为你的服务器信息）
scp leepoet-tools.tar root@你的服务器IP:/tmp/

在服务器上加载运行

# 在服务器上加载镜像
docker load -i /tmp/leepoet-tools.tar

# 运行容器
docker run -d -p 3000:80 --name it-tools-container leepoet-tools:custom

# 停止并删除现有容器(如果存在)
docker stop it-tools-container
docker rm it-tools-container

  # 假设容器内网站根目录是/usr/share/nginx/html
# 重新运行容器并挂载目录
docker run -d \
  -p 3000:80 \
  --name it-tools-container \
  -v /www/wwwroot/tools.leepoet.cn:/usr/share/nginx/html \
  leepoet-tools:custom

Github项目 / 建站笔记

“魔改”it-tools前端界面与Docker镜像构建实录

一、核心思路

二、详细步骤

1. 准备环境

2. 克隆源码并修改内容

3. 构建自定义Docker镜像

4. 运行自定义镜像

三、验证与更新

四、注意事项

一、环境准备

二、核心部署步骤

选项1：从Docker Hub拉取镜像（推荐）

选项2：从GitHub Packages拉取镜像

三、验证与访问

四、进阶配置（可选）

1. 数据持久化（针对未来版本）

2. HTTPS配置（生产环境）

五、更新与卸载

You may also like...

发表回复取消回复

你能不能像我这样，成熟点！

近期文章

Github项目 / 建站笔记

一、核心思路

二、详细步骤

1. 准备环境

2. 克隆源码并修改内容

3. 构建自定义Docker镜像

4. 运行自定义镜像

三、验证与更新

四、注意事项

一、环境准备

二、核心部署步骤

选项1：从Docker Hub拉取镜像（推荐）

选项2：从GitHub Packages拉取镜像

三、验证与访问

四、进阶配置（可选）

1. 数据持久化（针对未来版本）

2. HTTPS配置（生产环境）

五、更新与卸载

You may also like...

Linux 流行发行版家族全览：从新手到专家的选系指南

GitHub开源神器Angry IP Scanner：一键扫描，网络设备尽在掌握​

VMess协议指南：基于DogYun服务器从零开始搭建专属代理服务

发表回复 取消回复

你能不能像我这样，成熟点！

近期文章

做人，最重要的是开心！

GitHub开源神器Angry IP Scanner：一键扫描，网络设备尽在掌握

发表回复取消回复