Twikoo评论+PicList+R2图床：博客评论图片上传与CDN加速最佳实践

首先我们使用进行演示搭建服务的机器是YXVM提供，感谢大善人的赞助。

NodeSupport计划是NodeSeek社区和合作商家主导的免费服务器赞助计划，为高质量博客、开源项目、tg频道、App等持续提供优质稳定的服务器资源。
为了规范化、透明化赞助和审批流程，我们开发了审批管理系统，用于处理免费机器的申请、续期、答疑、建议和检举投诉。
目前NodeSupport的vps服务器资源由YxVM大力赞助，项目处于试运营状态NodeSupport计划申请

博主前言

  • 博主我呢是对容器一点不熟悉，我也搜索过，hexo博客评论系统接入picgo-server服务，基本没有找到相关的文章，只能自己折腾，最终实现了自己想要的效果。这篇博文完整记录了我的操作流程，希望能为和我一样的新手小白提供参考和帮助，大佬无视，教程中有什么优化的可以提出指正。

界面预览

事前准备

  • 域名（必须，你也可以使用免费域名）
  • 已经开通R2储存功能（必须）
  • 博客（必须，或接入Twikoo评论系统的其他站点）
  • 一台安装了1Panel的服务器（必须，没有可以试着去NodeSupport计划申请）

部署教程

创建容器

  1. 容器 → 创建容器
    创建容器

  2. 容器参数

    1
    2
    3
    4
    5
    6
    7
    8
    容器名称=piclist  “名称随你设置”
    镜像勾选手动输入=kuingsmile/piclist:latest
    端口暴露端口： 
    服务器=36677 容器=36677 协议=tcp
    挂载：“本机目录随你设置，我放在opt/zrf，这个文件夹下”
    本机目录=/opt/zrf/piclist  权限=读写 容器目录=/root/.piclist
    Command=node /usr/local/bin/picgo-server -k piclist123456  “其中 piclist123456 这个是上传的密码随你设置”
    Entrypoint=docker-entrypoint.sh

  3. 如图所示，我没写的都默认即可。全部参数填写完毕点击右下角的 确认
    创建容器2
    创建容器3

  4. 好等待容器 状态 变为 已启动
    容器状态已启动

  5. 浏览器打开：http://你的服务器ip:36677 可以看到这样的内容就说明你的服务正确的启动了。
    浏览服务

  6. 接下来,打开 系统 → 文件 打开你前面创建的本机目录的路径，你我的可能不一样，进入你设置的目录，打开 config.json 配置文件替换下方的json内容。
    config.json

  7. config.json 文件内容

  • 这些配置内容，是你开通了R2图床才有这些数据，我们先复制进去找到一个参数填写一个参数进去。

config.json 文件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
{
  "picBed": {
    "current": "aws-s3-plist",
    "uploader": "aws-s3-plist",
    "aws-s3-plist": {
      "_configName": "随意填写",
      "accessKeyID": "访问密钥 ID",
      "secretAccessKey": "机密访问密钥",
      "bucketName": "你的储存桶名",
      "uploadPath": "blog/{timestamp}.{extName}",
      "endpoint": "为 S3 客户端使用管辖权地特定的终结点",  
      "urlPrefix": "https://webp.001315.xyz",
      "pathStyleAccess": false,
      "rejectUnauthorized": false,
      "acl": "public-read",
      "disableBucketPrefixToURL": false
    }
  },
  "settings": {
    "autoRename": true,
    "rename": true,
    "useWebp": true
  },
  "buildIn": {
    "compress": {
      "quality": 50,
      "isConvert": true,
      "convertFormat": "webp",
      "isReSize": false,
      "reSizeWidth": 500,
      "reSizeHeight": 500,
      "skipReSizeOfSmallImg": false,
      "isReSizeByPercent": false,
      "reSizePercent": 50,
      "isRotate": false,
      "rotateDegree": 0,
      "isRemoveExif": true,
      "isFlip": false,
      "isFlop": false,
      "formatConvertObj": {
        "png": "webp",
        "jpg": "webp",
        "jpeg": "webp",
        "bmp": "webp",
        "tiff": "webp",
        "heic": "webp",
        "webp": "webp"
      }
    },
    "watermark": {
      "isAddWatermark": false,
      "watermarkType": "text",
      "isFullScreenWatermark": false,
      "watermarkDegree": 0,
      "watermarkText": "",
      "watermarkFontPath": "",
      "watermarkScaleRatio": 0.15,
      "watermarkColor": "#CCCCCC73",
      "watermarkImagePath": "",
      "watermarkPosition": "southeast"
    }
  },
  "picgoPlugins": {}
}

