亲宝软件园·资讯

展开

pm2 Verdaccio搭建npm库

施强前端团队 人气:0

前言

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

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

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

为什么选用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 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 件事:

相应地,这里我们需要修改配置文件的 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 个参数的含义:

显然,这里我们需要的是只有用户才能具备上述 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
# 最后看到 + [你的包名@版本号]既可

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

删除

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

加载全部内容

相关教程
猜你喜欢
用户评论