把 GitHub 仓库变成你的存储服务

type

Post

status

Published

date

Feb 16, 2023

slug

github-user-content

summary

把 GitHub 仓库变成你的存储服务！Zeabur 服务图标文件存储实践。

GitHub User Content

raw.githubusercontent.com

GitHub 有一个专门的素材(assets)服务器，用来存储用户上传的文件，比如 issue 中的图片等等，放在亚马逊 S3 上。

举个例子，我们在仓库里存放了一个 Docker 的图标文件，如果我们直接点击来访问的话，看到的将会是这个样子：

但当我们点击上图的 Raw 按钮，就可以切换到 raw.githubusercontent.com 界面。

可以看到，地址栏变成了 raw.githubusercontent.com/[user-name]/[service-name]/[branch][file-path] ，这就是在 GitHub 素材服务器上访问这张图片的具体路径。

把 GitHub 变成你的图片存储服务

有了上面的介绍，我们很方便地就能拿到我们仓库中图片的具体访问地址。我们就不需要把项目中需要用到的图标全部打包进来，而是替换成 GitHub 存储的地址，需要时再去访问，能够有效减少项目的体积，也方便于修改以及维护我们的图标库。

Zeabur 是一个帮助开发者们可以一键部署自己的服务的平台，无论您的项目使用的是何种编程语言或开发框架。在 Zeabur 中，我就需要为各种服务都准备一个图标，而 Zeabur 现在已支持数十种服务类型，支持的服务数量后续也会不断增加，将图标全部打包放入网站显然不是一个合理的做法。

于是，我就选择了新建一个专门用来存储各种服务的图标的 GitHub 仓库，将其作为我的对象存储服务，接下来介绍一下实现的思路和过程。

Zeabur 的语言/框架识别能力

Zeabur 能够自动地识别用户的项目所使用的编程语言以及框架，从而为其选择更佳的部署策略。例如，对于用户部署的一个 Next.js 项目，Zeabur 将自动识别出这个项目使用的框架，并自动归类于 [GIT]/[Node.js]/[Next.js] 的格式。

图片动态路径

Zeabur 通过分析得到了用户所使用的具体的框架/语言，就可以通过该结果来构建出图片的动态路径。

先设定基准链接为 raw.githubusercontent.com/zeabur/service-icons/main ，再根据识别出的服务来构建具体的链接，比如 Next.js 图标的路径就将是 raw.githubusercontent.com/zeabur/service-icons/main/git/nodejs/next.js.svg

最后再将其设置为图片的 src 属性即可。

镜像加速

由于某些原因，GitHub 的访问速度可能会变得很慢或是不够稳定，这时候就需要使用镜像来加速我们的访问。

对于 GitHub 上的 raw 文件，也有一些很好的镜像服务，例如 https://raw.staticdn.net 或者 https://raw.fastgit.org 对于无法正常访问 GitHub 的用户，Zeabur 将自动切换使用镜像站点来获取图片。

题外话

除了一些优秀的图片云存储，图片 CDN 服务，Zeabur 本身也已经支持对象存储服务，那为什么还选择了 GitHub 来做这件事情呢？主要考量了以下几点：

实现和维护较为方便，对于图标的修改或者新增，就直接通过 Git 来同步即可；

扩展性。Zeabur 已经支持数十种服务，未来的支持范围也会不断扩大，而服务的图标也许会有更新，我们可能无法及时注意到这件事情，往往需要使用这种服务的用户的反馈。而通过 GitHub 开源仓库来存储的模式，就能给用户一个很好的反馈/贡献渠道，用户可以直接开 issue 反馈或者直接提交 PR 更换新图标 😆