博客折腾#02-接入Remark42评论系统

October 12, 2024

前言

之前我的博客一直处于Web1.0的时代，只能展示不能互动，早就想给自己的博客增加评论系统了。看了一众大佬们写的关于「Remark42」的博客文章（Reorx、pseudoyu、好一则博）后，也想着搞一下「Remark42」开源博客评论系统。

其实在之前的「周报-Remark42折腾」中就提到过「Remark42」评论系统了。但当时因为「Remark42」存在bug（见issue#1812）和我使用的中国大陆的服务器（外社交媒体账号鉴权受限）等问题，就暂时搁置了。

前一阵子购买了一个1c1g的国外服务器，「Remark42」的作者也将bug修复，于是我卷土重来!!!

「Remark42」支持多种方式登录，见Atuhorization。我将使用Anonymous匿名、Email、Telegram和Github的登录方式。

服务端安装

我使用docker compose的方式进行服务部署。首先下载并修改官方提供的「docker-compose.yml」文件。

vim docker-compose.yml

配置文件

下面是我的docker-compose.yml文件。

version: "2"

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

    logging:
      driver: json-file
      options:
        max-size: "10m"
        max-file: "5"
    ports:
      - "8052:8080"
    environment:
      - REMARK_URL=https://remark42.demo.com
      - SECRET=xxxxx
      - SITE=tunan-remark
      - DEBUG=true
      - AUTH_ANON=true
      - AUTH_GITHUB_CID=xxxx
      - AUTH_GITHUB_CSEC=e2cdb5acf63680d2d10fc14d600bcc12fb5c0cf3
      - AUTH_TELEGRAM=true
      - TELEGRAM_TOKEN=xxxxx
      - AUTH_EMAIL_ENABLE=true
      - AUTH_EMAIL_FROM=xxx@gmail.com
      - SMTP_HOST=smtp.gmail.com
      - SMTP_PORT=465
      - SMTP_TLS=true
      - SMTP_USERNAME=xxx@gmail.com
      - SMTP_PASSWORD=xxxxxxx
      - NOTIFY_USERS=telegram
      - NOTIFY_ADMINS=telegram
      - NOTIFY_TELEGRAM_CHAN=-1000000000001

    volumes:
      - ./var:/srv/var

端口映射

这里我将8080端口映射到宿主机的8085端口上，你可以自定义自己的端口映射。

环境变量

「Remark42」的环境变量有很多，见Backend configuration。上面environment中的内容就是我所需的环境变量。

  • REMARK_URL: 要为部署的Remark42服务提供一个域名。请看后文的Nginx域名映射和默认同一根域名下生效的内容。
  • SECRET：仅仅用于服务端生成JWT的，这里是官方demo中的密钥，自己起个复杂点的然后更换一下，防止JWT被篡改。
  • SITE: 站点名称

登录鉴权-匿名方式

  • AUTH_ANON：是否允许匿名评论

登录鉴权-Github

  • AUTH_GITHUB_CID 与 AUTH_GITHUB_CSEC: 去GitHub OAuth App 生成 Client ID 与 Client Secret，见文档介绍：GitHub Auth

登录鉴权-Telegram

登录鉴权-邮箱（以Gmail为例子）

  • AUTH_EMAIL_ENABLE：开启邮箱登录方式
  • AUTH_EMAIL_FROM: 邮箱发送人邮箱
  • SMTP_HOST=smtp.gmail.com
  • SMTP_PORT=465
  • SMTP_TLS=true
  • SMTP_USERNAME 邮箱发送人邮箱账号
  • SMTP_PASSWORD SMTP密码

我使用的是Gmail，不同的邮箱设置见官方文档：Enail Settings

通知方式-通过telegram通知管理员

  • NOTIFY_ADMINS: 当有用户发表评论时，通过telegram通知给自己
  • NOTIFY_TELEGRAM_CHAN: 创建一个频道，设置通知的频道id，将前面创建的机器人设置为频道的Admin并赋予Post Message的权限。具体见Notifications for administrators

频道id的获取方式可以自行谷歌一下，评论完成会立即发送消息，如果失败可以通过日志查看，见下文如何查看服务端日志。

通知方式-通过telegram通知User

  • NOTIFY_USERS: 当用户能够通过telegram登录时，点击接收消息通知，后续的回复就可以接收到消息了。

效果：

image-20241012092059274

启动

# 启动服务
docker-compose -f docker-compose.yml up -d

服务端日志

如果启动或者使用过程中有报错，可以使用docker logs查看容器日志。

更改配置后重启

# 停止并删除服务
docker-compose -f docker-compose.yml down

# 启动服务
docker-compose -f docker-compose.yml up -d

Nginx域名映射

设置域名映射和https证书的安装。主要是在nginx.conf配置文件中增加下面的内容，然后进行https证书安装。

	server{
                server_name remark42.demo.com;

                location / {
                        proxy_pass  http://127.0.0.1:8052;
                        proxy_redirect          off;
                        proxy_set_header        X-Real-IP $remote_addr;
                        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header        Host $http_host;
                }

                gzip on;
                gzip_types text/plain application/json text/css application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+xml;
                gzip_min_length 1000;
                gzip_proxied any;
}

具体如何操作可以看我之前的一篇文章：Nginx多域名解析、https证书

React 中添加评论模块

按照官方给出的Frontend Configuration+ Using Remark42 in Gatsby projects来进行前端的修改。

具体的代码不在此展开了。见我的github代码仓库

添加管理员

「Remark42」管理员登录特别简单，自己通过某种方式（不要是匿名的）登录了评论系统后，点击头像就能获取到user_id。

image-20241012092355149

比如我这里是github登录生成的user_id，复制下来然后将其添加环境变量ADMIN_SHARED_ID中，重启服务。

  • ADMIN_SHARED_ID=github_xxxxxx
# 重启服务
docker-compose -f docker-compose.yml down
docker-compose -f docker-compose.yml up -d

评论数据迁移

如果有一天换了服务器了，想迁移数据，也非常简单。「Remark42」使用「blotdb」作为底层存储。当通过上述方式安装部署完成后，所在目录会有一个/var文件夹，只要把原来的这个文件夹替换到新的服务器的对应位置就可以了。

记得重启服务，这样才能将该文件重新挂载到容器，从而生效。

这个方法比较简单粗暴，官方也给出了更优雅的方案：Automatic and Manual Backup + Restore Backup

如果是想要将两个Remark42服务中的评论进行合并，官方也给出了解决方案：Import/restore without removing existing comments

默认同一根域名下生效

Remark42默认Remark42服务所在域名和所客户端网站域名保持在同一根域名时才可用，比如我部署的Remark42服务就和我的博客服务的根域名一致，。

如果要跨域名，则需要额外的参数设置，具体见Configure Instance on a different domain

最后效果

image-20241011202848245

欢迎大家前来体验！我的博客地址：https://www.tunan.fun/

Comments