backblaze图床管理工具

基于vue3前端，express作中间件，vercel部署的backblaze图床管理工具开发记录。

项目地址：bz-view

1、存储桶配置，参考这个文档

1.1、注册并登录Backblaze存储桶

1.2、创建一个桶，并修改桶设定，生成Key

1.3、查看存储桶友好url

1.4、cloudflare配置，参考这篇文章

2、图床管理工具开发

2.1、前端vue3，参考github代码

2.2、中间件express代理请求

因backblaze存储桶api有动态变化，采用个人比较熟悉的express来进行接口代理请求。

2.3、vercel部署express，并用cloudflare加速

写好的express代码部署到vercel：

1. 新建vercel.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "version": 2,
  "builds": [
      {
          "src": "./index.js",
          "use": "@vercel/node"
      }
  ],
  "routes": [
      {
          "src": "/(.*)",
          "dest": "/"
      }
  ]
}

2. 选择部署仓库，链接

3. 最为关键的，在前端打包好，放到expres静态文件中时，.js后缀改为.mjs。html中的引用路径也修改。