近期有人找我帮搭建图床(轻快图床),这里在搭建过程中遇到的坑,进行记录一下。
简介
基于 koa + vue3.x + typescript 全家桶实现的在线图床系统,支持在线存储桶插件开发,目前支持腾讯云COS、又拍云Upyun、阿里云OSS、github图床、gitee图床、本地存储桶、七牛云 KODO等在线图床存储桶。这里也联系过作者,后续作者准备使用 nestjs 重构图床,换另一种方式实现存储方式。
作者在线演示:http://picture.itchenliang.club/#/
在线体验账号:
1 | 账号:[email protected] |
准备
Node版本 >= 14.17.6
Mysql版本 >= 5.7
typescript版本 >= 4.8.4
git安装
虽然这里说安装node版本 >= v14.17.6
版本,但在测试中,在全局安装ts-node
过程中,出现了版本兼容问题,这里推荐安装[email protected]
以上的版本。
过程
本地搭建
GitHub下载:https://github.com/ischenliang/quickly-picture-bed
使用 git clone 克隆 轻快图床 源码。
全局安装typescript、nodemon、ts-node。
1
2
3typescript、nodemon、ts-node
npm install nodemon -g
npm install ts-node -g在 server 和 client 目录下执行
npm install
安装依赖。执行sql文件,这里我们本地连接服务器的数据库,这里启动 Navicat premium 16,分享一个激活程序(最高版本激活有可能不成功,这里推荐安装[email protected],对最高版本有需求的自行测试)。
蓝奏云下载:https://bingmeng.lanzouj.com/b071mqm4d 密码:ewfy
这里直接连接服务器上的数据库,把宝塔上的数据库改为所有人都可以访问。
在这一步也可以进行更改
server/src/.env
文件,将数据库连接服务修改成自己的数据库ip、用户名、密码等1
2
3
4
5
6
7
8
9
10
11
12
13
14# 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管理员账号: [email protected]
管理员密码: 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 buildserver
以node项目
执行。将打包后生成的dist目录下的所有内容拷贝到web服务器上。
前面有说过,在打包到服务器前,打开
client/public/global.config.js
文件,修改window.uploader_ip
,将下面的IP改为你的服务器IP和你连接数据库时用的端口。1
window.uploader_ip = 'x.x.x.x:3002'
问题
部署到服务器上后,会出现白屏情况,出现这个情况是因为你的域名为 https
协议,node项目
是没有证书的,默认为http
,所以这里前端显示白屏,这里就要对node项目
挂载域名了,这里就把window.uploader_ip
改为你设置的二级域名。