pm2 Verdaccio搭建npm库

施强前端团队 2022-09-29 我要评论

前言

最近开会的时候讨论到前端组件库搭建，因为需要多人协作，使用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 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
# 最后看到 + [你的包名@版本号]既可

需要注意的是相同的包上传时版本号需要不同，否则上传会失败。

删除

进入包文件路径直接删除即可。