零基础搭建 Cloudflare R2 随机图片服务

本教程将带你利用 Cloudflare 的免费资源（R2 对象存储 + Workers 边缘计算），搭建一个高性能、低成本的随机图片 API 服务。

第一步：准备 R2 存储桶与图片

首先，我们需要一个存放图片的“仓库”。

1. 登录 Cloudflare 控制台，在左侧菜单栏找到 存储和数据库 (Storage and Databases) -> R2 对象存储 (R2 Object Storage)。
2. 点击 创建存储桶 (Create Bucket)，给它起个名字（例如 my-images），区域建议选择离你目标用户较近的位置（如亚太地区），点击创建。
3. 进入刚创建好的存储桶，点击 上传对象 (Upload objects)，将你想要随机展示的图片（如 1.jpg, 2.png 等）全部上传进去。

第二步：创建 Cloudflare Worker

接下来，我们创建一个边缘函数来处理随机逻辑。

1. 在 Cloudflare 控制台首页，点击 Workers 和 Pages（或在左侧“计算”板块中找到）。
2. 点击页面右上角的 创建应用程序 (Create application)。
3. 选择 创建 Worker (Create Worker)。
4. 在弹出的页面中，给 Worker 起个名字（比如 random-img），然后点击 部署 (Deploy)。 (注：这里我们直接采用默认的 Hello World 模板进行初始化)
5. 部署成功后，点击 编辑代码 (Edit code) 进入代码编辑器。

第三步：编写随机图片核心代码

在代码编辑器中，删除左侧默认的所有代码，将以下完整的随机图片逻辑代码复制粘贴进去：

// 替换为你的 R2 存储桶绑定名称
const BUCKET_NAME = 'my-images';

export default {
    async fetch(request, env) {
        const bucket = env[BUCKET_NAME];
        
        try {
            // 1. 列出存储桶中所有对象
            const list = await bucket.list();
            const objects = list.objects;

            if (objects.length === 0) {
                return new Response('No images found', { status: 404 });
            }

            // 提取所有图片的文件名（Key）
            const keys = objects.map(obj => obj.key);

            // 2. 随机选择一个文件名
            const randomKey = keys[Math.floor(Math.random() * keys.length)];

            // 3. 获取随机图片
            const object = await bucket.get(randomKey);

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

            // 4. 返回图片响应
            const headers = new Headers();
            headers.set('content-type', object.httpMetadata?.contentType || 'application/octet-stream');
            // 可选：设置缓存
            headers.set('cache-control', 'public, max-age=86400');

            return new Response(object.body, {
                headers,
            });
        } catch (error) {
            return new Response('Error: ' + error.message, { status: 500 });
        }
    },
};

粘贴完成后，先点击右上角的 保存 (Save)（如果有），但暂时先不要点击部署，我们需要先完成下一步的绑定。

第四步：绑定 R2 存储桶到 Worker（已修正）

代码写好了，但 Worker 还不知道去哪个 R2 存储桶里拿图片，我们需要建立“绑定”关系。

1. 依然在 Worker 的管理页面，点击顶部的 绑定 (Bindings) 标签。
2. 点击 添加绑定 (Add binding) 按钮。
3. 在弹出的左侧菜单中，选择 R2 存储桶 (R2 Bucket)。
4. 填写以下信息：
   • 变量名称 (Variable name)：my-images（注意：这里必须填写你在代码第一行 const BUCKET_NAME = 'my-images'; 中定义的字符串，且要与你的 R2 存储桶实际名称保持一致）。
   • R2 存储桶 (R2 Bucket)：在下拉菜单中选择你在第一步创建的存储桶（如 my-images）。
5. 点击 部署 (Deploy) 完成绑定。

第五步：绑定自定义域名

最后，我们将官方的测试域名替换为你指定的 https://img.969393.xyz。

1. 继续在 Worker 的 设置 (Settings) 页面，点击左侧的 域和路由 (Domains & Routes)。
2. 点击 添加 + (Add +) -> 自定义域 (Custom domain)。
3. 在输入框中填入你的域名：img.969393.xyz。
4. 点击 添加自定义域 (Add custom domain)。 (注：前提是你已经将 969393.xyz 这个域名的 DNS 托管到了 Cloudflare。如果已托管，Cloudflare 会自动处理 DNS 记录，稍等片刻即可生效。)

第六步：测试访问

现在，打开浏览器访问 https://img.969393.xyz。如果一切配置正确，你应该能看到一张从你的 R2 存储桶中随机选取的图片。每次刷新页面，都会展示不同的图片。

恭喜你，你的专属随机图片服务已经搭建完成！这套方案不仅完全免费（在免费额度内），而且依托 Cloudflare 的全球网络，访问速度非常快。