Skip to content

部署自己的日记系统

前后端完全开源,你可以部署一套自己的日记系统。

不过最好你已经具备 linux 服务器的操作能力,会安装指定程序,修改服务配置等。如果你不了解,最好还是直接用现成的。学习起来可能需要点时间。

该项目包含两个部分:

默认的部署目录是这样

sh
[ nginx 文档根目录 ]

      ├── diary      # 前端网页文件夹
      └── portal     # 后台服务文件夹
            ├── bin   
            ├── config
            ├── cron
            ├── dist
    ├── bin      # 后台服务的真实入口
    ├── config   # 后台配置文件
    ├── cron
    └── src
            ├── node_modules
            ├── public
            └── src

一、服务器配置需求

目前没有 docker 的部署方式,还没有实现,我不太会这玩意。
另外不使用 docker 的方式也有个好处就是,可以在非常低配置的服务器上运行。

你的服务器只需要满足下面的需求即可,因为我的目前就是这样的:

  • 带宽 1M 即可

    前端项目进行了足够好的优化,加载速度并不慢

  • 内存 1G 即可
  • 系统最好是 Ubuntu

    因为我的教程里会以 Ubuntu 为准,当然其它系统也可以实现,只是有些地方会有不同,比如 nginx 的配置目录结构会有不同。

接下来会非常详尽的解说如何部署自己的日记系统,你只需要有基础的 linux 操作能力即可。

二、运行环境搭建

不管是在你的电脑端,还是在服务端,都需要安装好的开发环境有:

  • git 开发中的版本管理工具
  • nodejs v20+ nodejs环境
  • npm nodejs 的包管理器
  • yarn nodejs 的包另一个管理器,我习惯用这个

查看你的系统版本,能看出你系统具体是什么 debian centos ubuntu

sh
cat /etc/os-release

比如我的返回结果就是下面,表明我系统是 Ubuntu

sh
root@aliyun:~# cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy

1. 安装 git

Linux 服务器中一般都默认安装了 git,不需要额外处理。
如果你是 Windows、Mac,需要自行问豆包如何安装,不再冗述。

2. 安装 nodejs v20+

知道你系统是什么之后,去问豆包,在你的系统中该如何安装 nodejs,它就会告诉你该用什么指令安装,现在(2025.11.08)默认安装的 nodejs 都是 v20+ 的。

安装完成之后,通过以下指令检查是否安装成功

sh
node -v
# 正确安装之后,它会显示对应的 nodejs 版本号
sh
# 像这样
root@aliyun:~# node -v 
v20.18

安装 nodejs 完成之后,它会默认安装 npm,所以 npm 就不用额外管了。

3. 安装 yarn

yarn 是包管理器,跟 npm 一样的东西。

执行

sh
npm i -g yarn

# 它是 npm install -g yarn 的缩写
# 它会全局安装 yarn 指令

检查是否安装成功是一样的

sh
yarn -v
sh
# 比如,像我的,显示版本号就表示安装成功
root@aliyun:~# yarn -v
1.22.19

三、部署前端

前端需要修改一个项目配置文件,需要一个显示在前端页面中的管理员邮箱,这个邮箱的主要作用是:当后台服务不能正常访问的时候,显示到页面中提示用户。

这个构建过程需要一定的硬件需求,如果服务器是 1G 内存的可能满足不了构建前端页面的需求。
所以推荐你将前端代码下载到本地,在本地完成前端文件的构建,再上传到服务器中使用。当然,如果你服务器配置够高,可以直接在服务器上执行这些操作。

1. 下载项目文件

终端中执行

sh
git clone https://github.com/KyleBing/diary.git

会将 github 中最新的前端源码下载下来,放到当前目录中名为 diary 的文件夹中。

2. 安装代码所需依赖库

进入这个 diary 文件夹中,执行

shell
yarn

你会看到有进度条在走,等它走完会在文件夹中多出一个名为 node_modules 的文件夹

3. 修改前端配置文件

前端的配置文件内容是这样的:

json
{
    "adminEmail": "kylebing@163.com",   // 管理员账户
    "isShowDemoAccount": true,          // 是否显示演示账户按钮

     // 演示账户内容,会在登录页面点击 演示账户登录时自动填写
    "demoAccount": "test@163.com",
    "demoAccountPassword": "test",

    // [ 可选 ] 七牛云相关配置
    "QiniuImgBaseURL": "",
    "QiniuBucketName": "",
    "QiniuStyleSuffix": "",

    // [ 可选 ] 和风天气 API KEY,用于获取天气信息
    "HefengWeatherKey": "",

    // 注册界面的注册提示信息,支持 HTML 格式的内容
    "registerTip": "<p>日记应用</p>"
}

