Skip to content
Go back

使用 Dokploy 部署 Remark42 评论系统并和 Astro 进行集成

Edit page

0x00 前言

既然恢复了 Blog 的更新,我肯定希望能有看我博客的人和我进行互动,可是目前的样子,除了给我发邮件,好像没有其他更简便的方式,所以我决定给博客添加评论系统。

很久之前我看到一些介绍评论系统的文章,我试着在 DEVONThink 中检索相关的信息,最终发现了曾经收藏的一篇博文:从零开始搭建你的免费博客评论系统(Remark42 + fly.io),其内容里提到了另一篇作者在更换评论系统时参考的文章:更换博客评论系统。这两篇文章给了我很多帮助,尤其是第二篇,里面详细列出了市面上比较常见的评论系统,并且作者贴心的做了分类并写了自己的评价,让我很方便的缩小了选择的范围。

最终,我决定从善如流,和这两位作者一样,选择 Remark42 作为博客的评论系统。

0x01 使用 Dokploy 部署 Remark42 后端服务

我有一台自己的 VPS,并且我部署了 Dokploy 管理服务器,如果你没使用过 Dokploy 的话,非常推荐尝试一下。关于 Dokploy 的具体信息你可以用 Google 搜索一下,我这里就不赘述这部分内容。

在决定使用 Remark42 的那一刻我就已经想好了要部署在 Dokploy 上,物尽其用嘛。

根据 Remark42 的文档,项目提供了一份 Docker Compose 文件,方便使用 Docker 部署服务的人群。在 Dokploy 上使用的方法也很简单,在 Create Service 时选择 Compose,创建成功并进入服务后点击 Raw,在编辑框中粘贴 Remark42 的 Compose 代码就行。

接着就是根据自己的需要,参考 Remark42 的后端配置,添加自己用得着的环境变量,我最终使用的配置放在下面以供参考:

services:
  remark:
    image: ghcr.io/umputun/remark42:latest
    container_name: "remark42"
    hostname: "remark42"
    restart: always

    logging:
      driver: json-file
      options:
        max-size: "10m"
        max-file: "5"

    # uncomment to expose directly (no proxy)
    # ports:
      # - "8080:8080"
    #   - "443:8443"

    # uncomment to expose to reverse proxy running on the same host but not in docker
    # ports:
     # - "127.0.0.1:3030:8080"

    environment:
      - REMARK_URL=https://remark42.ariasay.me
      - SECRET=xxxxxx
      - SITE=blog.ariasay.me
      - DEBUG=false
      - TIME_ZONE=Asia/Shanghai
      - NOTIFY_ADMINS=telegram
      - NOTIFY_TELEGRAM_CHAN="xxxxxx"
      - TELEGRAM_TOKEN="xxxxxxx"
      - ADMIN_SHARED_ID="xxxxxxxxx"
      - AUTH_GOOGLE_CID=xxxxxxx
      - AUTH_GOOGLE_CSEC=xxxxxxx
      - AUTH_GITHUB_CID=xxxxxxxx
      - AUTH_GITHUB_CSEC=xxxxxxx
      # Enable it only for the initial comment import or for manual backups.
      # Do not leave the server running with the ADMIN_PASSWD set if you don't have an intention
      # to keep creating backups manually!
      # - ADMIN_PASSWD=<your secret password>
    volumes:
      - remark42:/srv/var


volumes:
  remark42:

关于这份配置中用到的 volumes,有些地方需要说明一下。

Volume 配置方式和 Backup Volume

官方文档是直接在 Services 字段中使用绑定挂载的方式配置 volumes 的存储位置(如下面的代码所示),这么写并没有问题,项目可以如期启动,但如果你要用到 Dokploy 的 Backup Volume 服务的话,这样写就有问题。经过我的测试,通过这种方式定义的 volume,使用 Backup Volume 会找不到需要备份的目标数据,备份服务可以正常运行,但是数据是空的。

services:
  remark:
    image: ghcr.io/umputun/remark42:latest
    container_name: "remark42"
    hostname: "remark42"
    restart: always
    volumes:
      - /srv/xxxx:/srv/var

更推荐的写法是使用命名卷配置 Volume,只需要把上面的配置改成下面这种:

services:
  remark:
    image: ghcr.io/umputun/remark42:latest
    container_name: "remark42"
    hostname: "remark42"
    restart: always
    volumes:
      # 1. 修改这里
      # 这行代码的意思是:
      # "使用一个名为 'remark42_data' 的 Docker 卷..."
      # "...并将其挂载到容器的 /srv/var 文件夹"
      - remark42_data:/srv/var

