Skip to content

使用 Zeabur 部署 TiddlyWiki

Published: at 08:51Suggest Changes

Zeabur 是一款功能强大且用户友好的 PaaS (Platform as a Service) 产品。它不仅为前端应用提供了便捷的部署途径,还全面支持后端服务、数据库和消息队列等多样化的服务组件。凭借其直观的界面和灵活的配置选项,为开发者和普通用户提供了一个一站式的云端部署和管理平台。

尽管 Zeabur 的模板市场中列出了 TiddlyWiki 的模板,但经实际测试,那是一个假模板,并不能实现真正的一键部署功能。为了成功在 Zeabur 上运行 TiddlyWiki,我们需要采取以下策略:

  1. 在本地环境中构建 Node.js 版 TiddlyWiki 的 Docker 镜像;

  2. 将构建好的镜像上传至仓库;

  3. 在 Zeabur 平台上使用自定义的 Docker 镜像进行部署。

这种方法虽然比一键部署稍显复杂,但能确保 TiddlyWiki 在 Zeabur 上稳定运行,并且可以实现公有读私有写的功能。

详细步骤

以在 macOS 上的操作为例。

步骤一:本地安装 Node.js

方式一:在 Node.js 官网下载 LTS(长期支持)版本。

方式二:如果您已经安装了 Homebrew,可以在终端输入 brew install node 进行安装。安装完成后可以通过 node -vnpm -v 验证 Node.js 和 npm 包管理器是否安装成功。如果返回版本号则证明安装成功。

步骤二:安装 TiddlyWiki

在终端中输入 sudo npm install -g tiddlywiki 进行全局安装。安装完成后,可以通过 tiddlywiki --version 检查是否安装成功。

在本地创建一个名为 “TiddlyWiki” 的文件夹并使用 VSCode 打开它。然后输入 tiddlywiki mynewwiki --init server 安装运行 TiddlyWiki 的服务器。此时可以在 VSCode 的资源管理器中看到出现了一个名为 “tiddlywiki.info” 的文件。这个文件中的内容是这样的:

{
    "description": "Basic client-server edition",
    "plugins": [
        "tiddlywiki/tiddlyweb",
        "tiddlywiki/filesystem",
        "tiddlywiki/highlight"
    ],
    "themes": [
        "tiddlywiki/vanilla",
        "tiddlywiki/snowwhite"
    ],
    "build": {
        "index": [
            "--render",
            "$:/plugins/tiddlywiki/tiddlyweb/save/offline",
            "index.html",
            "text/plain"
        ],
        "static": [
            "--render",
            "$:/core/templates/static.template.html",
            "static.html",
            "text/plain",
            "--render",
            "$:/core/templates/alltiddlers.template.html",
            "alltiddlers.html",
            "text/plain",
            "--render",
            "[!is[system]]",
            "[encodeuricomponent[]addprefix[static/]addsuffix[.html]]",
            "text/plain",
            "$:/core/templates/static.tiddler.html",
            "--render",
            "$:/core/templates/static.template.css",
            "static/static.css",
            "text/plain"
        ]
    }
}

步骤三:创建 “package.json” 文件和 “server.js” 文件

在 TiddlyWiki 文件夹中创建 “package.json” 文件,在文件中写入以下内容:

{
  "name": "my-tiddlywiki",
  "version": "1.0.0",
  "description": "My TiddlyWiki Server",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^10.0.0",
    "tiddlywiki": "^5.3.5"
  }
}

然后在终端中先运行 npm install dotenv 安装 “dotenv 包”,再运行 npm install 安装必要的依赖。安装完成后,您可以看到多了一个名为 “package-lock.json” 的文件。

之后,在 TiddlyWiki 文件夹中继续创建 “server.js” 文件,在文件中写入以下内容:

require("dotenv").config();
const $tw = require("tiddlywiki/boot/boot.js").TiddlyWiki();

const username = process.env.TW_USERNAME;
const password = process.env.TW_PASSWORD;
const port = process.env.TW_PORT || 8080;

if (!username || !password) {
  console.error("Error: TW_USERNAME and TW_PASSWORD must be set in .env file");
  process.exit(1);
}

$tw.boot.argv = [
  ".",
  "--listen",
  `port=${port}`,
  "host=0.0.0.0",
  `username=${username}`,
  `password=${password}`,
  "readers=(anon)",
  `writers=${username}`,
];

console.log("Starting TiddlyWiki with the following configuration:");
console.log(`Port: ${port}`);
console.log(`Username: ${username}`);
console.log("Password: [HIDDEN]");

$tw.boot.boot();

在 “server.js” 文件中,username(用户名)、password(密码) 和 port(端口) 都使用了变量,这是为了实现服务器版本 TiddlyWiki 的公有读私有写功能。

步骤四:创建 Docker 镜像

进行这一步之前,您首先要确保在您的电脑上安装了 Docker Desktop,如果没有安装可以前往 Docker 的官网下载或者通过 Homebrew 安装,安装命令为 brew install --cask docker

在 TiddlyWiki 文件夹中创建名为 “Dockerfile” 的文件,写入以下内容:

FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "start"]

再创建名为 “.dockerignore” 的文件,写入以下内容:

node_modules
npm-debug.log
.env
.git
.gitignore

然后在 VSCode 的终端中运行 docker build -t my-tiddlywiki . 构建 Docker 镜像。

步骤五:开始部署

强烈建议在部署到 Zeabur 之前先在本地试运行,确定在本地可以正常运行后再开始正式部署。

部署到 Zeabur 的方式有两种:

方式一:将整个 TiddlyWiki 文件夹上传项目到 GitHub,然后在 Zeabur 中选择通过 GitHub 进行部署。

方式二:直接在 Zeabur 中选择本地项目进行部署。

无论哪种方式,部署时都需要在 Zeabur 中添加环境变量。第一个环境变量为 TW_USERNAME,填入您希望在 TiddlyWiki 使用的用户名。第二个环境变量为 TW_PASSWORD,填入您的密码。

等待两分钟左右,部署完成后添加网址就可以访问您的 TiddlyWiki 了。此时,您处于公有读的状态,如果要编辑 TiddlyWiki,则需要在域名后加入 /login-basic,然后输入用户名和密码即可。

不足之处

在以上的步骤中,并没有为 Docker 镜像添加数据的存储卷,所以如果重新部署或者重启服务器后,原有的数据都会消失。所以,在使用时,务必定期进行手动备份。

或者自行探索添加存储卷的方式在 Zeabur 上实现数据的永久存储(这个方式我没有成功,还不知道问题出在哪里)。


Previous Post
Cloudflare R2 的完美搭档:R2 Uploader 使用指南
Next Post
让 Tana 和 Heptabase 协同作战