开发者的窘境

let-the-bullets-fly

最近因为个人需求,所以又重新体验了下国内 VPS 以及「云函数」(Serverless)。本来本地调试好没问题的服务,提交上去后要么是连个依赖都装不下来,排查问题大部分的解决方案就是挨个去切换国内源,要么就是龟速等半天,浪费大量的时间在网络等待上。

深刻体会到,阻挡中国大陆开发者进步的三大阻碍我认为是网络,网络,还是他妈的网络!

当然本文也不是教你如何解决网络问题,而是对于这种情况我的应对方法。

切入

切入点是博客,因为 之前迁移到了 Cloudflare Pages ,还特意做了国内外分流加速。经过我的分析,大陆 CDN 回源 Cloudflare Pages 首次速度不太理想,如果再搞一份大陆 COS 副本又没有太大的收益。

并且 GitHub 周边生态太好用了,结合 Actions 简直不要太方便。虽然也尝试了腾讯云的 Serverless,体验不太好,主要是网络问题导致无法融入到 GitHub 生态中去。每次改动只好用 Go,在本地跨平台编译打包后在官方控制台把二进制手动上传上去,再编辑各种触发条件,这是什么体验 😰 ?

目标

Simple and Effective.

依据目前的数据统计来看,其实分流已无必要,所以最后统一回归到了 GitHub + Cloudflare Pages,围绕 GitHub 来进行代码管理和服务构建。

担心访问速度?如果你能正常使用 GitHub,那速度就不会慢 🤓 。

操作

针对本站其实只有 2 点需要兼容下:一是站点内容本身,二是图片资源。

这俩其实都在七牛上,并支持了 HTTPS。因为是副本,且有各自的缓存体系,所以每次更新都会有短暂的不一致的问题,目前还是通过 GitHub Actions 调用它们的 API 解决的 😂 。

对于站点内容本身。得益于之前通过 DNS 分流的设定,所以直接把分流策略去掉就行了。

对于图片资源。对比了各种方案之后,发现我对图片资源的诉求其实很少,直到现在才不到 90 张图片,所以完全可以跟随博客一起管理,所以直接编码为无损 WebP 存储到仓库就好了

webp-usage

图片的处理

  1. 图片资源获取。七牛的 COS 的控制台上不支持数据打包下载,也不能直接下载目录,只能挨个目录点进去下载里面的文件 💩 。好在提供了一个脚本工具,用于批量下载。

  2. 数据编码 WebP。为了减少适配工作,所以目录结构保持不变,只是使用 cwebp 把文件编码为了 WebP 格式(使用 -lossless 进行无损编码),写了个简单的脚本快速处理下,就完事了。

<?php

$path = '~/Downloads/images';
$dirInfo = dirToArray($path);

$a = genBlockContent($dirInfo, $path);

var_dump($a);

function genBlockContent($dirInfo, $path)
{
    $result = [];
    foreach ($dirInfo as $key => $info) {
        if (is_array($info)) {
            $result = array_merge($result, genBlockContent($info, $path . DIRECTORY_SEPARATOR . $key));
            continue;
        }
        $p = $path . DIRECTORY_SEPARATOR . $info;
        $code = -1;
        $t = '';
        exec(sprintf('/usr/local/bin/cwebp -lossless %s -o %s', $p, $path . DIRECTORY_SEPARATOR . pathinfo($p, PATHINFO_FILENAME) . '.webp'), $t, $code);
        $result[$p] = $code;
        if ($code == 0) {
            $result[$p] = (int)unlink($p);
        }
    }
    return $result;
}

function dirToArray($dir)
{
    $filter = ['.', '..', '.git', '.DS_Store'];
    $keepExt = ['jpg', 'png'];

    $result = [];
    $cdir = scandir($dir);
    foreach ($cdir as $key => $value) {

        if (in_array($value, $filter, true)) {
            continue;
        }

        if (is_dir($dir . DIRECTORY_SEPARATOR . $value)) {
            $result[$value] = dirToArray($dir . DIRECTORY_SEPARATOR . $value);
            continue;
        }

        if (in_array(pathinfo($dir . DIRECTORY_SEPARATOR . $value, PATHINFO_EXTENSION), $keepExt, true)) {
            $result[] = $value;
        }
    }

    return $result;
}
  1. 资源构建处理。直接利用 Github Actions 和 Cloudflare Wrangler 工具就能完成自定义部署工作。

  2. DNS 切换。最后再把 DNS 从七牛切换为 Cloudflare 就完事了。

收尾

至此就已经全部迁移完毕,只用维护 GitHub 一个仓库就好了,其他都是自动处理到 Cloudflare。并且我发现 Cloudflare 在 HTTP 协议这块的处理是非常标准且优秀的,从中我还学到了不少协议细节的知识,比自己处理要靠谱省心多 😴 。

为了方便自己处理图片,顺手修改了下 PicGo 的图片插件 picgo-plugin-compress-webp-lossless ,主要是调整了 WebP 的编码参数为无损,方便存储,压缩到不是主要目的了。 已发布 npm ,直接在插件设置中搜索即可安装。

最后

每次查问题发现是因为网络原因,或者是因为网络原因导致本来很快能解决的问题,要花费很大的精力去解决这种「非技术问题」,就会让我很苦恼,时间就这样浪费在了毫无意义的内容上,甚至还不如玩会手机。

曾经的顺畅到现在的困阻,这不是网络的问题,而是我的问题,也可能是你的问题。

其实操作完毕后,我的处理并不会国内网络带来新的东西,反之可能还会让它的多样性变少一点,但是谁又在意呢?

但是我知道我不是第一个,肯定也不会是最后一个。