Logo

菜单

yanchang
yanchang
发布于 2026-02-26 / 10 阅读
0
0

在私有服务器上打造浏览器端的“万能工具箱”

#nginx#运维#碎碎念#linux

碎碎念

在日常生活的过程中，我们经常需要处理一些琐碎的任务：压缩一张图片、简单修个图、格式化一段 JSON 或者画一张架构草图。

虽然市面上有很多在线工具，但作为 HomeLab 玩家，**“数据私有”和“极致响应”**是我们的核心追求。最近我将四款顶级开源静态工具（miniPaint, Squoosh, IT-Tools, Excalidraw）部署到了自己的服务器上。

核心逻辑：服务器作为“寄存处”，浏览器作为“ CPU”

这种部署方式最迷人的地方在于：服务器仅负责分发静态资源（HTML/JS/WASM），所有的逻辑运算都在你访问网页的那台电脑（如我的黑苹果或 MateBook）的浏览器中完成。 这意味着即使我的服务器配置不高，只要我的本地机器性能强劲，处理速度依然起飞，且所有数据都在本地处理，不经过任何第三方服务器。

一、 基础设施：全局目录与权限初始化

规范的物理路径是项目成功的基石。我们首先建立统一的根目录，并预先解决 Nginx 最常见的权限痛点。

Bash

# 创建统一的根目录及项目子文件夹
sudo mkdir -p /opt/image-tools/{minipaint,squoosh,ittools,excalidraw}

# 安装必要依赖
sudo apt update && sudo apt install -y git wget unzip nodejs npm

# 关键：修正权限归属，防止 Nginx 报 403 错误
sudo chown -R www-data:www-data /opt/image-tools

二、 独立项目部署：四种不同的“搬运”艺术

这四个工具由于开发架构不同，部署方式也各具代表性，涵盖了从直接克隆到 Docker 抽取的多种技巧。

1. miniPaint：原生 JS，即拉即用

它是轻量级的“在线 Photoshop”，由于是原生 JS 编写，直接拉取源码即可运行。

Bash

cd /opt/image-tools/minipaint
sudo git clone https://github.com/viliusle/miniPaint.git .
sudo rm -rf .git # 瘦身建议

2. Squoosh：极限压缩，源码编译

Google 出品的图片压缩神器。它依赖 WebAssembly 技术，需要先在本地进行编译。

Bash

cd /tmp
git clone https://github.com/GoogleChromeLabs/squoosh.git
cd squoosh
npm install && npm run build
sudo cp -r build/* /opt/image-tools/squoosh/

3. IT-Tools：成品分发，API 自动获取

这是开发者的“瑞士军刀”。我们直接利用 GitHub API 获取最新的 Release 成品包，跳过复杂的编译过程。

Bash

cd /tmp
wget $(curl -s https://api.github.com/repos/CorentinTh/it-tools/releases/latest | grep "browser_download_url.*\.zip" | cut -d '"' -f 4) -O it-tools.zip
unzip it-tools.zip -d it-tools-temp
sudo cp -r it-tools-temp/* /opt/image-tools/ittools/

4. Excalidraw：Docker 镜像作为“搬运工”

Excalidraw 的依赖极多，手动编译非常痛苦。我的“魔法”是：利用官方 Docker 镜像，将其内部已经打包好的静态文件直接“偷”出来。

Bash

# 临时创建容器（不运行）
sudo docker create --name temp-excalidraw excalidraw/excalidraw:latest
# 将容器内的静态资源拷贝到物理机目录
sudo docker cp temp-excalidraw:/usr/share/nginx/html/. /opt/image-tools/excalidraw/
# 销毁临时容器
sudo docker rm temp-excalidraw

三、 Nginx 终极优化：让静态资源跑在“快车道”上

静态网页工具的体验取决于资源加载速度。在 /etc/nginx/sites-available/image-tools.conf 中，我应用了多项针对性优化：

  1. HTTP/2： 静态资源包含大量碎片化 JS，HTTP/2 的多路复用是必须的。

  2. MIME 类型修复： 必须包含 mime.types，确保浏览器能正确识别 .wasm 和 .js。

  3. Gzip 压缩： 文本类资源（HTML/CSS/JS）压缩率通常在 70% 以上。

  4. 强缓存： 这些工具基本不常更新，设置 30 天强缓存，第二次打开实现“秒开”。

简化版配置示例（多域名动态映射）

Nginx

server {
    listen 9081 ssl http2;
    server_name paint.yanchang.cc squoosh.yanchang.cc itools.yanchang.cc excalidraw.yanchang.cc;

    ssl_certificate     /etc/nginx/ssl/www.yanchang.pem;
    ssl_certificate_key /etc/nginx/ssl/www.yanchang.key;
    
    # 动态映射根目录
    set $project_root "";
    if ($host = "paint.yanchang.cc") { set $project_root "/opt/image-tools/minipaint"; }
    if ($host = "squoosh.yanchang.cc") { set $project_root "/opt/image-tools/squoosh"; }
    if ($host = "itools.yanchang.cc") { set $project_root "/opt/image-tools/ittools"; }
    if ($host = "excalidraw.yanchang.cc") { set $project_root "/opt/image-tools/excalidraw"; }

    root $project_root;
    index index.html;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 强缓存优化
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|wasm)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

四、 验证与上线

最后一步，放行端口并重载服务：

Bash

sudo ufw allow 9081
sudo nginx -t && sudo systemctl reload nginx

至此，一个完全属于你的“全能工具箱”已经上线。以后无论是修图还是写代码，只需输入二级域名，即可享受私有化带来的极速与安全。

结语： 这种“寄存式”部署再次证明了 Nginx 托管静态资源的强大。它不仅让我的服务器资源得到了最大化利用，也让我在不同终端（黑苹果、MateBook）切换时，都能拥有一致的生产力工具体验。


nginx代码示例

demo.conf

基于 Rsync 与青龙面板，如何...

评论