Twikoo评论系统的Cloudflare部署方案

Twikoo评论系统的Cloudflare部署方案

Twikoo是一款简洁、安全且免费的静态网站评论系统，在提升网站互动性方面表现出色。通常，Twikoo可部署在诸如腾讯云开发环境、Vercel等平台，但借助Cloudflare进行部署，能极大改善冷启动延迟问题，实现快速加载，为用户带来更流畅的评论体验，同时利用Cloudflare强大的全球网络提升访问速度。以下为详细的Cloudflare部署Twikoo评论系统的步骤与要点。

一、前期准备

在开始部署前，需提前准备好相关工具与资源：

  1. Cloudflare账户：若尚未注册，前往Cloudflare官网完成注册流程。
  2. Node.js环境：确保本地开发环境安装了Node.js，可通过Node.js官网下载并安装对应系统的最新版本，安装完成后，在命令行输入node -v验证是否安装成功及查看版本号。
  3. 文本编辑器：推荐使用Visual Studio Code、Sublime Text等，方便进行代码编辑与配置文件修改。

二、安装依赖包

  1. 首先，创建一个新的项目目录，用于存放Twikoo相关代码与配置文件，在命令行中进入该目录，执行以下命令安装项目依赖：
npm install
  1. 由于Cloudflare Workers的免费套餐对捆绑包大小有严格的1MiB限制，部分与Cloudflare Workers的Node.js兼容性存在问题的包即便安装了也无法使用，为控制捆绑包大小，需手动删除这些包，在命令行中依次执行：
echo "" > node_modules/jsdom/lib/api.js
echo "" > node_modules/tencentcloud-sdk-nodejs/tencentcloud/index.js
echo "" > node_modules/nodemailer/lib/nodemailer.js

上述命令会清空jsdom、tencentcloud-sdk-nodejs、nodemailer这三个包中特定文件的内容，使其不占用捆绑包空间，同时规避兼容性问题。

三、登录Cloudflare账户

通过Wrangler工具登录Cloudflare账户，Wrangler是Cloudflare提供的用于管理Workers、D1数据库等资源的命令行工具，执行以下命令进行登录：

npx wrangler login

运行该命令后，系统会自动打开浏览器，跳转到Cloudflare的授权页面，按照提示完成授权操作，授权成功后，Wrangler便与你的Cloudflare账户建立连接，后续可通过它对Cloudflare资源进行操作。

四、创建Cloudflare D1数据库并设置架构

  1. 使用Wrangler创建名为twikoo的D1数据库，在命令行执行：
npx wrangler d1 create twikoo

执行此命令后，终端会输出数据库的相关信息，其中database_name和database_id这两行信息至关重要，需将其复制下来，用于后续配置。


{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "twikoo",
      "database_id": "56def18d-b46a-42c8-bc99-0214e58f9a54"
    }
  ]
}
  1. 打开项目目录下的wrangler.toml文件（若不存在，可手动创建），将刚刚复制的database_name和database_id粘贴进去，替换原有的对应值，使项目与创建的D1数据库建立关联。
  2. 为D1数据库设置架构，Twikoo项目中包含定义数据库表结构和初始数据的schema.sql文件，执行以下命令，将该架构应用到Cloudflare D1数据库：
npx wrangler d1 execute twikoo --remote --file=./schema.sql

此命令会远程连接到之前创建的twikoo数据库，并依据schema.sql文件的内容创建相应的表结构及可能的初始数据，确保数据库满足Twikoo评论系统的存储需求。

image-20250617190614918

五、创建Cloudflare R2存储

Cloudflare R2可用于存储Twikoo评论系统相关的文件，如上传的图片等（尽管当前部署方案中对R2的使用存在一定限制，但创建步骤仍需完成），通过以下命令创建名为twikoo的R2存储桶：

npx wrangler r2 bucket create twikoo

创建完成后，找到wrangler.toml文件中r2_public_url字段，将其值更新为新创建的R2存储桶的域名，确保项目能正确访问R2存储资源。

[vars]
R2_PUBLIC_URL = “https://twikoo.soniachen.com”

