KKapi+ISpeak说说页面部署

前言

感觉原来的 Artitalk 说说不好康，在开往里发现好多博客都用的说说功能叫叨叨点啥，看了看作者的说说页面，可以插入图片和标签分类，还有仅自己可见的功能，感觉挺不错的（实际是自己想折腾）所以就整一个。自己在部署过程中实在是踩了不少的坑，而且作者的文档感觉写的也不算完善，所以打算自己记录一下。

项目结构

作者的文档中各种仓库链接属实给我跳晕了，最后理出来的项目分为以下部分：

kkapi。是作为说说的后端部分，连接 MongoDB 数据库，还有一个kkadmin的管理页面
ISpeak。说说的主体部分，依赖于后端的 kkapi ，分为前端的展示页面，和一个对接后端的发布说说页面。

作者文档中给出很多部署方法，白嫖版的就是 vercel 后端 api + 管理界面 + MongoDB 提供的云服务，但是个人感觉 vercel 经常被墙，所以部署的 api 感觉也不会稳定，而且考虑到数据的存放问题，所以我选择的是都部署到自己服务器上。

后端部署

Docker 安装 Mongodb

安装可以参考菜鸟教程的 Docker 安装 MongoDB 。因为之前听过 MongoDB 的未授权访问，所以考虑到安全性问题，创建容器的时候添加 MONGO_INITDB_ROOT_USERNAME 和 MONGO_INITDB_ROOT_PASSWORD 设置用户的账号密码，开启 Docker MongoDB 的身份验证。考虑到数据未来的迁移可以通过 -v 挂载宿主机的一个目录。可以修改默认端口再减少一些风险。最后我启动的命令如下

1
2
3
4
5
6
7
docker run -d --name mongodb \
	-p xxxxx:27017 \
	-v /my/own/datadir:/data/db \
	-e MONGO_INITDB_ROOT_USERNAME=mongoadmin \
	-e MONGO_INITDB_ROOT_PASSWORD=secret \
	--restart=always
	mongo

之后可以使用工具测试一下连接。

kkapi 部署

和项目文档中的教程差不多，要注意使用的 node 版本请高于 16.0.0

首先克隆项目源码 git clone https://ghproxy.com/https://github.com/kkfive/kkapi-open.git
接下来项目需要安装的工具 yarn 和 pm2，分别是 npm i yarn -g npm i pm2 -g
然后安装项目所需依赖 yarn install 。
之后再执行 yarn build 编译项目。这里我的小鸡顶不住编译所以自己在本地编译传上去了 💧。
在项目文件夹创建环境变量文件，格式如

1
2
3
4
5
6
PORT=3000
DATABASE_URL=mongodb://127.0.0.1:27017/kkpaiopen?authSource=admin
DATABASE_USER=mongoadmin
DATABASE_PASSWORD=secret
# 加密密钥 测试
SECRETKEY=xxxxxxxxxxxxxxx

这里的数据库连接地址我原来还想使用 MongoDB 提供的免费云服务当数据库，但是没搞成功，所以最后使用了本地的 MongoDB，有大佬知道的可以指点一下。

使用 pm2 使用守护线程启动项目 pm2 start pm2.json

我启动项目遇到了 [PM2][WARN] Expect “restart_delay” to be a typeof [object Number], but now is [object String] 错误，这个错误原因是作者的 pm2.json 中的 restart_delay 值是字符串类型 60s 改成数值 60 就可以了。

测试项目是否成功启动可以使用 lsof -i:端口 查看端口是否被监听判断项目是否成功启动。没成功的原因大概率是因为数据库连接地址、数据库账号密码不正确。
创建初始化用户 curl http://127.0.0.1:3000/api/user/init 创建的默认用户名和密码是 admin 和 123456，这个用户名密码用来登陆可视化的管理后台，并且用户似乎只能拥有一个。

kkapiadmin（可视化管理后台）

参考官方文档中的教程，使用的 Vercel 部署的。这个墙不墙的就无所谓了，注意的坑有：

