Cloudflare Workers配合github搭建个人图床

之前一直在使用 GitHub 的公开仓库和 jsDelivr 代理作为个人图床,直到最近 jsDelivr 喜提认证无法使用。尽管还有其他的 CDN 代理可以使用,但是还是有被墙的风险,到时候修改图片链接就太麻烦了。如需稳定的使用图床,需要自己使用服务器对 GitHub 进行反代或购买云存储服务,增加了成本。近期研究后,发现了一个几乎零成本的解决方案,用作本人目前图床方案,推荐给大家。

该方案的主要思路是使用 Cloudflare 的 Workers 来代理 github 私有仓库中文件的地址,并绑定自己的域名进行使用。该方案主要优势是:

  1. github 服务稳定,不会跑路。
  2. 相比有免费额度的存储服务 – 七牛云和 backblaze 等,github 没有额度的限制。
  3. 使用的是 github 的私有仓库,存储里的文件列表并不会像公开仓库一样全部对外暴露,有一定的安全性。
  4. 使用自己的域名,方便以后可能的服务迁移。
  5. Cloudflare Workers 每天有 10 万次的免费请求额度,正常使用不可能用完。

使用该方案你需要以下东西:

  • 一个没有被墙的域名。免费的也行。
  • Cloudflare 账号。免费,直接注册即可。
  • github 账号,也是免费 。

创建 github 私有仓库并获取个人访问令牌

首先,在 github 上建一个私有仓库

图片[1]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

然后,在 GitHub 上生成一个 Personal access token(个人访问令牌),用于身份验证。在 GitHub 网站上登录账户,点击右上角用户头像,进入 Settings(设置)页面。在这个页面中左侧侧边栏选择 Developer settings(开发人员设置),然后点击 Personal access tokens(个人访问令牌)菜单里的 Token classic,点击 Generate new token 开始创建一个新的令牌,注意一定要选择 classic 方式。
创建 github 令牌直达链接

图片[2]-Cloudflare Workers配合github搭建个人图床-杨公子的博客
图片[3]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

在创建页面中,填写 Note 为 “图床”,Expiration(过期时间)为 No expiration(永久),在下面的 Select scopes(选择权限范围)如下图勾选 repo。最后点击 generate token 生成令牌即可。

图片[4]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

在生成后的页面中会看到新生成的 github 令牌,该令牌后面会使用到。

务必将令牌保存起来,放在一个安全的地方,页面关掉后就看不到了。

在 Cloudflare 上创建用于代理的 Worker

登录到 Cloudflare 的管理界面后,点击侧边栏的 “Workers” 选项,然后点击 “创建服务” 创建一个 Worker。

图片[5]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

创建好后了后,点击编辑:将下面的代码复制粘贴到编辑页面的代码编辑器中。

// Website you intended to retrieve for users.
const upstream = "raw.githubusercontent.com";

// Custom pathname for the upstream website.
// (1) 填写代理的路径,格式为 /<用户>/<仓库名>/<分支>
const upstream_path = "/yuanwen0327/assets/main";

// github personal access token.
// (2) 填写github令牌
const github_token = "";

// Website you intended to retrieve for users using mobile devices.
const upstream_mobile = upstream;

// Countries and regions where you wish to suspend your service.
const blocked_region = [];

// IP addresses which you wish to block from using your service.
const blocked_ip_address = ["0.0.0.0", "127.0.0.1"];

// Whether to use HTTPS protocol for upstream address.
const https = true;

// Whether to disable cache.
const disable_cache = false;

// Replace texts.
const replace_dict = {
  $upstream: "$custom_domain",
};

addEventListener("fetch", (event) => {
  event.respondWith(fetchAndApply(event.request));
});