image-20250617191350846

六、部署Cloudflare Worker

完成上述配置后，即可将Twikoo评论系统部署到Cloudflare Workers，执行以下命令进行部署：

npx wrangler deploy --minify

--minify参数用于对代码进行压缩，以进一步减小捆绑包大小，提升部署效率与性能。部署过程可能需要一些时间，完成后，命令行中会输出类似https://twikoo-cloudflare.<your username>.workers.dev的访问地址。若部署成功，在浏览器中访问该地址，应能看到类似于{"code": 100, "message": "twikoo云函数运行正常，请参考https://twikoo.js.org/frontend.html完成前端的配置", "version": "1.6.33"}的提示信息，这表明Twikoo的后端服务已在Cloudflare上成功部署。

七、前端配置

  1. 在博客或网站的前端代码中，找到需要添加评论功能的页面。若使用Twikoo官方提供的前端初始化代码，需将其中的envId字段值设置为第六步中得到的Cloudflare Worker访问地址（包含https://前缀）。例如：
twikoo.init({
    envId: "https://twikoo-cloudflare.<your username>.workers.dev",
    el: "#tcomment",
    // region: 'ap-guangzhou', // 环境地域，默认为ap-shanghai，如果您的环境地域不是上海，需传此参数
    // path: 'window.location.pathname', // 用于区分不同文章的自定义js路径，如果您的文章路径不是location.pathname，需传此参数
    // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表https://github.com/imaegoo/twikoo/blob/dev/src/js/utils/i18n/index.js
    // onCommentLoaded: function () {
    //     console.log("评论加载或评论成功");
    // }
});
  1. 确保前端页面包含用于显示评论区的HTML元素，其id需与上述代码中el字段指定的值一致（如<div id="tcomment"></div>），这样Twikoo前端脚本才能正确渲染评论区。
image-20250617192932097

八、配置邮件通知（可选）

Twikoo支持在有新评论时发送邮件通知管理员，由于nodemailer包的兼容性问题，在Cloudflare Workers环境中，无法直接通过SMTP集成发送邮件，而是通过SendGrid的HTTPS API实现邮件通知功能，具体步骤如下：

  1. 注册一个可用的SendGrid账户（SendGrid提供免费套餐，每天可发送多达100封邮件）或Mailchannels账户（每月免费3000封邮件），并在账户设置中创建一个API Key，用于后续验证身份。
  2. 在Twikoo的配置中设置相关邮件参数，找到配置文件中与邮件通知相关的部分，设置以下字段：
sender_email: "发件人邮箱地址", // 需在SendGrid中进行验证
sender_name: "显示的发件人名称",
smtp_service: "sendgrid",
smtp_user: "提供任意非空值",
smtp_pass: "之前创建的SendGrid API Key",

此外，还可根据需求设置其他配置值，以自定义通知邮件的外观和内容。完成设置后，在配置页面点击“发送测试邮件”按钮，检查邮件通知功能是否正常工作，同时需确保邮件提供商不会将收到的通知邮件归类为垃圾邮件。

九、常见问题及解决方法

  1. 捆绑包大小超限：若在部署时遇到捆绑包大小超过Cloudflare Workers免费套餐1MiB限制的问题，除了前文提到的删除特定包文件内容外，还可检查项目中是否引入了不必要的大型依赖，精简代码，减少不必要的资源加载。
  2. 数据库连接问题：若出现无法连接到Cloudflare D1数据库的情况，首先确认wrangler.toml文件中database_name和database_id是否填写正确，其次检查网络连接是否正常，确保能访问Cloudflare的服务。
  3. 前端评论区无法显示：前端评论区无法正常显示时，检查浏览器控制台是否有报错信息，可能是envId配置错误、前端脚本加载失败或HTML元素id不匹配等原因导致，根据具体错误提示进行排查修复。

通过以上详细的Cloudflare部署方案，可将Twikoo评论系统高效地集成到网站中，利用Cloudflare的优质服务提升评论系统的性能与稳定性，为网站访客打造良好的互动交流环境。