npm 私有库的 CDN 方案

在之前的文章中介绍了npm私有库方案，组件包被发布到私有库，如此一来，便不能再使用开源 CDN 服务获取组件资源。本小节介绍如何利用腾讯云访问发布到 npm 私有库中的组件资源，需要开通的服务包含对象存储（COS）、内容分发网络（CDN）、云函数(Serverless)和域名解析。

为了能使用 CDN 访问组件资源，需要做的工作有如下 4 个：

将代码包存储到 COS
开启自定义 CDN 加速域名
创建解压代码包的云函数
为存储桶创建工作流

将代码包存储到 COS

用 verdaccio 搭建 npm 私有库，代码包被保存在服务器的文件系统中，现在我们要将代码包存储在 COS ，这需要修改 verdaccio 的配置文件，使用的存储插件是 verdaccio-s3-storage(github.com/remitly/ver...%25EF%25BC%258C%25E5%2585%25B6%25E7%2594%25A8%25E6%25B3%2595%25E5%25A6%2582%25E4%25B8%258B%25EF%25BC%259A "https://github.com/remitly/verdaccio-s3-storage)%EF%BC%8C%E5%85%B6%E7%94%A8%E6%B3%95%E5%A6%82%E4%B8%8B%EF%BC%9A")

yaml 复制代码

store:
  s3-storage:
    bucket: 分桶名
    keyPrefix: 路径前置（可选）
    region: 分桶所属地域
    endpoint: 访问域名
    s3ForcePathStyle: 使用s3对象样式的url，默认为false
    tarballACL: 访问权限，默认为private
    accessKeyId: API密钥SecretId
    secretAccessKey: API密钥SecretKey
    sessionToken: token。如果上述API密钥是临时的，将需要配置该token，否则不需要

假设在 COS 上创建的分桶名为 vitispkg-12345，所属地域为 ap-chengdu，修改 verdaccio 配置文件如下：

yaml 复制代码

store:
  s3-storage:
    bucket: vitispkg-12345
    region: ap-chengdu
    keyPrefix: vitispkg
    s3ForcePathStyle: false
    endpoint: https://cos.ap-chengdu.myqcloud.com
    tarballACL: public-read
    accessKeyId: AKI88*********vpX7WuHf2
    secretAccessKey: MWW********EZl

启动 verdaccio 服务，发布一个名为 math-demo 的 npm 包，发布成功后进入腾讯云对象存储控制台可得到下图所示的内容：

由上图可知，代码包以压缩包的形式保存在分桶中，当用 script 标签加载 npm 包的资源时，需要加载具体的 js 脚本，用此我们需要将 taz 压缩包解压，该工作将在后续步骤中介绍。

开启自定义 CDN 加速域名

将文件上传至存储桶后，COS 会自动生成文件链接（文件的 URL），你可以直接通过文件 URL（即 COS 默认域名）访问该文件。若你希望通过 CDN 加速访问 COS 上的文件，则需要将 CDN 域名绑定至文件所在的存储桶。开启自定义 CDN 加速域名有 4 步。

（1）登录对象存储控制台，单击左侧导航栏中的存储桶列表，进入存储桶列表页面。

（2）单击需要配置域名的存储桶，进入存储桶配置页面。存储桶配置页如下图所示：

（3）单击左侧的域名与传输管理 > 自定义 CDN 加速域名配置项，单击添加域名，配置下图展示的选项。

（4）添加域名之后进入 CDN 控制台，域名管理列表将多一条记录，如下图所示。

（5）配置 CNAME 解析。上图中的第一条记录有一个感叹号标识，鼠标悬浮到该标识后，界面将显示一个浮窗，根据提示可一键配置 CNAME 解析，也可进入 DNS 控制台手动配置。DNS 解析列表如下图所示：

这时便能用 CDN 域名访问存储桶里的文件，如 test.heyudesign.cn/test/verdac... 。

创建解压代码包的云函数

存储在 COS 的代码包是 tgz 压缩包，当我们访问 JS 和 CSS 等文件时需要的是压缩包中的文件，使用的文件链接类似于 vitispkg.heyudesign.cn/vitispkg/xx... 。这部分介绍怎么创建能解压 tgz 压缩包的云函数，分为 4 个步骤。

（1）进入 Serverless 控制点，点击左侧栏的函数服务，进入函数服务列表，界面显示的内容如下图所示。

（2）单击上图中的新建按钮，进入新建云函数的页面，在该页面你能选择一个模板，比如解压zip压缩包的函数，之后基于该模板修改即可，选择模板如下图所示：

（3）选中模板，进入下一步。配置环境变量，如下图所示：

上图中的环境变量将在函数代码中访问，如果不确定需要用到哪些环境变量，打开函数代码一看便知。接下来修改模板的函数代码，将 unzipper 替换成 compressing，用 compressing 解压压缩包，关键代码如下：

scss 复制代码

await fs
        .createReadStream(downloadPath)
        .pipe(new compressing.tgz.UncompressStream())
        .promise()

除了修改 index.js，还需要修改 package.json，将 compressing 写入 dependencies 字段。接下来展开高级配置，将命名空间选中 COS，不存在，则创建 COS 命名空间。另外还要开启高级配置中的异步执行和状态追踪，如下图：

新建云函数的最后一步是触发器配置，如下图:

（4）完成第 3 步中的配置项之后，单击页面底部的完成按钮，该函数将进入部署阶段。返回函数服务列表将看到新增的函数，如下图:

为存储桶创建工作流

到目前为止我们创建了一个用于解压 tgz 的云函数，接下来便是将该函数绑定到存储桶的工作流中，使 tgz 压缩包上传到指定目录之后，云函数能解压 tgz 并将结果存放在另一个目录。这里有 3 个步骤。

（1）单击需要配置工作流的存储桶，进入存储桶配置页面 > 任务与工作流 > 工作流管理。得到的结果如下图所示：

（2）单击创建工作流的按钮，得到下图的结果，根据页面上的提示填写配置项。

上图中展示的配置工作流栏目是重点关注对象，在这里将使用解压tgz压缩包的云函数，单击输入标识，将出现一个浮窗，如下图所示：

单击上图中的自定义函数，在弹出层中的选择解压 tgz 压缩包的云函数，如下图所示：

（3）保存工作流，测试工作流是否能成功执行，如下图所示

开启上传触发执行后，发布新 npm 代码包上传的 tgz 压缩包将进入此工作流进行解压，解压后将能用 CDN 访问其中的 npm 组件资源。

npm 私有库的 CDN 方案

将代码包存储到 COS

开启自定义 CDN 加速域名

创建解压代码包的云函数

为存储桶创建工作流

推荐阅读