Hugo博客公告弹窗

榛子图床加强版,包含r2配合rclone的同步功能教程

原项目

https://github.com/ceocok/fake-nodeimage

特点

去重、图片命名缩短,默认压缩webp格式

前端

因为是静态文件,部署到cf pages,然后自定义域名即可,就是这么简单

下载压缩包传到cf pages即可

https://github.com/woniu336/open_shell/blob/main/nodeimg/fake-nodeimage-main.zip

后端

安装Node.js

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

验证安装

node -v
npm -v

上传代码到VPS

sudo mkdir -p /var/www/image-hosting-backend
cd /var/www/image-hosting-backend
wget https://raw.githubusercontent.com/woniu336/open_shell/main/nodeimg/package.json
wget https://raw.githubusercontent.com/woniu336/open_shell/main/nodeimg/server-s.js
mv server-s.js server.js

安装依赖

npm install

安装 sharp 图片处理库

cd /var/www/image-hosting-backend
npm install sharp

查看安装结果

npm list sharp

使用PM2运行(推荐)

安装 PM2

sudo npm install -g pm2

启动服务

pm2 start server.js --name image-hosting

设置开机自启

pm2 startup
pm2 save

查看日志

pm2 logs image-hosting

重启服务

pm2 restart image-hosting

常用PM2命令

pm2 list              # 查看所有进程
pm2 logs image-hosting # 查看日志
pm2 restart image-hosting # 重启
pm2 stop image-hosting    # 停止
pm2 delete image-hosting  # 删除

测试接口

测试健康检查接口

curl http://localhost:3000/api/health

显示{"status":"ok","message":"图床服务运行正常",.....表示没有问题

配置Nginx反向代理

可选,我是直接开启cf代理

server {
    listen 80;
    server_name your-domain.com;  # 改为您的域名

    client_max_body_size 10M;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

测试配置

sudo nginx -t

重启Nginx

sudo systemctl restart nginx

目录结构

/var/www/image-hosting-backend/
├── uploads/
   ├── compressed/        # 压缩后的图片(对外访问)
      ├── 950414abc.jpg
      └── 951234xyz.webp
   └── original/          # 原图(可选保存)
       ├── orig_950414abc.jpg
       └── orig_951234xyz.webp
├── server.js
├── package.json

压缩配置说明

在 server.js 顶部可以修改配置:

cd /var/www/image-hosting-backend
nano server.js

例如:

const COMPRESSION_CONFIG = {
  quality: 80,           // 压缩质量 (1-100,建议 75-85)
  maxWidth: 2560,        // 最大宽度
  maxHeight: 2560,       // 最大高度
  saveOriginal: false,   // 是否保存原图
  format: 'auto'         // 输出格式: auto, jpeg, webp, png
};

🎯 功能特点

✅ 自动压缩

  • 上传时自动压缩图片
  • 支持 JPEG, PNG, WebP 格式
  • 跳过 SVG 和 GIF(保持原样)

✅ 智能格式转换

  • auto: 自动选择最优格式
  • PNG 有透明→保持 PNG
  • 其他→转 JPEG(更小)
  • 支持强制转 WebP(最佳压缩比)

✅ 尺寸限制

  • 超过最大尺寸自动等比缩放
  • 不放大小图片

📊 压缩效果对比

质量设置文件大小视觉质量推荐场景
90-100极高摄影作品
75-85博客配图(推荐)
60-75缩略图
40-60极小不推荐

💡 推荐配置

博客配图(平衡质量和大小)

quality: 80
maxWidth: 2560
maxHeight: 2560
saveOriginal: false
format: 'auto'

极致压缩(最小体积)

quality: 75
maxWidth: 1920
maxHeight: 1920
saveOriginal: false
format: 'webp'  // WebP 格式更小

高质量保存

quality: 90
maxWidth: 4096
maxHeight: 4096
saveOriginal: true  // 保留原图
format: 'auto'

其他命令

清空日志

pm2 flush image-hosting

查看图片文件夹

du -sh /var/www/image-hosting-backend/uploads/compressed && \
ls /var/www/image-hosting-backend/uploads/compressed | wc -l

清除图片(慎重)

rm -f /var/www/image-hosting-backend/uploads/compressed/*

同步到cloudflare r2存储桶

安装 rclone

sudo -v ; curl https://rclone.org/install.sh | sudo bash

编辑 cloudflare r2 配置

mkdir -p /root/.config/rclone/
nano /root/.config/rclone/rclone.conf

配置模板

只需要修改 access_key_id、secret_access_key、endpoint 三个参数

[r2]
type = s3
provider = Cloudflare
access_key_id = 111
secret_access_key = 222
region = auto
endpoint = https://333.r2.cloudflarestorage.com

按 ctrl+x 保存,y 退出

测试是否配置正确,有文件会显示文件,空白就不显示

rclone ls r2:nodeimg  # nodeimg是存储桶名称

安装依赖

sudo apt update
sudo apt install rclone inotify-tools

下载同步脚本

记得修改你的存储桶名称,其他不用改

wget -O sync.sh https://raw.githubusercontent.com/woniu336/open_shell/main/nodeimg/sync.sh

说明

# RClone 实时同步脚本
# 功能:监控本地目录变化,立即同步到远程
# 注意:这是单向同步,远程内容会被本地覆盖!

测试同步

chmod +x sync.sh
./sync.sh

然后上传一张图片,查看终端窗口变化,检查远程是否真的同步了。

Ctrl+C 停止脚本。

设置开机自启

  1. 启用 Linger
loginctl enable-linger root
  1. 安装服务
./sync.sh systemd_setup
  1. 常用命令

注意:r2是rclone.conf配置文件里的名称,nodeimg是你存储桶的名称

# 查看状态
systemctl --user status rclone_sync.r2:nodeimg

# 停止同步
systemctl --user stop rclone_sync.r2:nodeimg

# 启动同步
systemctl --user start rclone_sync.r2:nodeimg

# 重启同步
systemctl --user restart rclone_sync.r2:nodeimg

安全建议

  1. 修改 CORS 配置:在 server.js 中将 origin: '*' 改为您的前端域名
  2. 添加认证:对于生产环境,建议添加 API 密钥验证
  3. 限流:使用 express-rate-limit 防止滥用
  4. 定期备份

完结。

CC BY-NC-SA 4.0 转载请注明
最后更新于 2025-10-28 03:27
clarity统计