前言
一般私有化的npm仓库有以下几种方法实现:
下面对各个方案进行一个粗浅的对比:
为什么选用Verdaccio?
安装
修改配置
配置文件
权限把控
部署
docker部署
pm2部署
管理npm仓库源
npm包发布
注册
登录
发布
删除
前言最近开会的时候讨论到前端组件库搭建,因为需要多人协作,使用npm link等都比较麻烦,且当业务规模较大了之后,我们一般会有自己的脚手架,自己的全局工具包等等。其中可能包含了自身的业务代码不能公开,因此我们都需要一个私有化的npm仓库。
一般私有化的npm仓库有以下几种方法实现:通过npm购买私有服务
通过git直接引用
通过开源项目直接搭建,例如cnpm、verdaccio、sinopia等
下面对各个方案进行一个粗浅的对比:官方私有npm服务:团队版$7/人/月这个价格就已经直接劝退,且不说npm在国内的网络情况不容乐观。
直接安装git代码:直接通过npm install 引入对应git代码确实有一定的便利性,但是当全局包多了之后不便于维护且权限难以管理
sinopia:基于Node.js实现的一个开源npm库,年久失修。最近一次提交是6年前,直接放弃。
cnpm:阿里出的npm私有方案,权限控制较为全面但是配置复杂,需要自己搭建mysql之类的数据库存储。
verdaccio:基于sinopia继续开发,目前维护很频繁而且配置简单,可以快速搭建。
为什么选用Verdaccio?https://verdaccio.org/
先跟大家吐个槽,其实我本来是想用sinopia搭建的私服,也知道大家也都倾向于sinopia来搭,毕竟它出道比较早,知名度比较高,但是sinopia的作者几年前就已经停止了对sinopia的维护和升级,不信大家可以自己去GitHub上看,上次更新真的停留在了几年前,唉,然后真是留了一堆坑,所幸不是没人管,只是有一群人又出了一个sinopia的fork,也就是sinopia的分支,而且还起了个洋气的意大利名verdaccio ,但是verdaccio 确实是正在维护的,我查了最近一次更新还是在2天前,这帮人还是挺勤快的,造福了大家啊~ 而且也比较好用,我用sinopia搭的时候填的一堆坑在verdaccio 这压!根!不!存!在!真是绝望啊,为啥我没有早点发现它。这里是verdaccio 在github的源码地址,大家想深入了解最好还是去看看源码和详细介绍。话不多说下面正式开始verdaccio的搭建。
安装Verdaccio 的安装启动过程较为简单。首先是全局安装 Verdaccio:
npm i -g verdaccio
然后,在终端中输入 verdaccio 命令启动 Verdaccio:
接着 Verdaccio 会在终端中输出提示,输出它的配置文件位置、启动的服务地址等信息:
默认 Verdaccio 启动的服务都会在 4873 这个端口,在浏览器中打开这个地址我们就会看到 Verdaccio 搭建的私有库 npm 的界面:
修改配置虽然,安装和启动好了 Verdaccio。但是,由于 Verdaccio 默认的配置和我们生产的需求不一致,所以我们需要修改一下 Verdaccio 的配置。
在生产环境下,私有 npm 库需要具备以下 3 个功能:
支持对 npm 包的搜索
严格的权限把控,npm 包的访问只能是已注册的用户。并且在一些场景下,需要删除用户
配置文件npm i -g verdaccio
# 存放软件所有软件包的目录
storage: ../storage
# 存放所有插件的目录
plugins: ../plugins
web:
# 网站Title
title: Verdaccio
# 禁用Gravatar头像
# gravatar: false
# 排序方式 asc|desc
# sort_packages: asc
# 是否启用暗黑模式
# darkMode: true
# logo地址
# logo: http://somedomain/somelogo.png
# favicon地址
# favicon: http://somedomain/favicon.ico | /path/favicon.ico
# i18n翻译配置
# i18n:
# 可用列表见:https://github.com/verdaccio/ui/tree/master/i18n/translations
# web: en-US
auth:
htpasswd:
file: ./htpasswd
# 最大注册用户数,默认为 "+inf".
# 可用通过设置为-1禁止注册
# max_users: 1000
# 上游npm库,这里可用设置为淘宝
uplinks:
npmjs:
url: https://registry.npmjs.org/
packages:
# 作用域包
'@*/*':
# 允许所有人访问
access: $all
# 注册用户可访问
publish: $authenticated
# 注册用户可访问
unpublish: $authenticated
proxy: npmjs
'**':
# 默认情况下所有用户 (包括未授权用户) 都可以查看和发布任意包
# 你可以指定 用户名/分组名 (取决于你使用什么授权插件,默认的授权插件是内置的 htpasswd)
# 访问权限有三个关键词: "$all", "$anonymous", "$authenticated"
# $all 表示不限制,任何人可访问;
# $anonymous 表示未注册用户可访问;
# $authenticated 表示只有注册用户可访问
access: $all
# 允许所有注册用户发布/撤销已发布的软件包
# (注意:默认情况下任何人都可以注册)
publish: $authenticated
unpublish: $authenticated
# 如果私有包服务不可用在本地,则会代理请求到'npmjs'
proxy: npmjs
# 您可以指定传入连接的HTTP /1.1服务器保持活动超时(以秒为单位)。
# 值为0会使http服务器的行为类似于8.0.0之前的Node.js版本,后者没有保持活动超时。
# 解决方法:通过给定的配置可以解决以下问题
server:
keepAliveTimeout: 60
# 中间件
middlewares:
audit:
enabled: true
# 日志设置
logs: { type: stdout, format: pretty, level: http }
# 开放远程访问,允许所有IP
listen:
- 0.0.0.0:4873
这里我们来逐个认识一下默认配置中的几个值的含义:
storage | 已发布的包的存储位置,默认存储在 ~/.config/Verdaccio/ 文件夹下 |
plugins | 插件所在的目录 |
web | 界面相关的配置 |
auth | 用户相关,例如注册、鉴权插件(默认使用的是 htpasswd) |
uplinks | 用于提供对外部包的访问,例如访问 npm、cnpm 对应的源 |
packages | 用于配置发布包、删除包、查看包的权限 |
server | 私有库服务端相关的配置 |
middlewares | 中间件相关配置,默认会引入 auit 中间件,来支持 npm audit 命令 |
logs | 终端输出的信息的配置 |
权限把控指的是我们需要私有 npm 库上发布的包只能团队成员查看,除此之外人员不能看到一切信息。那么,回到 Verdaccio,我们需要做这 2 件事:
限制 npm 包的查看,只能为已注册的用户
禁止用户注册(在团队成员已注册完成后)
相应地,这里我们需要修改配置文件的 pacakges 和 auth。前面我们也提及了 packages 是用于配置发布包、查看包、删除包相关的权限。我们先再来看看默认的配置:
packages:
'@*/*':
access: $all
publish: $authenticated
unpublish: $authenticated
proxy: npmjs
'**':
access: $all
publish: $authenticated
unpublish: $authenticated
proxy: npmjs
这里的 key 代表对应权限需要匹配的包名,例如对于第一个,如果我们发布的包名是这样的 @wjc/test 就会命中。每个规则中对应 4 个参数。其中 proxy 代表如果在私有 npm 库找不到,则会代理到 npmjs(对应 unlinks 中的 npmjs 的 registry.npmjs.org/)。而剩下的 3 个参数,都是用来设置包相关的权限,它有三个可选值 all(所有人)、all(所有人)、all(所有人)、anonymous(未注册用户)、$authenticated(注册用户)。那么,下面我们分别看一下这 3 个参数的含义:
access 控制包的访问权限
publish 控制包的发布权限
unpublish 控制包的删除权限
显然,这里我们需要的是只有用户才能具备上述 3 个权限,即都设置为 $authenticated:
'@*/*':
access: $authenticated
publish: $authenticated
unpublish: $authenticated
proxy: npmjs
'**':
access: $authenticated
publish: $authenticated
unpublish: $authenticated
proxy: npmjs
设置好 packages 后,我们还得更改 auth 的值,因为此时注册用户是没有限制的,也就是说如果你的私有 npm 库部署在外网环境的话,任何人都可以通过 npm adduser 命令注册用户。
显然,这是不允许出现的情况,所以这里我们需要设置 auth 的 max_users 为 -1,它代表的是禁用注册用户:
auth: max_users: -1
部署verdaccio提供了docker和全局包2种方式进行安装,下面是两种安装方式的详细步骤
docker部署docker不太熟,感兴趣的可以去尝试。
# 拉取verdaccio docker镜像
$ docker pull verdaccio/verdaccio:nightly-master
# 查看docker镜像
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
verdaccio/verdaccio nightly-master 32713721fda5 16 hours ago 580MB
# 拷贝下面配置文件到本地~/docker/verdaccio目录
$ cp config.yaml ~/docker/verdaccio
# 启动docker容器
# -d: 在后台开启docker进程
# --name: 给容器指定一个名称
# --p: 将本机的4873端口映射到docker的4873端口
# --restart=always: 自动重启容器
# -v: 将本地~/docker/verdaccio目录挂载到docker的/verdaccio/conf目录
$ docker run --restart=always -d -v ~/docker/verdaccio:/verdaccio/conf --name verdaccio -p 4873:4873 verdaccio/verdaccio
# 查看docker容器
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
6aac1ea8707a verdaccio/verdaccio "uid_entrypoint /bin…" 2 minutes ago Up 2 minutes 0.0.0.0:4873->4873/tcp, :::4873->4873/tcp verdaccio
这样我们就完成了verdaccio在docker上的部署,其中我们将~/docker/verdaccio这个文件夹挂载到docker的/verdaccio/conf文件夹,verdaccio在启动时会自动寻找/verdaccio/conf/config.yaml文件作为配置。
pm2部署pm2的部署相对于docker需要安装node。但是相对的部署起来会更快捷,可以根据自己需要选择。
管理npm仓库源这里推荐使用nrm来管理npm的源
# 全局安装nrm
$ npm install -g nrm
# 添加私有库
$ nrm add verdaccio http://{地址}:4873/
# 查看现有的npm源
$ nrm ls
npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.cloud.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/
* verdaccio ---- http://{地址}:4873/
# 设置npm源
$ nrm use verdaccio
npm包发布
注册
# 注册用户,这里因为方便演示,所以没有关闭注册。Username:用户名 Password:密码
$ npm adduser
npm notice Log in on http://{地址}:4873/
Username: yourusername
Password:
Email: (this IS public) xxxxxx@qq.com
Logged in as yourusername on http://{地址}:4873/.
登录
# 登录用户
$ npm login
npm notice Log in on http://{地址}:4873/
Username: yourusername
Password:
Email: (this IS public) xxxxxx@qq.com
Logged in as yourusername on http://{地址}:4873/
# 查看当前登录用户
$ npm who am i
yourusername
发布
# 发布当前包
$ npm publish
npm notice Hui-ui-vue@0.1.0
npm notice === Tarball Contents ===
npm notice 611B public/index.html
npm notice 4.3kB public/favicon.ico
npm notice 73B babel.config.js
npm notice 151B packages/baseInput/index.js
npm notice 214B packages/index.js
npm notice 130B examples/main.js
npm notice 730B vue.config.js
npm notice 891B package.json
npm notice 310B README.md
npm notice 6.8kB examples/assets/logo.png
npm notice 344B examples/App.vue
npm notice 199B packages/baseInput/src/baseInput.vue
npm notice 2.0kB examples/components/HelloWorld.vue
npm notice === Tarball Details ===
npm notice name: Hui-ui-vue
npm notice version: 0.1.0
npm notice package size: 10.5 kB
npm notice unpacked size: 16.8 kB
npm notice shasum: 08de3054edbef6c1706f849e40d05e99c16c607e
npm notice integrity: sha512-6sVp52WobtHhq[...]bXfgebrphWd+Q==
npm notice total files: 13
npm notice
+ Hui-ui-vue@0.1.0
# 最后看到 + [你的包名@版本号]既可
需要注意的是相同的包上传时版本号需要不同,否则上传会失败。
删除进入包文件路径直接删除即可。
以上就是pm2与Verdaccio搭建私有npm库过程详解的详细内容,更多关于pm2 Verdaccio搭建npm库的资料请关注软件开发网其它相关文章!