缩略图

迁移评论系统至 Artalk

· 技术

::: tip

本文封面来自 GitHub: ArtalkJS/Artalk,我后期使用 Photoshop 简单进行了 16:9 适配。

:::

缘由

我的博客原先使用 Waline 作为评论系统。到了一两个月前,也就是我重构网站那一会,我发现继续使用 Waline 将会面临以下两个问题:

  • 由于我的 Waline 实例部署在 Vercel 上、借助 Serverless Functions 运行,在添加评论通知(仅邮件)的情况下评论需要大致 6s,而这 6s 包括了 Waline 处理邮件通知的时间和极大可能的 Serverless Functions 冷启动时间;
  • Waline 的后端实在过于简单,当时迁移数据库到 TiDB Cloud 后出现了几个空账户我还没法删除,自己的个人邮箱更换新域名也没有办法在后端直接更改。

嘛,有困难就要找解决方法。正好在逛友站 的友站 时注意到了 Artalk 这一款评论系统,后端强大、功能完善使我十分心动,于是我就开始计划评论系统的迁移。 哪知,当天有主意当天就做完了,令人感叹

部署

服务端部署

Artalk 2 后端采用 Go 编写,要想跑起来肯定是需要服务器的啦,我这里使用了 表情酱 友情提供的虚拟主机来部署ww。

::: tip

Artalk 支持站点隔离,一个实例可提供多个站点的评论功能。

如果哪一天表情酱也开始搞博客了,我就拉他一起来用 Artalk 啦ww。

:::

为了方便管理,我这里采用了 Docker 部署。不过,因为后面的一些需求,我们这里要先来创建一个子网:

# 语法格式
docker network create --subnet=[网段] [子网名称]

# 示例
docker network create --subnet=172.20.0.0/16 rc-network

接着,拿到官方的 Docker 部署命令,来稍稍做一下修改:

docker run -d \
    --net rc-network \
    --ip 172.20.0.2 \
    --name artalk \
    -p 8080:23366 \
    -v $(pwd)/data:/data \
    --restart=always \
    artalk/artalk-go

容器创建完成后,你会发现它已经划到了 rc-network 子网并分配到了 172.20.0.2 这个 IP。这个到下面的部分我们才会用到,先不要着急,来配置一下 Artalk 的管理员账号:

docker exec -it artalk artalk admin

接下来它会提示你输入用户名、邮箱和密码以创建超级管理员。创建好之后访问 服务器IP:8080 并输入刚刚设定的超级管理员的邮箱和密码,即可进入 Artalk 后台。

配置 Cloudflare Tunnel

在开始完全计划的前一天,我尝试登录表情酱的这一台虚拟主机,但 ssh 总是显示连接超时;今天则是通过对应的域名登录上了这一台虚拟主机,也就是说我现在不知道这个虚拟主机的公网 IP 是什么。

不知道也不是不行,正好可以试一下 Cloudflare Tunnel,也就是之前的 Argo Tunnel,可以将内网资源安全的连接上 Cloudflare 网络。

首先前往 Cloudflare 的 Zero Trust 仪表盘,在侧边栏依次找到 AccessTunnels,选择 Create a tunnel 以新建一个 Tunnel。创建时会要求你填一个 Tunnel 名字,我的建议是填一个比较方便辨认的;接下来就是在服务器上安装并运行 Tunnel connector,因为上面 Artalk 采用了 Docker 部署,所以在 Choose your environment 处选择 Docker,拿到 Docker 部署命令之后再来修改一下:

docker run -d \
    --net rc-network \
    --ip 172.20.0.3 \
    cloudflare/cloudflared:latest \
    tunnel \
    --no-autoupdate run \
    --token [你的密钥]

::: warning 提醒

只要新增 --net--ip 两行即可,其它按照 Cloudflare Tunnel 给你的 Docker 部署命令来就行。

:::

这里将 Tunnel Connector 与 Docker 分配在了同一个子网中,易于管理。

执行上述的 Docker 部署命令并部署成功 Tunnel connector 后,返回 Zero Trust 仪表盘,你会发现底下的 Connectors 多出了一个服务器,点 Next 继续即可。最后便是设置 Tunnel 路由,默认是创建 Public Hostname 就不要变动了;上面的 Public hostname 按你自己喜好来设置,下方的 Services 我是设置了 Type: HTTP 以及 URL: artalk:23366

::: tip

Docker 可以通过 容器名称:端口 来连接到这个容器,所以在这里就不用担心 Docker 容器 IP 的变动了。

:::

Tunnel 部署完成后,你可以尝试访问你设置的 public hostname 来验证是否能够访问到 Artalk 后端。

添加 Redis

为了让 Artalk 加载数据时速度更快,这里就来多加一个 Redis。

先来创建一个 Redis 容器:

docker run -d \
--net rc-network \
--ip 172.20.0.3 \
--name redis \
redis

执行命令后,一个没有用户密码的 Redis 容器就创建好了,因为仅 Artalk 使用所以也不需要认证。

访问 Artalk 后台,在设置里找到「缓存」一项。先勾选「启用缓存」,并将缓存类型设置为 redis,最后将缓存服务器地址设置为 redis:6379 并保存即可。记得注意「Redis 配置」的连接方式一定要是 TCP。

保存完毕后重启一次 Artalk 容器,如果没有什么问题,那就恭喜你完成部署这一部分啦~

接入到博客

因为 Artalk 的文档也采用了 VitePress,我这里只要参考 官方的参考 即可,不要忘了在参考之前先在项目里 pnpm add artalk 喔。

接入后在本地 dev 测试可能会报 请求无效,请检查 trusted_domains 配置项,无法获取评论列表数据 这一行字样,其实问题不是很大,部署到生产环境之后就没什么问题啦。

::: tip

由于 Vuetify 切换 暗色 / 亮色 主题的 DOM 实在太奇怪了(几乎是每一个组件都带有一个 v-theme--dark,不知道是不是我没配置好...),所以手动切换 暗色 / 亮色 主题后 Artalk 不会主动跟随,到时候我再想想怎么办吧。

修改本文时已切换到 Bulma,所以深色模式暂时取消。

:::

后记

因为没想到迁移 Artalk 所需要的时间这么短(几个小时不到),所以很多东西没来得及整,你留下的评论我并不能第一时间收到。

另外一个新域名可能不久就要来到了,到时候 Artalk 将会解析在上面,再慢慢整一些细节的东西吧~

本文于 2024/2/6 进行二次修改。

这篇文章已发布 313 天
文章内所描述的内容可能已发生改变,请谨慎参考。
Loading Artalk...