修改配置文件的主要目的是:

  • 定义前端页面中显示的管理员邮箱账户,当后台有问题时会显示这个信息
  • [可选] 七牛云存储 key,需要搭配后台使用
  • [可选] 天气数据自动获取的 api key

4. 构建最终页面

修改完配置之后,其它都不需要修改了,直接使用原库的内容就好了,这样以后再更新网页的时候也方便。

回到 diary 文件夹目录,执行下面指令生成最终的页面

shell
npm run build

执行成功之后,会在 diary/archive 目录中多出一个名为 diary-xxxx-xx-xx.zip 的 zip 文件。

5. 上传并部署前端文件到服务器

将上面生成的那个 diary-xxxx-xx-xx.zip 文件,上传到服务器,再将其解压到 web根目录/diary/ 目录下。就完成了。

这个 web 根目录可以由你来决定,要么直接使用 nginx 服务的默认主目录,要么你自己选择一个位置,只要你知道主目录是哪一个就行。

这一步是基础的服务器操作,就不细说了,不明白可以问 豆包

四、部署后台服务

后台部署要相对麻烦一些,大概需要这几个步骤:

  1. 安装运行环境
    • 安装 mysql 数据库
    • 安装 nodejs npm yarn git 环境,第二章 里面的内容
    • 安装 pm2
    • 安装 nginx 网页服务软件
  2. 下载后台程序
  3. 修改后台服务配置
  4. pm2 启动后台服务
  5. 初始化系统 创建数据库表结构

1. 安装运行环境

  1. nodejsnpmyarngit 的安装方式在第二章里已经写明了
  2. mysql 的安装和配置方式,去问 豆包,这里只需要最终能提供出 数据库用户名密码端口号 即可,用于配置以下内容
  3. 安装 nginx,这个也去问 豆包 吧,就是在服务器上装个普通程序一样。

2. 下载后台程序 nodejs

登录你的服务器,进入 web 主目录,终端中执行

shell
git clone https://github.com/KyleBing/portal.git

会在 web 目录中创建一个名为 portal 的目录,里面放置好了后台程序的所有文件。

portal 的目录结构是这样的

shell
web根目录/portal/
            ├── bin
            ├── config
            ├── cron
            ├── dist
   ├── bin
   ├── config
   ├── cron
   └── src
            ├── node_modules
            ├── public
   └── stylesheets
            └── src
                ├── diary
                ├── dontstarve
                ├── entity
                ├── file
                ├── imageQiniu
                ├── init
                ├── map
                ├── qr
                ├── response
                ├── statistic
                ├── thumbsUp
                ├── user
                └── wubi

3. 修改后台服务配置

接下来该修改一下后台服务的配置了,配置文件在这个文件夹中:

shell
web目录/portal/dist/config/

内含两个文件:

shell
root@aliyun:/var/www/html/portal/dist/config# ll
total 16
-rw-r--r-- 1 root root  142 Aug  2 16:01 configDatabase.json  # 数据库配置文件
-rw-r--r-- 1 root root  201 Aug  2 16:01 configProject.json   # 项目配置文件
  1. 修改数据库配置文件,将你准备好的数据库用户名密码添加上就可以了。
    json
    {
        "host": "localhost",          // 数据库地址
        "user": "root",               // 数据库用户名
        "password": "rootpassword",   // 数据库密码
        "port": 3306,                 // 数据库端口号
        "multipleStatements": true,
        "timezone": ""
    }
  2. 修改项目配置文件,根据自己需要进行修改就可以了
    json
    {
      "invitation_code": "kylebingooOO",  
      // 万能邀请码:不限次数的邀请码
    
      "year_data_start": 1991,            
      // 数据准备从哪年开始,年份数据显示的时候将从这个开始
    
    
      "qiniu_access_key": "wertvweyvw54y31234123324123451245yvwe",
      "qiniu_secret_key": "wertvweyvw54y34123411234123413415yvwe"
      // [ 可选 ]
      // 七牛云 access_key 和 secret_key 用于与七牛云服务器交互
      // 七牛云的配置需要前后端都配置才能生效
      // 可以注册一个,有免费的额度可用
      // 不使用这个的话,直接留空就可以,只会影响头像显示
    }

4. 使用 pm2 启动后台服务

在启动后台服务之前,需要安装另外一个工具来管理 nodejs 的程序,因为后台是 nodejs 写的。

这个工具名叫 pm2,可以方便的管理 nodejs 后台服务。

