[个人项目] 基于 Vditor 二开个人笔记服务器的经历

前言

在 2021 年 12 月15 号的时候，部署了人生中的第一个云笔记服务 —— 基于 Leanote 搭建私有笔记服务器。但是在试用过程中发现，并还没有想象中的那么好。（可能是我的要求比较高吧，既要实用，又要好看，🙈）

事实上，Leanote 不管各个方面都已经做的很不错了，基本上做到了要啥有啥，还全平台支持和简易博客的搭建，极其强大。但让我觉得不太舒服的地方如下：

• 🤔 私有化版本不支持 流程图、脑图 等等各种可能需要插件才能完成的笔记功能，云服务版是有的
• 😂 用习惯了 Typora 的即使渲染模式，对分屏式 Markdown 写法多少还是生疏了，看着十分的不习惯
• 🙃 私有化支持的主题中没有 暗黑模式，这对重度计算机使用者来说是非常不舒服的，看多了眼睛累
• 🙈 界面个人不太喜欢（这是主要原因）

然后经过几番寻找，找到了极其强大 Markdown 开源组件的 Vditor ，居然支持 Vue3，那就没什么好说的了，干就完事了。因此有了此项目，开发过程就不过多的说明了，如果感兴趣可以直接看源码，传送门：

https://gitee.com/Yogurt_cry/ccs-note

以下是亲测的 Docker 部署的流程，特此说明，以备后查

部署环境

信息	说明
服务器系统版本	Ubuntu 18.04.6 LTS (64位)
Docker 版本	20.10.12
服务器配置	天翼云 4 核 8G 4M带宽

部署步骤

Step 1 部署前准备

cd /home

# 创建项目文件夹
mkdir CCSNote2_Test

# 数据文件夹, 用于映射 mongodb 容器内容, 存放笔记
mkdir CCSNote2_Test/Data

# 静态资源文件夹, 主要是用于存储笔记中的图片
mkdir CCSNote2_Test/Static
mkdir CCSNote2_Test/Static/Upload
mkdir CCSNote2_Test/Static/Upload/Note

# 安装包文件夹, 主要是存放包文件
mkdir CCSNote2_Test/Install

# 下载部署包
wget -P CCSNote2_Test/Install https://gitee.com/Yogurt_cry/ccs-note/attach_files/926748/download/CCSNote_v2.0.0.tar.gz

# 解压部署包
tar zxvf CCSNote2_Test/Install/CCSNote_v2.0.0.tar.gz -C CCSNote2_Test/Install/ CCSNote_v2.0.0

Step 2 创建 MongoDB

# 拉取 mongodb 镜像
docker pull monogo

# 运行镜像
docker run -itd --name CCSNOTE_V2_Test_Data --restart=always -p 27020:27017 -v /home/CCSNote2_Test/Data:/data/db mongo

这里 Yogurt 使用的是 27020 ，你可以根据实际情况调整自己的端口号

Step 3 修改配置文件

3.1 修改 Api 配置

vim /home/CCSNote2_Test/Install/CCSNote_v2.0.0/ccsNote/App/Config/Config.ini

# 数据库连接语句
# 本程序并未提供用户名和密码的登录模式,
# 因此千万不要将 MongoDB 的端口放置公网,
# 以避免数据泄露风险
MongoCNNQuery = mongodb://localhost:27017

# 前端 Url
# 访问笔记的 Url
# 主要是用于跨域检测, 一般都是在同一个域名下的, 但端口不一致容易导致跨域的发生
WebUrl = http://localhost:8080
# 访问后端的 Url
# 主要是用在访问笔记中的图片, 自动构建访问路径
ApiUrl = http://localhost:19422

默认为 localhost ，但实际在 Docker 环境中，localhost 指的不是宿主机的 localhost ，而是容器的 localhost，因此需要修改为实际的内容。

• MongoCNNQuery : 由于没有对 MongoDB 设置用户名和密码，因此建议使用内网 IP。可以使用 ifconfig 来查询。例如：Yogurt 的内网 IP 为 172.xx.xx.92 ，映射端口号为 27020。则填写的内容为：MongoCNNQuery = mongodb://172.xx.xx.92:27020
• WebUrl : 可能是由于 Yogurt_cry 对 Go 语言的熟悉程度不够 （才接触了 15 天😂），还不能很好的解决跨域的问题，因此就先通过设置参数来吧。例如：Yogurt 的 Web 端外网域名为：http://note.yogurtcry.icu:8004，则填写的内容为：WebUrl = http://note.yogurtcry.icu:8004
• ApiUrl : 这里的 ApiUrl 指的是上传访问图片的，一般来说可以在 Go 中使用 r.host 来解决，但第一次做就保险一点，先通过设置参数来。例如：Yogurt 的 Api 域名为：http://note.yogurtcry.icu:8014，则填写的内容为：ApiUrl = http://note.yogurtcry.icu:8014

