轻快图床搭建

近期有人找我帮搭建图床（轻快图床），这里在搭建过程中遇到的坑，进行记录一下。

简介

基于 koa + vue3.x + typescript 全家桶实现的在线图床系统，支持在线存储桶插件开发，目前支持腾讯云COS、又拍云Upyun、阿里云OSS、github图床、gitee图床、本地存储桶、七牛云 KODO等在线图床存储桶。这里也联系过作者，后续作者准备使用 nestjs 重构图床，换另一种方式实现存储方式。

作者在线演示：http://picture.itchenliang.club/#/

在线体验账号：

1 2	账号：guest@163.com 密码：000000

准备

Node版本 >= 14.17.6
Mysql版本 >= 5.7
typescript版本 >= 4.8.4
git安装

虽然这里说安装node版本 >= v14.17.6版本，但在测试中，在全局安装ts-node过程中，出现了版本兼容问题，这里推荐安装node@18.xx.x以上的版本。

过程

本地搭建

GitHub下载：https://github.com/ischenliang/quickly-picture-bed

使用 git clone 克隆轻快图床源码。

全局安装typescript、nodemon、ts-node。

1
2
3

typescript、nodemon、ts-node
npm install nodemon -g
npm install ts-node -g

在 server 和 client 目录下执行 npm install 安装依赖。
执行sql文件，这里我们本地连接服务器的数据库，这里启动 Navicat premium 16，分享一个激活程序（最高版本激活有可能不成功，这里推荐安装Navicat@v16.1.6，对最高版本有需求的自行测试）。
蓝奏云下载：https://bingmeng.lanzouj.com/b071mqm4d 密码:ewfy

这里直接连接服务器上的数据库，把宝塔上的数据库改为所有人都可以访问。

在这一步也可以进行更改server/src/.env文件，将数据库连接服务修改成自己的数据库ip、用户名、密码等

# mysql数据库配置
# 数据库ip，不要使用localhost和127.0.0.1
DB_HOST=xxx.xxx.xxx.xxx
# 数据库端口，默认3306
DB_PORT=3306
# 数据库
DB_DATABASE=picture-bed-backup
# mysql用户名，默认是root
DB_USERNAME=root
# mysql密码
DB_PASSWORD=xxxx

# 后台配置: 程序占用端口
APP_PORT=3002

系统提供默认初始化数据库sql文件，打开并复制/server/sql/picture-bed-backup.sql，在navicat或者其他工具中执行该sql文件。该sql文件中默认提供了一个管理员账号，方便用户初次使用时登录。

默认管理员账号：

1 2	管理员账号: admin@163.com 管理员密码: 000000

项目启动
首先将后端服务启动
1
2
3
# 服务端启动
cd server
npm run start
在运行前端代码前还需要做一步操作，打开client/public/global.config.js文件，修改window.uploader_ip，将下面的locahost:3002改成你本地启动的server的ip和端口(如果是部署上线时需进行此步，本地调试可跳过)。
1
window.uploader_ip = 'localhost:3002'
然后执行下面命令运行前端代码
1
2
3
# 前端项目启动
cd client
npm run dev
执行成功后如下所示，前端基本是成功的，一般出错都是在后端，一般情况都是你连接你远程或者本地数据库错误，检查你的数据库名、密码、服务器IP
后面配置管理系统，这里就不作叙述，详情看轻快图床原文档。
koa项目可以不用打包部署，直接将server目录下的内容所有内容拷贝到服务器上然后执行上述的安装步骤，这里把依赖包删除，Windows系统使用的依赖包和Linux系统使用的依赖包是会出现错误的，因为使用不同的操作系统和文件系统，导致某些依赖包出现兼容性问题，所以最好删除重新安装依赖。
1
2
3
# 前端项目打包部署
cd client
npm run build
server以node项目执行。
将打包后生成的dist目录下的所有内容拷贝到web服务器上。
前面有说过，在打包到服务器前，打开 client/public/global.config.js 文件，修改 window.uploader_ip，将下面的IP改为你的服务器IP和你连接数据库时用的端口。
1
window.uploader_ip = 'x.x.x.x:3002'