携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

作者：求玮

前言

最近开会的时候讨论到前端组件库搭建，因为需要多人协作，使用npm link等都比较麻烦，且当业务规模较大了之后，我们一般会有自己的脚手架，自己的全局工具包等等。其中可能包含了自身的业务代码不能公开，因此我们都需要一个私有化的npm仓库。

一般私有化的npm仓库有以下几种方法实现：

1. 通过npm购买私有服务
2. 通过git直接引用
3. 通过开源项目直接搭建，例如cnpm、verdaccio、sinopia等

下面对各个方案进行一个粗浅的对比：

• 官方私有npm服务：团队版$7/人/月这个价格就已经直接劝退，且不说npm在国内的网络情况不容乐观。
• 直接安装git代码：直接通过npm install 引入对应git代码确实有一定的便利性，但是当全局包多了之后不便于维护且权限难以管理
• sinopia：基于Node.js实现的一个开源npm库，年久失修。最近一次提交是6年前，直接放弃。
• cnpm：阿里出的npm私有方案，权限控制较为全面但是配置复杂，需要自己搭建mysql之类的数据库存储。
• verdaccio：基于sinopia继续开发，目前维护很频繁而且配置简单，可以快速搭建。

为什么选用Verdaccio？

先跟大家吐个槽，其实我本来是想用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 会在终端中输出提示，输出它的配置文件位置、启动的服务地址等信息：

默认 Verdaccio 启动的服务都会在 4873 这个端口，在浏览器中打开这个地址我们就会看到 Verdaccio 搭建的私有库 npm 的界面：

修改配置

虽然，安装和启动好了 Verdaccio。但是，由于 Verdaccio 默认的配置和我们生产的需求不一致，所以我们需要修改一下 Verdaccio 的配置。

在生产环境下，私有 npm 库需要具备以下 3 个功能：

• 支持对 npm 包的搜索
• 严格的权限把控，npm 包的访问只能是已注册的用户。并且在一些场景下，需要删除用户

配置文件

vim /root/.config/verdaccio/config.yaml

 # 存放软件所有软件包的目录

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（所有人）、$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

# 最后看到 + [你的包名@版本号]既可

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

删除

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