R2+worker+edgeone实现随机图搭建

背景介绍#

想用Cloudflare的R2存储配合Worker搭建随机图是因为我阿里云4-4的机器最近到期了，随着搭建的服务越来越多，4G内存的机器已经不能满足我的需求了，所以就趁着阿里云的机器到期和雨云7周年的活动，买了台雨云 4-8的机器；众所周知的，雨云的机器都是有流量限制的，为了避免流量用超了，所以就想到了白嫖cf大善人的方法。然后又是众所周知的问题，cf在国内的访问速度又是一坨，所以就有了edgeone。

准备工作#

一个Cloudflare账号
一个托管到Cloudflare的域名
edgeone的免费激活码
ps：edgeone不建议付费购买，能白嫖就白嫖；国际站测速分享一下就有2个了，国内站的话好像要购买机器才行，具体的怎么样我也没试过，我国内站的激活码是在官方Discord上抽奖抽的

部署过程#

1. 部署worker#

1
export default {
2
  async fetch(request, env, ctx) {
3
    const bucket = env.MY_BUCKET;
4
    const url = new URL(request.url);
5
    const pathname = url.pathname;
6

7
    let prefix = '';
8

9
    // 根据路径前缀判断
10
    if (pathname.startsWith('/p')) {
11
      prefix = 'landscape' + pathname.replace(/^\/p/, ''); //后缀p表示pc端，桶内pc端图片放在landscape文件夹下
12
    } else if (pathname.startsWith('/m')) {
13
      prefix = 'portrait' + pathname.replace(/^\/m/, '');   //后缀m表示移动端，桶内移动端图片放在portrait文件夹下
14
    } else {
15
      return new Response('Invalid path', { status: 400 });
16
    }
17

18
    // 确保以 "/" 结尾（表示目录）
19
    if (!prefix.endsWith('/')) {
20
      prefix += '/';
21
    }
22

23
    try {
24
      const objects = await bucket.list({ prefix });
25
      const items = objects.objects;
26

27
      if (!items || items.length === 0) {
28
        return new Response('No images found', { status: 404 });
29
      }
30

31
      // 随机选一个对象
32
      const randomItem = items[Math.floor(Math.random() * items.length)];
33
      const object = await bucket.get(randomItem.key);
34

35
      if (!object) {
36
        return new Response('Image not found', { status: 404 });
37
      }
38

39
      // 自动识别 Content-Type
40
      let contentType = object.httpMetadata?.contentType;
41
      if (!contentType) {
42
        const ext = randomItem.key.split('.').pop().toLowerCase();
43
        switch (ext) {
44
          case 'jpg':
45
          case 'jpeg':
46
            contentType = 'image/jpeg';
47
            break;
48
          case 'png':
49
            contentType = 'image/png';
50
            break;
51
          case 'gif':
52
            contentType = 'image/gif';
53
            break;
54
          case 'webp':
55
            contentType = 'image/webp';
56
            break;
57
          case 'bmp':
58
            contentType = 'image/bmp';
59
            break;
60
          case 'svg':
61
            contentType = 'image/svg+xml';
62
            break;
63
          default:
64
            contentType = 'application/octet-stream';
65
        }
66
      }
67

68
      const headers = new Headers();
69
      headers.set('Content-Type', contentType);
70

71
      return new Response(object.body, { headers });
72
    } catch (error) {
73
      console.error('Error:', error);
74
      return new Response('Internal Server Error', { status: 500 });
75
    }
76
  },
77
};

2. 绑定R2存储#

找到worker中的 绑定 ，点击 添加绑定 ，在左侧选择 R2存储桶 ，在点击 添加绑定 ，变量名称填：MY_BUCKET，存储桶就选择你的R2存储桶，点击 添加绑定 即可。

至此，你就可以用worker提供的默认域名访问服务了，但是默认域名*.workers.dev，国内无法访问，所以要么绑定自定义域名，要么使用edgeone来加速。

edgeone 加速折腾#

1.国内站#

ps：域名要过ICP备案，不然用不了新建路由，具体样式是这样的

ps：国内站的话默认是无法访问到worker提供的默认域名的，只能自定义一个域名，然后将edgeone的源站配置为自定义域名即可。

2. 国际站#

国际站的话，直接将edgeone的源站配置为worker提供的默认域名即可。

3. 结果#

国际站配置的打开速度会快一点，但是容易出现访问不到的情况
国内站因为多走了一遍自己的域名，所以速度会慢一点
ps：国际站没有设置优选