修改部署分支和生产分支为 vercel。
fork 作者仓库的时候记得把 only fork master 取消勾选。

之后登录就是用前面初始化的用户名密码，进入后台以后可以修改密码。登陆后台以后需要设置：

ISpeak 标签。因为发布说说是需要选择标签的，标签中的背景颜色值是十六进制的颜色代码
添加用户 token。需要注意！！！，添加的 token 的标题只能是 speak 不能是其他的，否则发布说说时会提示 token 不存在，发布时验证的就是字段为 speak 的 token 的值。

接下来可以在前端说说页面测试发布说说，发布说说需要输入后端 kkapi 地址、用户 id （在管理后台可以找到）、token。网址：https://ispeak-biubiu.vercel.app/

发布成功可以在后端看到发布的说说。

前端部署

我使用的是 Ispeak 搭配的 twikoo 评论，因为现在博客使用的就是 twikoo，省去了再部署评论的麻烦。根据ISpeak 文档部分，ispeak 配置项中 comment 是一个回调函数，可以自行初始化评论，参照 twikoo 评论初始化的格式。我博客中的说说页面代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="tip" style="text-align:center;">ipseak加载中</div>
<div id="ispeak"></div>
<link
  rel="stylesheet"
  href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ispeak@4.4.0/style.css"
/>

<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ispeak@4.4.0/ispeak.umd.js"></script>

<script src="https://cdn.staticfile.org/twikoo/1.6.7/twikoo.all.min.js"></script>
<script>
  var head = document.getElementsByTagName("head")[0];
  var meta = document.createElement("meta");
  meta.name = "referrer";
  meta.content = "no-referrer";
  head.appendChild(meta);
  if (ispeak) {
    ispeak
      .init({
        el: "#ispeak",
        api: "这里是后端kkapi地址",
        author: "后端用户id",
        pageSize: 10,
        loading_img: "https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif",
        comment: function (speak) {
          const { _id, title, content } = speak;
          // 4.4.0 之后在此回调函数中初始化评论
          //这里是twikoo的初始化配置，如果使用其他评论可以在这里修改
          twikoo.init({
            el: ".ispeak-comment", // 默认情况下 ipseak 生成class为 ispeak-comment 的div
            path: "/shuoshuo/?q=" + _id,
            envId: "twikoo后端地址",
          });
        },
      })
      .then(function () {
        console.log("ispeak 加载完成");
        document.getElementById("tip").style.display = "none";
      });
  } else {
    document.getElementById("tip").innerHTML = "ipseak依赖加载失败！";
  }
</script>

更新一波。被人发现了说说的评论没有独立，自己改了下配置。上面的代码加入了 32 和 37 行代码，其中 37 行 path 属性设置为你当前的说说页面路径加 q 参数，这个参数可能无所谓吧，但是 _id 是当前说说的唯一 id，因为自己在页面中测试时，说说评论请求的地址格式也是根据 37 行代码这个进行请求查询的。

Github 登陆验证（可选*）

可以发布仅登陆可见的说说，但是需要配置 Github app。

参考项目文档创建 app ，其中填写的 speak 页面路径就是 ISpeak 所在的博客路径
创建以后拥有了 Client ID 和 Client Secrets，这两项需要填写在 kkapi 后端部署的 local.env 配置中。
在 kkapi 的后端界面个人设置中填写 GitHubId 。获得方法访问 github 提供的接口 https://api.github.com/users/<Your UserName>注意替换尖括号整体为你 github 的用户名，不是昵称。

在前端页面的 speak 初始化中添加两个属性

1
2
3
4
5
6
ispeak.init({
...
speakPage："/shuoshuo/",  //这里是说说的页面路径，对应于 github app 中填写的 speak 页面路径（用双引号括起来，我不知道为啥单引号不行）
githubClientId: 'Iv1.*******',  //github app 的 Client ID
...
})

然后就可以在你的说说下面找到一个 Github 授权登陆。

完工

说说还支持 markdown 格式的图片插入，看起来更好用了，给作者点个赞。