打造公司内部cdn 库

579 阅读3分钟

pod 设计

起因

我们公司很多后台业务,依赖的库都是来自JSDelivr的,比如vue\bootstrap\xlsx等。但2021.12.20 JSDelivr的cdn域名 cdn.jsdelivr.net ,域名发生了污染,导致我们后台下载这些库失败,页面功能都不可用了。详细情况见:jsdelivr cdn报错无法访问 - 知乎。而且这不是JSDelivr在域名上掉链子了,2019年就因为证书忘记续费,导致公司一票服务不能用。公网这些免费的cdn,虽然好用,但稳定性还是让人担心;我们公司又考核”服务可用性“指标,所以,一个稳定、速度快的 公共库 cdn就势在必行了。

思路

现在开源服务大都提供api,方便开发人员通过这些api获得库信息,比如cdnjs - The #1 free and open source CDN built to make life easier for developers,它就对外提供接口,让开发者可以获得它已缓存的所有库、库某个版下的所有文件。

有了这些api,搭建一个公司内部网站,提供库查询功能、库版本及文件列表展示功能;当要使用某个文件时,一键从公共cdn上把文件下载下来,并通过阿里云的api,上传到公司的cdn上。 结构如下:

E3F191E4-9B7A-4BCC-BE2C-6333B05FB042.png

模块拆分实现

  • 网站。网站的搭建很简单,直接使用koajs就可以了。因为页面不多,逻辑也没那么复杂,也就不用什么框架了。因为页面使用vue编写的spa,所以有一些静态文件,这里就用了一个middleware: koa-static。

  • cdnjs api拉取。这个比较简单了,使用node的https拉取对应的api接口就行了。其中比较重要的api:

    • 所有库的列表 api.cdnjs.com/libraries 它返回一个大JSON。为了加速,我们把它直接缓存在内存中,每7天同步一次这个库列表。然后这个库列表随页面一起下发,搜索的时候,直接在这个列表中过滤,就不需要通过网络查询了。

    • 获得某个库信息的api api.cdnjs.com/libraries/{… name}?fields={fields list} 。同样为了加速,我们把这些库信息存在了数据库,下次再请求时,直接读库;当然,还可以增加一层memcached,更快的提速

    • 获得某个版本的文件列表 api.cdnjs.com/libraries/{… name}/{version}。同样,这个版本和文件的对应关系也是入库了的。 注里,我们不并存储所有库信息,而是用户打开了库详情页的,才会从cdnjs拉取库信息。cdnjs有4000+的库,我们只用其中很小一部分;同样,我们也不缓存所有版本下的文件列表,因为我们几乎只用最新的几个版本。

  • 同步到公司cdn。同步到公司cdn使用了阿里云的sdk:ali-oss,用它可以方便的把文件同步到阿里cdn。当然,同步之前,还需要先把文件从api.cdnjs.com 上下载下来。

项目搭建

因为此项目包含了前端页面和后台服务代码,所以代码分成了两大块:

66146059-B802-4E93-8D7C-0E7BF568C804.png

  1. Pod/app 下是服务端代码,跑在node中的koa服务
  2. pod/src 下是前端页面代码,使用vue cli打包,生成的内容在pod/dist中

为了提高上线速度,我们把前端编译工作放在提交git之前,所以几乎所有package.json中的依赖,都放在了dev中,

9D961B44-9F74-4B73-8A95-159438CDC295.png

启动项目

项目分为前后端: 启动前端项目:npm run serve,它占用的端口是8080 启动后端项目:npm start,它占用的端口是8888

当然为了开发方便,需要配置个代理,