Astro + Twikoo 实现评论功能

Updated: at 22:20

Twikoo

https://twikoo.js.org/

一个简洁、安全、免费的静态网站评论系统。

前端配置

参考该博主实现方式，配置前端

服务端部署

因为自己有云服务器，所以打算采用私有部署的方式，当然如果你没有，或者嫌麻烦，可以选择其他方式（如云函数）。

1 安装 node

https://nodejs.org/zh-cn/download/package-manager

# layouts.download.codeBox.installsNvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# layouts.download.codeBox.downloadAndInstallNodejsRestartTerminal
nvm install 20

# layouts.download.codeBox.verifiesRightNodejsVersion
node -v # layouts.download.codeBox.shouldPrint

# layouts.download.codeBox.verifiesRightNpmVersion
npm -v # layouts.download.codeBox.shouldPrint

QQ_1723643485697.png

2 安装 & 运行 tkserver

npm i -g tkserver

下载很慢，切换淘宝镜像

npm config set registry https://registry.npmmirror.com

# 直接输入 tkserver 即可启动 twikoo 服务，以下为运行成功的日志
root@hcss-ecs-1150:~# tkserver 
8/14/2024, 10:00:26 PM Twikoo: Twikoo database stored at /root/data
8/14/2024, 10:00:26 PM Twikoo: Connecting to database...
8/14/2024, 10:00:26 PM Twikoo: Twikoo is using loki database
8/14/2024, 10:00:26 PM Twikoo: Twikoo function started on host :: port 8080
8/14/2024, 10:00:26 PM Twikoo: Connected to database

3 将 tkserver 注册为服务，并设置开机自启

3.1 创建 twikoo 服务配置

vim /etc/systemd/system/twikoo.service

[Unit]
Description=Twikoo Service
After=network.target

[Service]

# 如果需要加载 nvm 环境（可选）
ExecStart=/bin/bash -c 'source /root/.nvm/nvm.sh && tkserver'

Restart=on-failure

# 以 root 用户身份运行（如果不需要 root 权限，可以使用其他用户）
User=root

[Install]
WantedBy=multi-user.target

3.2 重载 systemd 配置

systemctl daemon-reload

3.3 启动 twikoo service

systemctl start twikoo

3.4 设置开机自启 （可选）

systemctl enable twikoo

其他命令：

# 查看服务运行状态
systemctl status twikoo
# 查看服务运行的日志 (当运行失败时，也可以通过这个命令查看具体的原因）
journalctl -u twikoo

4 https 代理

在本地测试没问题，但是正式部署到线上环境却出现评论失败

查看控制台发现有报错This request has been blocked; the content must be served over HTTPS.

这是因为我正式博客域名是有SSL证书的，可通过https访问，而这个而 twikoo 服务端地址我用的是 http 协议，所以会被浏览器拦截。

解决办法：将 twikoo 服务端改为通过 https 访问。

具体实现是利用 nginx 配置反向代理, 配置文件如下：


server {
    listen 443 ssl;
    server_name blog-comment.52dev.top;
    
    ssl_certificate /etc/nginx/ssl/blog-comment.52dev.top.pem;
    ssl_certificate_key /etc/nginx/ssl/blog-comment.52dev.top.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://www.52dev.top:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocket 支持（如果应用使用 WebSocket）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

这样配置后，请求 https://blog-comment.52dev.top 就可以被代理到 http://www.52dev.top:8080 （twikoo server 运行的端口）

在前端配置 envId 就填 https://blog-comment.52dev.top

版本升级

前端

直接修改 Twikoo CDN 地址中的 x.x.x 数字版本号即可~

服务端

参考官方针对私有化部署的升级教程：https://twikoo.js.org/update.html#针对私有部署的更新方式

1 停止旧版本 kill $(ps -ef | grep tkserver | grep -v 'grep' | awk '{print $2}')

2 拉取新版本 `npm i -g tkserver@latest`


3 启动新版本 `nohup tkserver >> tkserver.log 2>&1 &`

查看当前安装的版本：

# 查看全局安装的包
npm list -g
/root/.nvm/versions/node/v20.16.0/lib
├── corepack@0.28.2
├── npm@10.8.1
└── tkserver@1.6.40
# 查看特定包的版本
npm show tkserver version
1.6.40

遇到的问题

1 评论组件加载缓慢

问题描述：评论组件加载缓慢

分析：通过查看网络请求日志发现，加载 Twikoo CDN 耗时较久

解法：更换 CDN 镜像；参考：https://twikoo.js.org/frontend.html#更换-cdn-镜像

230b701fded088c5cf294c087a9775c5.png

image.png