这是一篇过期文章 241030

本来不想写的，觉得自己看文档就能实现。但是实际操作过程出现了很多状况，文档不是太详细，MySQL 部署失败…于是打算水一篇 😓。

官方文档：友链朋友圈 - 使用手册

环境

我采用的方案是 Server + SQLite 的部署方案。

根据文档要求 Python 环境为 3.8，原本我的服务器版本为 3.6，需要升级。（此处由于我忽略版本导致踩坑）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 适用于CentOS系统。安装db4-devel可能报错，那我们就跳过它......
yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel libpcap-devel xz-devel libffi-devel # 忽略 db4-devel
# 下面这些基础工具没安的可以安装
yum -y install yum vim gcc
# 下载Python包
wget https://www.python.org/ftp/python/3.8.8/Python-3.8.8.tgz
# 解压并进入目录
tar -zxf Python-3.8.8.tgz && cd Python-3.8.8 && ./configure --prefix=/usr/local/python3
make && make install
# 删除原先链接，建立软连接
rm -rf /usr/bin/python3
ln -s /usr/local/python3/bin/python3 /usr/bin/python3
rm -rf /usr/bin/pip3
ln -s /usr/local/python3/bin/pip3 /usr/bin/pip3
# 查看是否安装成功
python3 --version
pip3 --version
# 安装YAML模块
pip3 install pyyaml

安装 Git：

1
yum install -y git

项目安装

找个好地方克隆仓库：

1
git clone https://github.com/Rock-Candy-Tea/hexo-circle-of-friends.git

编辑 /hexo_circle_of_friends/fc_settings.yaml 文件：

1
2
3
4
5
LINK: [
	# 友链页地址1，修改为你的友链页地址
	# 因为博客最后生成的网页都在本地，我直接写本地地址
     { link: "http://127.0.0.1/pages/friends/", theme: "butterfly" },
]

部署与测试 API：

1
2
python3 deploy.py        # 部署
curl 127.0.0.1:8000/all  # 测试接口
ERROR: Could not find a version that satisfies the requirement aiofiles (from versions: none)

部署时如遇找不到包的错误，可尝试更换源下载。如针对以上报错，可以执行：

1
2
# 指定版本
pip3 install "aiofiles==0.8.0" -i https://pypi.tuna.tsinghua.edu.cn/simple/ # 清华源

但是依赖列表这么多，总不能一个个下。我们可以直接执行这条指令：

1
pip3 install -r /var/www/hexo-circle-of-friends/hexo_circle_of_friends/requirements.txt

完事后，重新部署即可。

Nginx 配置

由于之前 [1] 弄了好一会这个配置，为的是网站实现全程 HTTPS 访问。现在我也想让外部访问朋友圈接口时也使用 HTTPS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
    listen 443 ssl;
    server_name  localhost;
    access_log  /var/log/nginx/host.access.log  main;
    location / {
        root   /var/www/uuanqin.top;
        index  index.html index.htm;
    }
+   # 友链朋友圈 获取后端内容 前端登录（Heo 方案）
+   location ^~/fc_backend/ {
+        proxy_set_header    X-FORWARDED-FOR $remote_addr;
+        proxy_set_header    X-FORWARDED-PROTO $scheme;
+        proxy_set_header    Host   $http_host;
+        proxy_pass http://127.0.0.1:8000/;
+    }

    error_page  404              /404.html;
    ssl_certificate conf.d/cert/www.uuanqin.top.pem;
    ssl_certificate_key conf.d/cert/www.uuanqin.top.key;
    ...

}

通过 location 正则匹配，识别出 /fc_backend/ 开头的链接为朋友圈 API 的请求，并将其转发到端口 8000（朋友圈默认端口）。发送给 8000 端口的地址不包含 /fc_backend/。

当然，这里需要前端也要配合发出 /fc_backend/ 开头的请求。

修改配置文件后别忘了重启 Nginx。

1
nginx -s reload

前端部署

这里我采用了文档方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="hexo-circle-of-friends-root"></div>
<script>
let UserConfig = {
	// 填写你的api地址
	private_api_url: '/fc_backend/',
	// 初始加载几篇文章
	page_init_number: 20,
	// 点击加载更多时，一次最多加载几篇文章，默认10
	page_turning_number: 10,
	// 头像加载失败时，默认头像地址
	error_img: '/image/404.gif',
	// 进入页面时第一次的排序规则
	sort_rule: 'created', // 本地文章缓存数据过期时间（天）
	expire_days: 1
}
</script>
<script type="text/javascript" src="https://npm.elemecdn.com/[email protected]/dist/fcircle.min.js"></script>

注意 private_api_url 中的设置。

前端改密码方式

友链朋友圈项目的前端第一次登录时即设置密码，如果想要改的话则需要自行删除数据库 auth、secret 表格。

进入服务器 hexo-circle-of-friends 根目录，找到 data.db 文件

1
2
3
4
5
6
7
8
9
sqlite3
sqlite> .open data.db # 打开数据库
sqlite> .tables
# auth  friends  posts  secret
sqlite> DROP TABLE auth;
sqlite> DROP TABLE secret;
sqlite> .tables
# friends  posts
sqlite> .exit

重新部署朋友圈即可。

【可选】鱼塘 DLC

鱼塘 DLC 是 @张洪Heo 写的一个基于友链 - 朋友圈的脚本。它可以随机展示一条抓取记录。与洪涝不同的是，我稍微调整了一下 CSS 以改进页面布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div  class="title-h2-a" style="overflow: hidden;">
  <div class="title-h2-a-left">
    <div style="padding-top: 0;margin: 0 8px 0.6rem; font-size: 20px; font-weight:bold;float: left;">🎣 钓鱼</div>

  <a class="random-post-start" href="javascript:fetchRandomPost();"><i class="fa-solid fa-arrow-rotate-right"></i></a></div>

</div>
<div id="random-post" style="min-height: 32px; background: var(--heo-card-bg); border: var(--style-border-always); box-shadow: var(--heo-shadow-border); padding: 20px 30px; border-radius: 12px; margin-top: 8px;"></div>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/moments/random-friends-post.css">

<script type="text/javascript">
  var fdataUser = {
   apiurl: '/fc_backend/',
  defaultFish: 500,
  hungryFish: 500,
  }
</script>

<script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

需要注意的是，必须使用 jquery.js，记得引入。上面 jquery.js 使用了字节跳动静态资源公共 CDN，可按需替换链接。

此外不要漏掉 id 为 random-post 的框，这是回显钓鱼信息用的。

【可选】设置 CDN 的不缓存规则

由于本站采取了 CDN，接口 https://blog.uuanqin.top/fc_backend/ 所有请求应该设置不缓存，否则鱼塘、朋友圈刷新了还是一个样。

打开 CDN 加速域名配置页面、增加多一个缓存规则即可（以腾讯云 CDN 为例）：

image.png

腾讯云 EdgeOne 中应该为：

image.png

后续改进

@清羽飞扬 的作品 241028：轻量友链朋友圈可解决这些问题：

  • 服务器重启后需要自行手动部署
  • 目前使用的朋友圈太庞杂，以后可以开发自己的爬虫
  • 夜间模式下部分文字未显示

本文参考

  1. 参见我的折腾过程：Nginx 与 CDN 完成重定向：从 HTTP 重定向到 HTTPS、从 WWW 重定向到根 ↩︎