通过verdaccio搭建私有的包管理器

前言

刚通过sinopia 去搭建私有包管理器，并记录了过程：通过sinopia搭建私有的包管理器，就发现了verdaccio，有更好的当然去尝试，下面我将记录自己的配置过程。

verdaccio 介绍

官方的介绍（不翻译了）：

It's a web app based on Node.js
It's a private npm registry
It's a local network proxy
It's a Pluggable application
It's a fairly easy install and use
We offer Docker and Kubernetes support
It is 100% compatible with yarn, npm and pnpm
It was forked based on sinopia@1.4.0 and 100% backward compatible.
Verdaccio means A green color popular in late medieval Italy for fresco painting.

他是从sinopia fork 过来，并在此基础上进行完善的。文档也非常的齐全。下面开始踩坑。

服务端配置

准备工作 如果需要安装最新版本，那么node >= 6.12.0，npm >=3.x，浏览器需要使用Chrome, Firefox, Edge, 或者IE9

安装使用 npm

$ npm install -g verdaccio

或者使用yarn

$ yarn global add verdaccio

启动 verdaccio

$ verdaccio

将会看到

 warn --- config file  - C:\Users\shuwei\AppData\Roaming\verdaccio\config.yaml
 warn --- Plugin successfully loaded: htpasswd
 warn --- Plugin successfully loaded: audit
 warn --- http address - http://localhost:4873/ - verdaccio/3.2.0

打开目录到（你的和我的不一样） C:\Users\shuwei\AppData\Roaming\verdaccio 会看到一个 storage目录，这里将来会放置私有的包。还有一个config.yaml配置文件，这是一个很重要的文件，后面会说。

启动verdaccio 也支持传入参数，如

verdaccio --listen 4001 --config C:\Users\shuwei\AppData\Roaming\verdaccio\config.yaml

将会看到

warn --- config file  - C:\Users\shuwei\AppData\Roaming\verdaccio\config.yaml
 warn --- Plugin successfully loaded: htpasswd
 warn --- Plugin successfully loaded: audit
 warn --- http address - http://localhost:4001/ - verdaccio/3.2.0

当然访问地址也可以直接在 config.yaml文件中添加

# listen
listen:127.0.0.1:4001

打开地址http://localhost:4001/ 将会看到包管理的页面（不截图了），并且所有的操作终端里都会详细的记录：

http <-- 200, user: undefined(127.0.0.1), req: 'GET /', bytes: 0/1021
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/7.style.539cab9c31ffba25da18.css', bytes: 0/1068
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/manifest.d3c41f9bbed51d4d9491.js', bytes: 0/1470
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/0.style.b86c5878ee2935af83e9.css', bytes: 0/41336
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/main.d3c41f9bbed51d4d9491.js', bytes: 0/13897

config.yaml 配置文件 结构如下

storage: ./storage
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    proxy: npmjs
  '**':
    proxy: npmjs
logs:
  - {type: stdout, format: pretty, level: http}

每一项代表什么看官网介绍吧

https 如果对外暴露的是https的访问地址，那么需要配置ca 证书，详细介绍

客户端配置

安装 nrm 进行包管理器的切换（切换 npm 和 verdaccio）

$ npm install -g nrm

此时我们执行 $ nrm ls查看所有的仓库配置，是看不到verdaccio的：

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  sinopia  http://127.0.0.1:4875/

添加注册表到nrm 这样就可以方便的选择安装或卸载本地或者公共的包了(名字可以自己定义)

nrm add verdaccio http://127.0.0.1:4001

添加成功会提示：'add registry verdaccio success'

首先保证 http://127.0.0.1:4001 可访问，否则会报错。如果需要修改新增的注册表，比如注册的地址发生了变更，可以先删除注册nrm del verdaccio 详情参考 nrm

此时再执行$ nrm ls可以看到 verdaccio 了

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  sinopia  http://127.0.0.1:4875/
  verdaccio  http://127.0.0.1:4001/

切换到 verdaccio 包服务

nrm use verdaccio

成功后会提示

verb config Skipping project config: C:\Users\shuwei/.npmrc. (matches userconfig)
Registry has been set to: http://127.0.0.1:4001/

