pm2与Verdaccio搭建私有npm库过程详解

Brigitte ·
更新时间:2024-11-13
· 354 次阅读

目录

前言

一般私有化的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库的资料请关注软件开发网其它相关文章!



npm pm2

需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章