设置完并保存即可。

完整配置如下：

# 数据库连接语句
# 本程序并未提供用户名和密码的登录模式,
# 因此千万不要将 MongoDB 的端口放置公网,
# 以避免数据泄露风险
MongoCNNQuery = mongodb://172.xxx.xxx.92:27020

# 前端 Url
# 访问笔记的 Url
# 主要是用于跨域检测, 一般都是在同一个域名下的, 但端口不一致容易导致跨域的发生
WebUrl = http://note.yogurtcry.icu:8004
# 访问后端的 Url
# 主要是用在访问笔记中的图片, 自动构建访问路径
ApiUrl = http://note.yogurtcry.icu:8014

3.2 修改 Web 配置

vim /home/CCSNote2_Test/Install/CCSNote_v2.0.0/html/config/config.js

window.Config = {
  ApiUrl: "http://localhost:19422",
  SystemName: "创云笔记",
  Version: "v2.0.0"
}

基本上只要修改 ApiUrl 即可。ApiUrl 和 3.1 中的 ApiUrl 填写一致即可。

完整配置如下：

window.Config = {
  ApiUrl: "http://note.yogurtcry.icu:8014",
  SystemName: "创云笔记",
  Version: "v2.0.0"
}

Step 4 构建镜像

Dockerfile 不用修改任何东西，把 Step 3 的配置完成后直接构建镜像即可。

# 切换到 Dockerfile 文件所在目录
cd /home/CCSNote2_Test/Install/CCSNote_v2.0.0

# 执行打包语句
docker build -t=yogurtcry/ccsnote:test .

# 等待执行完成后, 查看打包结果
docker images

REPOSITORY          TAG       IMAGE ID       CREATED          SIZE
yogurtcry/ccsnote   test      58bee4aaf470   22 seconds ago   174MB

Step 5 运行容器

docker run -itd --restart=always --name CCSNOTE_V2_Test -p 8014:19422 -p 8004:80 -v /home/CCSNote2_Test/Static/Upload/Note:/data/ccsNote/App/Static/Upload/Note yogurtcry/ccsnote:test

Step 6 访问笔记

云服务器是需要在安全组中设置指定端口才可以访问的，因此首次访问前，请确认端口的设置情况。按照以上的示例，我们应该开启 8014 和 8004 等两个端口。27020 不用开启，因为是内网访问的。

在浏览器中输入我们的网址：http://note.yogurtcry.icu:8004

这里主要考虑的是私有化部署，因此什么注册流程全给省了，会以首次登录的账号密码作为笔记的账号密码。下次登录直接以此账号密码登录即可。

进来之后就可以看到主界面了。

嗯，大概就是这样了。

后记 1

这是一次很奇妙的开发经历，功能不复杂 （我这部分的功能不复杂，Vditor 那部分还是很复杂的），主要还是考虑体验问题吧。麻雀虽小，但要五脏俱全。利用业余时间，短短 15 天的时间里，做了 2 个版本。第一版主要想看看 Vidtor 的功能，以及需要熟悉一下 Go 的一些语法，做出来的效果就比较差了，就是黑白的。

就连图标也是黑白的。谈不上好看吧，关键是连最基本的账号分离都没做，所有的笔记都在 “裸奔”。给好朋友看了一下，也被吐槽了😂 （这不废话嘛，做成这样）。汇总了一下朋友们的意见，重新设计的 UI，对首屏打开率做了点小小的优化，再给朋友看的时候：

嗯，体验好了很多 哈哈哈。

后记 2

其实整个项目的核心部分就是 Vditor ，在开发的过程中，对这个开源项目有了很深的敬意，是我们国家的团队开发的哦。非常感谢他们的付出，才让我们可以用到了如此好的组件。

人生中第一次为开源项目捐赠，能力有限，虽然不多，聊表心意。后面能力大了，会加油支持开源社区的，嘿嘿，希望这一天早点到来。