创建储存桶

  1. 获取R2储存桶设置参数。如果你还没有创建储存桶就创建一个。
    创建储存桶

  2. 选择美国西部的话，可以使用 WebP 云服务缓存 来加快的你图片访问速度。我之前创建过名为img的储存桶就不创建了。名字你随意取。
    创建储存桶2

获取储存桶Token并填入config.json配置

参数：

  1. configName=随意填写
  2. bucketName=你的储存桶名,
  3. uploadPath=blog/{timestamp}.{extName},其中的blog是在这个桶中创建一个 blog文件图片存在在这个目录，你也可以设置为： {fileName}.{extName} 就是放在根目录。
  • 每个对应填写到你的config.json配置中，例子：
    1
    2
    3
    "bucketName": "img",
    "uploadPath": "blog/{timestamp}.{extName}",
    "endpoint": "https://xxxxxxxxxxxxx.r2.cloudflarestorage.com",

获取储存桶Token

  1. 回到创建储存桶的页面选择API → 管理API令牌 创建 用户 API 令牌
    用户 API 令牌1
    用户 API 令牌2

  2. 创建完成这个页面的Token值都找个地方保存一下，这些令牌值不会再次显示，如果你下次使用忘记就得重新创建。
    用户 API 令牌 Token

  3. urlPrefix=可以是你的储存桶的自定义域名也可以是 WebP 云服务缓存 服务的分配的域名或者你其中设置的自定义域名。

  • 因为博客的评论功能的图片并不是使用率非常高的，基本 WebP 云服务缓存 所提供的免费计划基本已经够用了。

R2储存桶 自定义域名

设置 WebP 云服务缓存服务

  1. 打开 https://dashboard.webp.se/ 注册并登录账号就不演示了，创建代理 → 代理名称=随意设置，源站地址=你R2储存桶的自定义域名
    WebP 云服务缓存服务1

  2. 可以在这里设置自定义域名，根据平台的提示进行设置解析和TXT验证，等一会，激活就行，或者也可以使用平台分配的域名 https://b7038d2.webp.li 这样的，反正最终，你需要填写的 urlPrefix=代理地址（如果你不使用这个缓存服务就是你的储存桶的自定义域名）
    WebP 云服务缓存服务2

  3. 到此所有的config.json配置参数都获得并填写。右下角确定保存配置！
    WebP 云服务缓存服务3

配置域名并安装证书

配置域名

  1. 给这个服务配置域名，我设置为：picgo-server.zrf.me 解析到你的服务器ip保存。
    配置域名

  2. 先确定你的容器内网ip及端口，我的是172.17.0.2:36677
    容器内网ip及端口

  3. 来到 1panel → 网站 → 网站 → 创建 → 反向代理 → 主域名=你自己刚设置的域名。代理地址=172.17.0.2:36677（以你的为准）
    反向代理

安装证书

  1. 接下来回到 1panel → 网站 → 证书 → DNS账户 → 创建 ，名称随你设置，因为我的域名托管到 cloudflare中的。选择类型为cloudflare ，EMAIL就是你cloudflare账号的邮箱。
    安装证书1
    安装证书2

  2. API Token 获取，我们打开 https://dash.cloudflare.com/ 首页 右上角 配置文件
    API Token

  3. API令牌 → 创建令牌 选择 编辑区域 DNS 点击 使用模板，区域资源 选择 所有区域 → 创建令牌 得到的 用户 API 令牌 填入 DNS账户 的 API Token。
    API Token2
    API Token3
    API Token4

  4. 从网站中获取 选你的这个域名，然后确定就可以申请了。日志显示：申请 [picgo-server.zrf.me] 证书成功！！ 这就申请成功了。
    证书成功
    证书成功

  5. 来到 1panel → 网站 → 网站 → 配置 → 如图设置然后保存。
    配置证书
    配置证书

  6. 重启容器（很重要）
    重启容器

  7. 然后浏览器可以打开你的域名：https://picgo-server.zrf.me/ 显示我这样的就对的，到此所有的picgo-server服务安装完成

配置博客Twikoo评论

  1. IMAGE_CDN_URL=你自己刚设置的域名，IMAGE_CDN_TOKEN=之前步骤的这个其中 piclist123456 这个是上传的密码随你设置，然后保存，去测试上传是否正常。
    配置博客Twikoo评论

  2. https://blog.zrf.me/message/ 效果浏览。我发现大图上传不了还是咋回事。有几张失败。
    上传后的直链地址：https://webp.001315.xyz/blog/1746733312.webp
    测试上传图片

  3. 完结撒花。

相关链接

NodeSupport计划申请：https://support.nodeget.com/page/promotion?id=116

GitHub PicList：https://github.com/Kuingsmile/PicList

WebP 云服务缓存服务：https://dashboard.webp.se/