想了解它的更多使用方法请参阅: pm2 使用教程: 管理你的 nodejs 后台项目

  1. 安装 pm2,执行
    shell
    npm i -g pm2
  2. 启动服务,进入 web根目录/portal/dist/bin 目录
    shell
    pm2 start ./portal.js --name portal
    
    # 指令释义
    pm2 start        # 使用 pm2 启动 nodejs 项目
    ./portal.js      # 执行程序是 ./portal.js
    --name portal    # 给它命名为 portal
    然后会看到一个表,表上显示着后台项目的名字和运行状态。过一会再执行一次下面指令查看运行情况, pm2 status
    shell
    pm2 status
    如果看到状态栏显示 error,使用 pm2 log 的指令查看具体的错误信息排查问题所在。
  3. 完成之后,服务就正常运行在了你机器的 3000 端口,当你用浏览器访问 你的ip:3000 时,应该会看到下面的信息:
    比如我的 kylebing.cn:3000
    json
    { 
       "status":"success",
       "message":"Portal API is running",
       "title":"Portal for Diary"
    }
    服务器:3000

5. 初始化系统

注意:初始化会清空 diary 数据库中的所有内容

  1. 删除后台目录中的 DATABASE_LOCK 这个文件。
  2. 直接访问 你服务器的域名或IP:3000/init 这个路径即可将数据库初始化,初始化数据库会自动创建一个名为 diary 的数据库。
  3. 初始化后,会自动在项目目录中新建一个名为 DATABASE_LOCK 的文件,之后将不能再执行这个接口,如果想再次初始化,需要先删除这个文件。

建议定期自行备份数据库

五、nginx 配置

我们来梳理一下目前的目录和程序:

  • 后台服务运行在 localhost:3000
  • 前端运行在 localhost/diary/
shell
[ nginx 文档根目录 ]

      ├── diary   # 已放置好前端页面
      └── portal  # 目前这个是缺失的 #####

接下来要做的就是将 localhost:3000 的服务代理到 /portal 路径上去,这个就需要修改 nginx 配置文件。

如何找到 nginx 配置文件目录和配置文件 请自行豆包,不同系统的 nginx 配置文件放置位置可能会有不同,但配置文件的内容是一致的。

比如 ubuntunginx 配置文件目录就是在 /etc/nginx/nginx.conf

根据这个格式添加对应内容。

nginx
map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
}

upstream ws_server {
    server localhost:9999;
    keepalive 2000;
}

upstream portal_server {
    server localhost:3000;
    keepalive 2000;
}

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;  # 修改成你的 web 根目录路径
        index index.html index.htm index.nginx-debian.html;
        server_name diary;  # 这个自定义就好
        
                ##
        # Gzip Settings
        ##

        gzip on;

         gzip_vary on;
         gzip_proxied any;
         gzip_comp_level 6;
         gzip_buffers 16 8k;
         gzip_http_version 1.1;
         gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;


        location / {
                add_header Access-Control-Allow-Origin * always;
                try_files $uri $uri/ =404;
                # rewrite ^(.*)$ https://$host$1; #将所有HTTP请求通过rewrite指令重定向到HTTPS。
        }

       location /portal/ {
            add_header Access-Control-Allow-Origin * always;
            proxy_pass http://portal_server/;
            proxy_set_header Host $host:$server_port;
        }
    
       location /ws {
          proxy_pass http://ws_server;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
        }
}

修改完成之后,重启 nginx 服务

shell
systemctl restart nginx

如果出现错误,就根据提示排查下错误。

六、其它

1. 邀请码

新用户注册需要邀请码,邀请码分为两种:

  • 万能的:在后台系统的配置文件中配置
  • 一次性:一人一码
  1. 登入前端日记系统后,点开菜单,选择邀请码菜单,可以生成新的邀请码,点击邀请码就可以复制内容,分享给别人就可以了。

    系统安装后,第一个注册的用户默认为管理员,即 group_id = 1
    用户默认注册后的 group_id2

  2. 邀请码页面中显示的是都是未注册的码,复制后邀请码变为绿色,表示已被分享还未使用。
  3. 已使用的将会隐藏,不再显示在列表中。

2. 图片存储配置 [选配]

如若不配置:只是不能显示用户头像而已
头像文件是存储到 七牛云 上的,免费注册会有免费额度,够用。
需要修改 /config/projectConfig.json 文件内容,改成你的七牛云配置。

json
  "QiniuImgBaseURL": "", // 空间域名,最后面带 `/`
  "QiniuBucketName": "", // 七牛云对象存储空间的名称
  "QiniuStyleSuffix": "", // 七牛云图片样式后缀,缩放图片尺寸

3. 和风天气配置 [选配]

如若不配置:只是不能自动获取当地天气和温度而已
用于从 和风天气 中获取地域的天气和温度信息,也是在 /config/projectConfig.json 文件中

json
  // 和风天气开发 key
  // 官网地址:https://console.qweather.com/
  // API文档:https://dev.qweather.com/docs/api/weather/
  "HefengWeatherKey": "",

基于 MIT 许可发布