添加可访问的用户（访问、发布权限用户） 可以通过客户端添加，也可以在服务端手动添加（修改htpasswd文件）

npm adduser --registry http://127.0.0.1:4001

按照提示输入用户名、密码、邮箱添加成功后，客户端的变化：会在客户端的目录 C:\Users\shuwei\.npmrc （可以通过 npm config list查看.npmrc的地址）中可以看到新增了一行

//127.0.0.1:4001/:_authToken="7/UcJFBzhDqvOkifY/32CA==

服务端的变化：并且此时服务端的htpasswd文件中也会新增一行

shuwei:$65I6KH/.1F1w:autocreated 2018-07-14T09:42:33.433Z

更多关于 npm adduser 可以查看官方介绍

发布私有包 假设已经存在了一个包 local-mod ,我们发布一个包试试。cd到包目录，执行发布命令：

npm publish

发布成功后的信息：

npm notice
npm notice package: local-mod@1.0.0
npm notice === Tarball Contents ===
npm notice 272B  package.json
npm notice 566B  index.js
npm notice 75B   readme.md
npm notice 155B  .idea/inspectionProfiles/Project_Default.xml
npm notice 458B  .idea/local-mod.iml
npm notice 174B  .idea/misc.xml
npm notice 270B  .idea/modules.xml
npm notice 8.4kB .idea/workspace.xml
npm notice === Tarball Details ===
npm notice name:          local-mod
npm notice version:       1.0.0
npm notice package size:  3.2 kB
npm notice unpacked size: 10.4 kB
npm notice shasum:        7c3e8c623ee0ce9527a872069767c8c97e30b3d0
npm notice integrity:     sha512-6in/3sB7lQnzk[...]f6qNbMw/4v+ow==
npm notice total files:   8
npm notice
+ local-mod@1.0.0

打开 storage目录，的确存在local-mod 目录。打开http://127.0.0.1:4001 也出现了包的信息了。需要注意的是如果发布私有包一定要先切换到verdaccio 服务模式，否则会发布到npm （https://registry.npmjs.org/）去。

安装私有包 把刚才发布的私有包 local-mod ,安装试试

$ npm install local-mod --save-dev

安装成功，并且也能在 package.json 看到包的信息。在verdaccio 包服务下，除了可以正常安装私有包，公共的包也是可以安装的。verdaccio包模式下首先会安装本地的包，没找到则会安装公共包。但是如果当前不是verdaccio包模式，则只能安装公共的包。

权限配置

这一块是需要服务端和客户端同时配合的，所以单独拿出来讲。假定我们已经通过 npm adduser --registry http://127.0.0.1:4001 添加了用户 shuwei 的权限，我们发布私有包以及浏览地址 http://127.0.0.1:4001 都没有问题。这时我们在服务端的配置文件 config.yaml中去配置权限，将 packages:属性下的配置改成如下：

packages:
  '@*/*':
    # scoped packages

    # defalut $all
    access: $authenticated 
    publish: $authenticated
    proxy: npmjs

  'local-*':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"

    # defalut $authenticated
    access: $authenticated

    # allow all known users to publish packages
    # (anyone can register by default, remember?)
    publish: shuwei1

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

即：我们新增了一个以安装包前缀为权限组的配置，所有的访问权限只要登录即可，但是所有的发布权限必须是shuwei1（我们通过 npm adduser 的用户是 shuwei）,这时再去发布包终端提示：

error: user shuwei1 is not allowed to publish package local-mod

我们还可以再验证一把，就是通过 npm adduser 命令在客户端新增一个用户 shuwei1:

npm adduser --registry http://127.0.0.1:4001

这时候，新增的用户会将.npmrc 中的验证信息覆盖掉，即以最后一个新增的用户为主。同时服务器端的htpasswd中也会新增一个 shuwei1的账号信息。这时我们再去发布，终端提示发布成功。

更多权限配置参考官网

存在的问题

1、node_modules 缓存问题 webpack 每次打包后都会在 node_modules/.cache 中缓存记录，那么私有包安装新版本时，webpack 打包依旧使用的上次的包文件。需要将 .cache 文件删除才会生效。

总结

已经在公司范围使用，体验还不错。

huangshuwei / blog