简介

unpkg 是一个前端常用的公共 CDN，它通过 URL 语法完成了别人 web 界面内才能达到的效果，简洁而优雅，在流行的类库、框架文档中常常能看到它的身影。

我发现这个项目很有趣，可以在线预览目录及文件。在网上寻找了相关资料，很少有对这个项目详细分析解读的，所以决定仔细分析一下实现原理并尝试私有化部署。

先看一下UNPKG官网的访问效果；

unpkg.com/browse/reac… 效果如下：

同时也支持源文件直接使用：unpkg.com/react@17.0.…

相关链接：

源码分析

先分析一下源码

目录视图

这里的pm2.config.js是我为了启动服务和记录日志及方便添加process.env参数所以加上的。

主要文件注释

我根据自己的理解，给主要的目录及文件添加了一些注释。

我添加了部分打印信息，帮助理解：

在浏览器可以通过打印全局变量window.DATA 查看相关参数

UNPKG的接口请求

主要请求镜像源的API，比如registry.npmjs.org 镜像源，可以通过registry.npmjs.org/react?meta

或者registry.npmjs.org/react/17.0.… 进行接口请求，获取相关npm包的信息及文件路径。

UNPKG通过对用户请求URL的解析获取请求参数packageName、packageVersion、packageSpec、filename。然后请求镜像源接口，获取到信息和stream。然后通过该SSR渲染到前端页面中预览。

工作流程

通过对源码的阅读，UNPKG的主要工作流程是这样的：

watermark (1).jpg

私有化部署

知道工作原理后，想私有化部署到我自己的服务器上。这里需要做少许改定。一方面是因为有cloudflare接口鉴权校验，所以需要注释掉。另一名面我不想用一级域名直接被占用，所以增加Nginx配置。

去掉接口鉴权校验：

链接替换成第三方链接或者自己的链接：

增加PM2配置，记录相关日志：

增加启动脚本;

Nginx配置

我的域名信息是timesky.top 不想一级域名被占用，只想代理/browse/开头的路径代理到我的服务端口8091就可以了，另外包请求类似timesky.top/react@17.0.… 这种path第一部分包含@的也代理到8091端口即可

 location ~ ^/.+@.+/.+$ {
        proxy_pass http://127.0.0.1:8091$uri;
        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Cookie $http_cookie;
}
 location ~ ^/.+@.+/.+$ {
        proxy_pass http://127.0.0.1:8091$uri;
        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Cookie $http_cookie;
}

复制代码