# 2. 在这里添加“单独的 Volumes 字段”
# (确保它与 'services' 位于同一缩进级别)
volumes:
  remark42_data:
    # (这里可以留空,Docker 将使用默认驱动程序)

这样一来,在使用 Backup Volume 的时候,就能够正常的发现容器使用的 Volume 了。

当然,好处不只是这样。另一个好处是把 Volume 放在了 Docker 的框架中进行管理,你可以使用 docker volume <arg 命令行对 Volume 做展示和操作,而且你也不需要自己管理数据的存储路径,这一切 Docker 都会负责。

你可以使用 docker volume inspect remark42_data 这个命令查看 remark42_data 的信息,代码里的 Mountpoint 字段就是数据最终存储的位置。

[
    {
        "CreatedAt": "2025-11-02T15:30:00Z",
        "Driver": "local",
        "Labels": {},
        "Name": "remark42_data",
        "Options": {},
        "Scope": "local",
        "Mountpoint": "/var/lib/docker/volumes/remark42_data/_data" 
    }
]

到这里,和 Remark42 后端相关的部分就算是解决完了,你可以使用服务器的 IP 或者给 Service 绑定一个域名后,访问 http(s)://<域名/IP>/web查看 Remark42 的 Demo 页面,如果能看到,就说明服务运行正常。

接下来该考虑如何和 Astro 做集成。

0x02 将 Reamrk42 集成到 Astro 中

贴心的是,官方文档专门有一个章节介绍如何在 Astro 中使用 Remark42。不过这里有一个小乌龙,我第一次看文档的时候没发现,直到需要该 Astro 代码的时候才发现,文档并不是使用的 Astro 语法实现的组件,而是使用 Svelte 或者 Preact 编写的组件。

考虑到语言的熟悉程度,最终我选择了 Preact 的方案,这就要求项目要按照 astro/preact 的扩展,好在跟着文档的指导这部分很快就弄完了。

Comment.tsx 的实现直接参考 Remark42 文档中的代码就行,我这里只展示下我使用的 Remark42 的前端配置:

var remark_config = {
  host: "https://remark42.ariasay.me",
  site_id: "blog.ariasay.me",
  components: ["embed", "counter"],
  max_shown_comments: 20,
  // simple_view: true,
  theme: "light",
  no_footer: true,
};

文档里的代码用到了 url 字段,但根据前端配置里字段的说明,url 是一个选填字段,它会自动获取当前的页面地址(host + pathname,不包含 search 参数),并将评论和这个地址绑定,文档提供的代码只是把路径最后的 / 删掉而已,所以直接使用默认配置就行。

最后,你可以根据自己的需求增加一些间距和样式,Remark42 和 Astro 的集成就完成了。

0x03 设置 Remark42 的管理员账号

在 Compose 文件里有一个 ADMIN_SHARED_ID 的环境变量,这就是用来配置管理员信息的,但在配置这个字段之前,你至少需要新增一种登录方式。

我最开始配置的是 Google OAhth,你也可以根据自己的需要配置其他的。等开启了登录入口,你可以在上面提到的 /web 页面登录并随便发一条评论。点击你新增那条评论的名称,页面右侧会出现一个弹出框,在顶部你会发现一串字符串,那就是你这个账号的 ID,之后将这个 ID 填写到 ADMIN_SHARED_ID 里就行。

如果有多个 ID 需要配置成管理员,可以用逗号把 ID 隔开。

ADMIN_SHARED_ID="id1, id2, ....."

如果还有什么不明白,可以参考 从零开始搭建你的免费博客评论系统(Remark42 + fly.io)文档

0x04 最后

到这里,Remark42 已经可以保持基本的运行。

我之所以说基本是因为确实还缺少一部分配置没有加,比如新增评论后对于管理员的通知,以及 A 留下一条评论,B 做了回复,对于 A 的通知。

这些通知会用到 SMTP 或者 Telegram,而我一开始的打算是先完成 Telegram 的配置,让我能知道有新的留言,可是不知道问题出在哪,我按照文档获取了 Telegram 的各种必要信息,并且添加到了环境变量。从日志里看,请求有被正常的触发,可是我在 Telegram 中始终无法收到信息。在这个问题上折腾了比较长的时间后我放弃了,后面有兴趣了再继续研究。

之后我打算把 SMTP 接上,如果有必要的话,我会写一篇文章记录这个过程。


Edit page
Share this post on:

Previous Post
离职 3 个月后的经历分享(上)
Next Post
找到你的「自由数字」