async function fetchAndApply(request) {
  const region = request.headers.get("cf-ipcountry")?.toUpperCase();
  const ip_address = request.headers.get("cf-connecting-ip");
  const user_agent = request.headers.get("user-agent");

  let response = null;
  let url = new URL(request.url);
  let url_hostname = url.hostname;

  if (https == true) {
    url.protocol = "https:";
  } else {
    url.protocol = "http:";
  }

  if (await device_status(user_agent)) {
    var upstream_domain = upstream;
  } else {
    var upstream_domain = upstream_mobile;
  }

  url.host = upstream_domain;
  if (url.pathname == "/") {
    url.pathname = upstream_path;
  } else {
    url.pathname = upstream_path + url.pathname;
  }

  if (blocked_region.includes(region)) {
    response = new Response(
      "Access denied: WorkersProxy is not available in your region yet.",
      {
        status: 403,
      }
    );
  } else if (blocked_ip_address.includes(ip_address)) {
    response = new Response(
      "Access denied: Your IP address is blocked by WorkersProxy.",
      {
        status: 403,
      }
    );
  } else {
    let method = request.method;
    let request_headers = request.headers;
    let new_request_headers = new Headers(request_headers);

    new_request_headers.set("Host", upstream_domain);
    new_request_headers.set("Referer", url.protocol + "//" + url_hostname);
    new_request_headers.set("Authorization", "token " + github_token);

    let original_response = await fetch(url.href, {
      method: method,
      headers: new_request_headers,
      body: request.body,
    });

    connection_upgrade = new_request_headers.get("Upgrade");
    if (connection_upgrade && connection_upgrade.toLowerCase() == "websocket") {
      return original_response;
    }

    let original_response_clone = original_response.clone();
    let original_text = null;
    let response_headers = original_response.headers;
    let new_response_headers = new Headers(response_headers);
    let status = original_response.status;

    if (disable_cache) {
      new_response_headers.set("Cache-Control", "no-store");
    } else {
      new_response_headers.set("Cache-Control", "max-age=43200000");
    }

    new_response_headers.set("access-control-allow-origin", "*");
    new_response_headers.set("access-control-allow-credentials", true);
    new_response_headers.delete("content-security-policy");
    new_response_headers.delete("content-security-policy-report-only");
    new_response_headers.delete("clear-site-data");

    if (new_response_headers.get("x-pjax-url")) {
      new_response_headers.set(
        "x-pjax-url",
        response_headers
          .get("x-pjax-url")
          .replace("//" + upstream_domain, "//" + url_hostname)
      );
    }

    const content_type = new_response_headers.get("content-type");
    if (
      content_type != null &&
      content_type.includes("text/html") &&
      content_type.includes("UTF-8")
    ) {
      original_text = await replace_response_text(
        original_response_clone,
        upstream_domain,
        url_hostname
      );
    } else {
      original_text = original_response_clone.body;
    }

    response = new Response(original_text, {
      status,
      headers: new_response_headers,
    });
  }
  return response;
}

async function replace_response_text(response, upstream_domain, host_name) {
  let text = await response.text();

  var i, j;
  for (i in replace_dict) {
    j = replace_dict[i];
    if (i == "$upstream") {
      i = upstream_domain;
    } else if (i == "$custom_domain") {
      i = host_name;
    }

    if (j == "$upstream") {
      j = upstream_domain;
    } else if (j == "$custom_domain") {
      j = host_name;
    }

    let re = new RegExp(i, "g");
    text = text.replace(re, j);
  }
  return text;
}

async function device_status(user_agent_info) {
  var agents = [
    "Android",
    "iPhone",
    "SymbianOS",
    "Windows Phone",
    "iPad",
    "iPod",
  ];
  var flag = true;
  for (var v = 0; v < agents.length; v++) {
    if (user_agent_info.indexOf(agents[v]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
}

图片[6]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

如图,有 2 个地方的代码需要自己修改一下。第一个是代理的路径,需要改写成自己的用户 / 仓库 / 分支,用户和仓库可以在 github 私有仓库页的 url 上看到,如 https://github.com/whggo/pic,whggo 是用户名,pic 是仓库名,分支现在一般默认是 main。第二是令牌,需要修改成之前 github 上申请的令牌。
大概讲一下,这串代码的作用:

  1. 反向代理了 github 仓库。
  2. 使用令牌获取文件。
  3. 开启了缓存,避免重复请求图片。

最后配置自定义域名

图片[7]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

配置 picgo 图床软件

picgo 下载地址
下载 picgo 并安装好后,按下图进行配置。仓库名为用户/仓库,分支为 main,Token 为保存的 github 令牌,存储路径我这里定义的是 img/,域名为之前绑定的 Worker 服务的域名。

图片[8]-Cloudflare Workers配合github搭建个人图床-杨公子的博客

保存并设为默认图床后,可以上传几张图片试一下,上传成功的图片路径应该是自己的域名 + 路径 + 文件名,如:https://pic.510777.xyz/img/10.png

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片