Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
huangshuwei opened this Issue Jul 14, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@huangshuwei
Copy link
Owner

huangshuwei commented Jul 14, 2018

前言

刚通过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 文件删除才会生效。

总结

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

@snakeliwei

This comment has been minimized.

Copy link

snakeliwei commented Mar 23, 2019

还有nexus...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.