【hexo博客】在Azure上搭建Waline评论服务

hexo博客
,

在 Azure 上搭建 Waline 评论服务

出于折腾的理由，我准备把评论系统从 valine 换成 waline。waline 有更吸引我的理由，例如支持了更多种类的数据库（valine 只支持 learn cloud），完全开源（虽然我也不会看源代码吧）。参考官方网站 https://waline.js.org 的信息进行一个配置。

最近白嫖了微软 Azure 的学生优惠 ，功能还挺多，所以研究了一下 Azure 的服务器和 devops。现在已经把博客迁移到 Azure 的静态 Web 服务了。所以我就想在 Azure 上搭建 Waline 的服务端。

数据库端

在 Azure 创建 MySQL 数据库

我选择将数据库搭建在 Azure 上。点击 Azure Database for MySQL，选择灵活服务器（预览）：

image-20210902172105738

可以申请免费的 32 GB 的存储空间，具体方式见 https://docs.microsoft.com/zh-cn/azure/mysql/flexible-server/how-to-deploy-on-azure-free-account，后面的设置参考这个即可。

初始化数据库

按照 waline 的指示，需要导入 waline.sql 文件进行初始化。在此之前，先配置防火墙，允许连接到数据库：

image-20210903141548743

在设置->网络中，勾选允许从 Azure 内的任何 Azure 服务公开访问此服务器，这是为了能够让 waline-server 访问到数据库。如果你需要从其他位置连接数据库，那么在下面填写你的 ip 地址即可。

然后连接到 mysql，导入 waline.sql : （在导入之前，确定 ${DB_NAME} 对应的数据库存在。）

1
mysql –u ${USER_NAME} -D ${DB_NAME} -p < ./waline.sql

服务端

在 Azure 应用程序服务中搭建 Waline

注册好 Azure 账户后，在 Azure Portal 中创建一个应用程序服务：

image-20210902154341607
  1. 如果之前没有资源组，可以新建一个资源组。我这里把我的静态博客和这个 Web 应用放在同一个资源组里了。
  2. 输入 Web 应用的名称。
  3. 选择 Docker 容器发布。Waline 提供了 Docker 的部署方式，这里用 docker 容器比较省事。
  4. 选择 East Asia（东亚），这样服务器会建立在香港，访问速度会快一些。
  5. 选择 F1 免费计划。

点击下一步，设置 docker：

image-20210902154929384

  1. 我选择单个容器，镜像源选 dockerhub。docker hub 上有 waline 容器，我一开始还担心没有的话是不是要自己制作镜像传到某个镜像源。
  2. 选择使用公开镜像，lizheming/waline，启动命令空出即可。

剩下的内容一直下一步即可，然后点击创建生成应用程序服务。理论上等待一会，就可以通过给出的网址来访问 waline 了。如果配置出错，可以到部署->部署中心修改所使用的镜像，也可以到监视->日志流来查看部署日志，判断哪里出错了。

设置环境变量

按照 waline 的官方文档，需要配置好环境变量。在设置->配置处添加对应的字段即可。

image-20210903142519857

然后容器就会重新部署，理论上 waline 的页面就可以正常访问了。

客户端

按照官网的描述，我在放置评论的位置添加了下列代码：

1
2
3
4
5
6
7
8
9
10
11
<script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
<div id="waline"></div>
  <script>
    Waline({
      el: '#waline',
      serverURL: 'https://xxxxxxxxxxxxx',
      dark: 'body.dark',
      meta: ['nick', 'mail'],
      requiredMeta: ['nick'],
    });
  </script>

最初遇到的问题是，waline 的评论显示不会随着主题切换而切换。研究了一下发现要添加 dark 字段。为此我又修改了我的亮暗切换，在 <body> 标签添加 “dark” 样式，来让 waline 检测到。