抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

backblaze

我在使用了许许多多的图床后一直没有很好的解决方案

我早期使用过了jsd+github的图床,但是因为jsd的icp备案被注销,且不能使用国内的cdn节点,这个方法随之不可用了

后来我将cdn仓库通过npm发包,并且使用知乎和饿了么的加速服务,但是知乎添加的白名单而不可用,随后饿了么也停止了服务,但是后来又重启了服务

这几个方案的潜在不稳定性告诉我,迫切需要一个自建的图床

不久我在cyfan的博客中发现了Backblaze自建图床的方案

2015年9月,Backblaze推出了新产品B2 Cloud Storage。作为基础架构即服务(IaaS),它的目标是软件集成(尽管也提供Web前端和API)。它直接与类似服务Amazon S3,Microsoft Azure和Google Cloud竞争。在2018年4月,Backblaze宣布了云计算合作伙伴关系,它将直接将Backblaze的数据中心与其合作伙伴Packet和ServerCentral连接起来,为存储在B2 Cloud Storage中的数据提供高性能的云计算,而无需支付任何费用。

B2 Cloud Storage非常客气,有以下优点:

  • 用户永久免费10GB直链存储
  • 每天1GB下行流量
  • 无限量的上传流量
  • 每天下载请求2500次免费
  • 每天上传请求2500次免费
  • 基于CloudFlareCDN

而且超出免费额度的价钱也十分合理【不过我不会往里头冲一分钱的!】 https://npm.elemecdn.com/chenyfan-oss@1.0.0/pic/postpic/2020-07-09%20100931.jpg

然而我偶然得知,Backblaze加入了CloudFlare的 带宽联盟( Bandwidth Alliance) Backblaze与CloudFlare之间的流量直接免费,也就是每天无限量下行流量,配上CloudFlare超长缓存,每天下载请求无限次免费。

注册

我们点击这里去注册一个账号,建议使用google账号注册,会更加方便

新建桶

https://cdn.chuqis.com/img/139f85370f4bba46aa0fd4dba32d3d8b.jpg

新建一个桶,设置为公开:

上传一个文件,点击右边的信息按钮,我们要在这里获取一些信息:

https://cdn.chuqis.com/img/da3fd7366e8d1026b23d1ec85439ea4e.jpg

自定义域名

这一步需要你有个域名,开个子域给图床:

看到你上面的friendly url,把他的域名f00x.backblaze2.com解析到你想要的域名

这里我们先去Cloudflare新建一个workers

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
'use strict';
const b2Domain = 'assets.qystudio.ml'; // configure this as per instructions above
const b2Bucket = 'qystupic'; // configure this as per instructions above
const b2UrlPath = `/file/${b2Bucket}/`;
addEventListener('fetch', event => {
return event.respondWith(fileReq(event));
});

// define the file extensions we wish to add basic access control headers to
const corsFileTypes = ['png', 'jpg', 'gif', 'jpeg', 'webp', 'css', 'js', 'html'];

// backblaze returns some additional headers that are useful for debugging, but unnecessary in production. We can remove these to save some size
const removeHeaders = [
'x-bz-content-sha1',
'x-bz-file-id',
'x-bz-file-name',
'x-bz-info-src_last_modified_millis',
'X-Bz-Upload-Timestamp',
'Expires'
];
const expiration = 31536000; // override browser cache for images - 1 year

// define a function we can re-use to fix headers
const fixHeaders = function(url, status, headers){
let newHdrs = new Headers(headers);
// add basic cors headers for images
if(corsFileTypes.includes(url.pathname.split('.').pop())){
newHdrs.set('Access-Control-Allow-Origin', '*');
}
// override browser cache for files when 200
if(status === 200){
newHdrs.set('Cache-Control', "public, max-age=" + expiration);
}else{
// only cache other things for 5 minutes
newHdrs.set('Cache-Control', 'public, max-age=300');
}
// set ETag for efficient caching where possible
const ETag = newHdrs.get('x-bz-content-sha1') || newHdrs.get('x-bz-info-src_last_modified_millis') || newHdrs.get('x-bz-file-id');
if(ETag){
newHdrs.set('ETag', ETag);
}
// remove unnecessary headers
removeHeaders.forEach(header => {
newHdrs.delete(header);
});
return newHdrs;
};
async function fileReq(event){
const cache = caches.default; // Cloudflare edge caching
const url = new URL(event.request.url);
if(url.host === b2Domain && !url.pathname.startsWith(b2UrlPath)){
url.pathname = b2UrlPath + url.pathname;
}
let response = await cache.match(url); // try to find match for this request in the edge cache
if(response){
// use cache found on Cloudflare edge. Set X-Worker-Cache header for helpful debug
let newHdrs = fixHeaders(url, response.status, response.headers);
newHdrs.set('X-Worker-Cache', "true");
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHdrs
});
}
// no cache, fetch image, apply Cloudflare lossless compression
response = await fetch(url, {cf: {polish: "lossless"}});
let newHdrs = fixHeaders(url, response.status, response.headers);

if(response.status === 200){

response = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHdrs
});
}else{
response = new Response('File not found!', { status: 404 })
}

event.waitUntil(cache.put(url, response.clone()));
return response;
}

然后在workers的触发器里面找到路由设置为 域名/*

到这里我们离成功只有一步之遥

配置缓存

储存桶设置

我们打开这里

https://cdn.chuqis.com/img/e68f1676e4b19b20964509662f00beb1.png

点击桶,进入桶设定:

https://cdn.chuqis.com/img/9d25ac6ef84af13c6bf1e41c44fc2f97.jpg

里头写上:

{"cache-control":"max-age=43200000"}

这个意思是强制缓存 43200000 ,大约是50天.然而这里注意一下,时间太长有个问题,你修改一张图片,外面可以能要50天才能更改,这样只能通过手动清除缓存做到了。

点击CORS设置,选择:

与所有HTTPS来源共享此存储桶中的所有内容。

cf缓存设置

在域名里面找到规则,新建规则如下设置

https://cdn.chuqis.com/img/9d25ac6ef84af13c6bf1e41c44fc2f97.jpg

到这里我们就大功告成了,完结撒花

其他

你甚至还可以配置国内cdn回源到这里,以提升速度

就像这样

https://cdn.chuqis.com/img/228be3eb21e55bde29a1fff1e13f8d0e.png

推荐文章(由hexo文章推荐插件驱动)

评论