--- theme: juejin highlight: a11y-dark --- ## 目录 1. 前言 2. 搭建npm私有库的好处 3. 安装verdaccio环境 4. 发布包到verdaccio私有库 5. 使用发布在verdaccio私有库的npm包 6. 更好的使用verdaccio私有库 7. 搭建过程中遇到过的问题及解决方案 8. 总结 ## 前言随着公司前端项目越来越多，出现了很多可复用的业务组件和逻辑，为了提升开发效率和方便维护，避免每次都要在项目之间复制粘贴相同的逻辑，我们可以把可复用的组件和逻辑封装成**npm**包，通过**npm**包的形式来引入，但又由于是公司内部的业务，所以一般不希望发布到全球公共的仓库中，此时就需要搭建属于我们自己的私有**npm**仓库。 ## 一. 搭建npm私有库的好处 1. 在公司内部网络托管组件库和封装的**sdk**，可以保护自己的业务代码和核心技术。 2. 托管在内网的**npm**包下载速度更快。 3. 某些私有库比如本文介绍的**verdaccio**，会缓存从**npm**公共库安装过的包，再安装会从私有库下载，速度会快很多。 ## 二. verdaccio介绍官方的话介绍是[verdaccio](https://verdaccio.org/) 是一个简单的、零配置本地私有 **npm** 软件包代理注册表。简单来说就是在我们自己的服务器上面搭建一个**npm**仓库，可以发布**npm**包上去，在项目中**npm i**安装依赖时会根据配置文件，优先去**verdaccio**私有库中查找依赖包，如果找到就下载下来，没有就从公共**npm**包仓库中下载。搭建**npm**私有库的方案还有其他几种，有付费的，也有免费的，**verdaccio**就是其中的一个免费的，在经过调研和网上查阅文章后，最后决定使用**verdaccio**，免费，环境搭建简单，管理方便。更多的介绍可以看[verdaccio官网](https://verdaccio.org/)的介绍。 ## 三. 安装verdaccio环境 ### 3.1 所需环境 **verdaccio**在**window**,**mac**,**liunx**系统上都支持搭建使用，本文采用的**mac**系统来搭建，**window**和**liunx**系统搭建流程是一样的，只是**verdaccio**安装所在的目录不一样，其他都是一样的。 **verdaccio**有多种安装方式，最简单的可以通过**npm**命令来安装，所以需要有**node**环境，其他的辅助环境，后面用到了再介绍，也支持**docker**搭建。 ### 3.2 开始安装使用**npm**全局安装**verdaccio** ```yaml sudo npm i verdaccio -g ``` ![WX20220509-210817@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d53c2d3854d404d830efc87806e2f39~tplv-k3u1fbpfcp-zoom-1.image) 出现上图代表安装成功，安装成功后可以先直接运行**verdaccio**命令启动 ```yaml verdaccio ``` ![WX20220509-211012@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/742cd46f034b4edf8dfd6c6a91b91210~tplv-k3u1fbpfcp-zoom-1.image) 出现上图后，代表已经启动成功了，可以看到一些关键信息 1. **配置文件的目录**：/Users/guojiongwei/.config/verdaccio/config.yaml(按自己的实际目录) 2. **服务所在的地址**：打开，可以看到私服已经启动好了。 ![WX20220509-211748@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/357888d0e86945bb9875b702788c517e~tplv-k3u1fbpfcp-zoom-1.image) 但是此时会有两个问题 **第一个问题** 直接**verdaccio**启动，会占用命令行进程，没有办法执行其他命令，这时候可以用**pm2**来启动和守护进程，如果没有安装**pm2**，可以执行**npm i pm2 -g**安装，然后使用**pm2**启动**verdaccio** ```yaml pm2 start verdaccio ``` 执行成功后，查看**pm2**启动**verdaccio**的日志 ```yaml pm2 logs verdaccio ``` ![WX20220509-211300@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3c586fca9474b9baffa5189d008c8ab~tplv-k3u1fbpfcp-zoom-1.image) 出现该内容代表使用**pm2**启动成功（在**window**中使用**pm2 start**启动可能会报错，出现报错可以看下面**7.2**章关于**pm2**启动在**widdow**下报错的解决方法） **第二个问题** 可以看到**verdaccio**默认地址是，只能本机访问到，要想在其他电脑上访问到，需要调整一下服务的地址配置**config.yam**文件，其位置在启动成功的日志中可以看到 ```yaml vi /Users/guojiongwei/.config/verdaccio/config.yaml ``` 找到**listen**所在配置项 ```js # https://verdaccio.org/docs/configuration#listen-port # listen: # - localhost:4873 # default value # - http://localhost:4873 # same thing # - 0.0.0.0:4873 # listen on all addresses (INADDR_ANY) # - https://example.org:4873 # if you want to use https # - "[::1]:4873" # ipv6 # - unix:/tmp/verdaccio.sock # unix socket ``` 根据注释可以看到**listen**的值默认为**localhost:4873** ，如果项所有地址都可以访问到，需要修改成**0.0.0.0:4873**，注意缩进，**listen**前面不需要有缩进。 ```js # https://verdaccio.org/docs/configuration#listen-port listen: 0.0.0.0:4873 # - localhost:4873 # default value # - http://localhost:4873 # same thing # - 0.0.0.0:4873 # listen on all addresses (INADDR_ANY) # - https://example.org:4873 # if you want to use https # - "[::1]:4873" # ipv6 # - unix:/tmp/verdaccio.sock # unix socket ``` 配置好后**pm2 restart verdaccio**重启服务,随后**pm2 logs verdaccio**查看启动日志 ```yaml pm2 restart verdaccio pm2 logs verdaccio ``` ![WX20220509-211612@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a9cef07c09d493d9a0ff60d018c0646~tplv-k3u1fbpfcp-zoom-1.image) 可以看到地址已经变成了 ,其他电脑就也已经可以访问到了。此时**verdaccio**环境就已经安装完成，可以进行使用了。 ## 四. 发布包到verdaccio私有库 ### 4.1 创建verdaccio用户看刚才启动好的**verdaccio**可视化页面页面 ![WX20220509-211748@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/357888d0e86945bb9875b702788c517e~tplv-k3u1fbpfcp-zoom-1.image) 提示让先添加用户，按照它的命令提示，进行添加用户操作 ```yaml npm adduser --registry http://localhost:4873/ ``` ![WX20220509-212246@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ad2e4fb808c4988b642665704defcca~tplv-k3u1fbpfcp-zoom-1.image) 输入命令后会提示让输入账号密码和邮箱，输入完成后就自动登录了，此时就可以发布**npm**包到**verdaccio**私有库了。 ### 4.2 发布npm包到verdaccio私有库准备一个简单的**npm**包发布上去 **第一步**：新建文件夹 ```yaml mkdir verdaccio-demo-publish cd verdaccio-demo-publish ``` **第二步**：初始化**npm**，生成**package.json** ```yaml npm init -y ``` 此时的**package.json** ```json { "name": "verdaccio-demo-public", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } ``` **第三步**：和package.json同目录新增**index.js**文件在**index.js**中使用**common.js**规范暴露一个**add**方法，计算两数的和 ```js // index.js module.exports.add = function(a, b) { return a + b } ``` **第四步**：**package.json**添加**files**字段，配置**npm**发布时要上传的文件，此时只需要添加**index.js**, **package.json**文件会默认上传。 ```json { "name": "verdaccio-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "files": [ "index.js" ], "keywords": [], "author": "", "license": "ISC" } ``` **第五步**：发布包到**verdaccio**私有库此时要上传的包文件代码 ![WX20220509-214319@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad9578929f7546039e13ff85f49f4bf8~tplv-k3u1fbpfcp-zoom-1.image) 根据**verdaccio**可视化界面的提示，执行发布命令 ```yaml npm publish --registry http://localhost:4873/ ``` ![WX20220509-214704@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a26fbd151bf84c319c7d67f45d3c9ed4~tplv-k3u1fbpfcp-zoom-1.image) 发布成功后，打开**verdaccio**可视化管理页面，就可以看到刚发布的包了。! ![WX20220509-215701@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d4a2a68b7f64c15bb3c025bed729418~tplv-k3u1fbpfcp-zoom-1.image) ### 4.3 优化包发布刚才发布包时需要在在**npm publish**后面添加--registry http:\/\/localhost:4873/，每次都添加比较麻烦，可以在包项目根目录添加 **.npmrc**文件，添加以下配置 ```yaml registry=http://localhost:4873/ ``` 这样再发布包时直接**npm publish**就可以了,会自动提交到对应地址的私有服上面，添加后修改**package.json**的版本**version**字段把**1.0.0**修改为**1.0.1**，再次执行**npm publish**测试，会发现发布成功，并且在可视化界面可以看到版本变化了。 ## 五. 使用发布在verdaccio私有库的npm包刚才已经发布到**verdaccio**私有库上一个**npm**包了，来使用一下。 ### 5.1 新建测试项目并初始化 ```yaml mkdir verdaccio-demo-use cd verdaccio-demo-use npm init -y ``` ### 5.2 安装上传到verdaccio私有库的包安装刚刚发布到私有库的依赖 ```yaml npm i verdaccio-demo-publish -S ``` 安装依赖操作的时候，会发现报错了： ![WX20220509-221528@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f61f5f07643944b9b755063e659f2e37~tplv-k3u1fbpfcp-zoom-1.image) 报错**code**是**404**，是因为默认情况下会从**npm**公共仓库下载包，而不是从我们私有仓库下载包，依然需要在项目根目录添加 **.npmrc**文件，添加配置 ```yaml registry=http://localhost:4873/ ``` 然后再次执行安装操作 ```yaml npm i verdaccio-demo-publish -S ``` 此时就会下载成功了 ### 5.3 使用从私有库安装的包新建**index.js,** 添加以下代码，从**verdaccio-demo-publish**包中引入**add**方法， ```js const { add } = require('verdaccio-demo-publish') console.log(add(1, 2)) ``` 在命令行执行**node index.js**,可看到打印的结果**3**,代表上刚才传私有库的**npm**包可以正常使用了。 ```yaml node index.js 3 ``` ### 5.4 测试安装不在verdaccio私有库的包刚才可以正常安装私有库的包了，测试一下安装私有库中不存在的包，以**react**来测试 ```yaml npm i react -S ``` ![WX20220509-222829@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/876ce56fdda74476bd244b6d338e9cf7~tplv-k3u1fbpfcp-zoom-1.image) 发现也可以正常安装，代表此时不管下载**verdaccio**私有库包还是下载**npm**公共库包都已经可以正常使用了。 ## 六. 更好的使用verdaccio私有库 ### 6.1 发布和删除包权限控制刚才上传包的时候，任何人都可以**npm addUser**创建账号，然后上传**npm**包，这肯定是不安全的，需要对注册账号，还有发布**npm**包到私有库，删除私有库的**npm**包都要做权限控制，而**verdaccio**也提供了权限配置方案。编辑**verdaccio**的配置文件(配置文件所在位置在上面启动服务的时候可以看到) ```yaml vi /Users/guojiongwei/.config/verdaccio/config.yaml ``` 找到**packages**配置项 ```yaml packages: '@*/*': # scoped packages access: $all publish: $authenticated unpublish: $authenticated proxy: npmjs '**': # 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" access: $all # allow all known users to publish/publish packages # (anyone can register by default, remember?) publish: $authenticated unpublish: $authenticated ``` 包的配置分两种 1. **作用域包**：一般指@xxx/xxx,比如@vue/core,@vue/compiler。 2. **普通的包**：比如**react**, **vue**, **webpack**。包配置有几个关键的属性 1. **access**：表示哪些用户可以访问私有库上的包。 2. **publish**：表示哪些用户可以在私有库上发布包。 3. **unpublish**：表示哪些用户可以在私有库上删除包。而上面三个配置项对应的选项位 1. **$all:** 代表所有用户，不管是已注册还是未注册。 2. **$authenticated**：是已注册的用户。 3. **固定的账号**：比如**publish**: **user1** **user2**。根据上面的信息，可以知晓，我们一般需要把访问包权限设置为已经注册用户才可以访问，而**publish**发布包和**unpublish**删除包两个权限需要设置为固定配置的账号，修改后配置如下。 ```yaml packages: '@*/*': # scoped packages access: $authenticated # 只有注册的账号才可以访问私有库的包 publish: guojiongwei # 只有该账号可以发布包到私有库 unpublish: guojiongwei # 只有该账号可以删除私有库上的包 proxy: npmjs '**': access:$authenticated # 只有注册的账号才可以访问私有库的包 publish: guojiongwei # 只有该账号可以发布包到私有库 unpublish: guojiongwei # 只有该账号可以删除私有库上的包 ``` 如果配置多个账号的，只需要用空格隔开即可，例如 ```yaml publish: guojiongwei other ``` 配置完成后，使用**pm2**重启**verdacco**服务 ```yaml pm2 restart verdaccio ``` 然后再次添加一个**other**用户，输入密码和邮箱 ```yaml npm adduser --registry http://localhost:4873/ npm notice Log in on http://localhost:4873/ Username: other Password: Email: (this IS public) g1762xxxx123@163.com Logged in as other on http://localhost:4873/. ``` 添加用户成功后，打开我们建立的包项目**verdaccio-demo-publish**，修改一下**package.json**的版本**version**字段，由**1.0.1**改为**1.0.2** ```json { "name": "verdaccio-demo-publish", "version": "1.0.2", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "files": [ "index.js" ], "keywords": [], "author": "", "license": "ISC" } ``` 上传包之前可以看一下当前**npm**私有库登录的用户，在该目录下的命令行输入 ```yaml npm whoami ``` 即可看到当前登录用户是**other**，然后在该目录下的命令行执行上传**npm**包命令 ```yaml npm publish ``` ![WX20220510-200708@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b08302853ff04b1fa284ee6b4b1444d4~tplv-k3u1fbpfcp-zoom-1.image) 执行命令后可以看到发布包失败，状态**code**是**403**，错误信息是**user other is not allowed to publish package verdaccio-demo-publish**，用户**other**不被允许发布包**verdaccio-demo-publish**，由此可见咱们做的上传包的用户权限配置已经生效了，同样删除包也是一样的。 ### 6.2 新增用户addUser权限限制在上一步对**npm**包的发布和删除做了权限控制后，现在关于权限还有一个问题，就是只要知道**verdaccio**私有库的地址，就可以调用**npm addUser**来添加用户，哪怕是退出登录后，也可以添加用户，如下图： ![WX20220510-210955@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e4120e8aedd4e97b7773f5e220a0208~tplv-k3u1fbpfcp-zoom-1.image) 从上图可以看到，退出登录之后，只要知道地址就可以任意的添加用户，虽然我们已经配置了用户权限，就算新增用户也是没有权限的，不会造成安全问题，但依然还是不合理，可以通过修改**verdaccio**配置来解决该问题。依然是编辑**verdaccio**的配置文件(配置文件所在位置在上面启动服务的时候可以看到) ```yaml vi /Users/guojiongwei/.config/verdaccio/config.yaml ``` 可以找到里面有权限相关[auth](https://verdaccio.org/docs/configuration#authentication)的配置 ```yaml # https://verdaccio.org/docs/configuration#authentication auth: htpasswd: file: ./htpasswd # Maximum amount of users allowed to register, defaults to "+inf". # You can set this to -1 to disable registration. # max_users: 1000 ``` - **files**: 是用户的账号存储文件，默认是存在相对路径./htpasswd文件。 - **max_users**: 最多允许配置的用户个数，可以设置为-1关闭添加用户功能。通过上面的信息，发现在不需要添加用户的时候只需要把**max_users**的值设置为 **-1**，就不能添加用户了。在需要添加用户的时候就把**max_users**值注释掉，添加用户后再次设置为 **-1**就可以了。把**max_users**值改成 **-1**, 然后**pm2 restart verdaccio**重启**verdaccio**服务 ```yaml # https://verdaccio.org/docs/configuration#authentication auth: htpasswd: file: ./htpasswd # Maximum amount of users allowed to register, defaults to "+inf". # You can set this to -1 to disable registration. max_users: -1 ``` 重启服务后，再次执行添加用户操作 ![WX20220510-212658@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a16e6455d3b4641a4c2ac184e1c7313~tplv-k3u1fbpfcp-zoom-1.image) 发现报错了，状态**code**是**409**，报错信息是**newuser1 - user registration disabled**，用户注册已经被关闭了，说明我们的配置已经生效了。 ### 6.3 发布包后发送钉钉推送消息在实际开发中，当新版本的**npm**包发布到私有库时，需要让其他相关的同事能够及时知晓，就需要有个通知功能，而**verdaccio**自带了[通知功能](https://verdaccio.org/docs/notifications)，会在**npm publish**提交成功后触发通知，以**钉钉**为例，配置步骤： **第一步**：登录钉钉 -> 打开左上角个人头像 -> 选择设置 -> 机器人管理(前往设置) -> 选择通过**webhook**接入自定义服务 ![微信截图_20220512093439.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de79e6531c524719b465fde6d92a599b~tplv-k3u1fbpfcp-watermark.image?) 点击添加,出现下图 ![微信截图_20220512092109.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a317e6a3e7945d7977dcba9e15f8dac~tplv-k3u1fbpfcp-watermark.image?) **第二步**：设置机器人的名字和要推送到的群组，以及安全设置，安全设置有三种，分别是**关键字**，**加签**，和**ip地址(段)**，最少必须要选一个，具体可看[说明文档](https://open.dingtalk.com/document/robots/customize-robot-security-settings)，这里使用**关键字**的方式，推送的消息里面必须包含该**关键字**才能被推送成功，然后点击完成按钮。 ![微信截图_20220512094523.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3d77445da6c4ffb8a2dcc36c1b5fd9e~tplv-k3u1fbpfcp-watermark.image?) 机器人就创建成功了，要保存好**webhook**地址，同时在对应的群里面也可以看到出现了添加机器人提示。 ![微信截图_20220512092242.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1eaaa0a581d344bc9eb12a48c688901c~tplv-k3u1fbpfcp-watermark.image?) **第三步**：修改**verdaccio**配置文件**config.yaml** ```yaml vi /Users/guojiongwei/.config/verdaccio/config.yaml ``` 找到**notify**配置项,默认为 ```js # https://verdaccio.org/docs/configuration#notifications # notify: # method: POST # headers: [{ "Content-Type": "application/json" }] # endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken # content: '{"color":"green","message":"New package published: ** {{ name }}**","notify":true,"message_format":"text"}' ``` 有两个关键的配置 1. **endpoint**：就是上面钉钉机器人的**webhook**推送地址。 2. **content**: 要发送的消息内容主体在**content**中有几个变量可以直接使用，使用格式为 **{{ name }}** 1. **name**: 本次**npm publish**发布包的名称。 3. **publisher.name**：本次**npm publis**h发布包的发布者名称。有了上面的信息，就可以编辑我们的推送消息了,修改**endpoint**为刚才创建机器人得到的**webhook**地址，**content**内容添加关键字**有新npm包发布了**，以及包名称，新版本号，发布者。（注意**yaml**格式缩进） ```js notify: method: POST headers: [{'Content-Type': 'application/json'}] endpoint: https://oapi.dingtalk.com/robot/send?access_token=access_token content: '{"msgtype": "text","text": {"content":"有新 npm 包发布了: 包名称：{{ name }}，发布者：{{ publisher.name }}"}}' ``` > 注意事项：**content**字段里面的消息内容字段**text**和消息类型字段**msgtype**的**key**值要根据所推送的平台的规则来定义，不能按照**verdaccio**官方的例子来，不然推送的消息会接收不到。此处钉钉平台的消息字段为**text**对象，里面有**content**字段是真正的消息内容。消息类型字段为**msgtype**。搭建时因为这个问题一直接收不到推送的消息。使用上面的配置方式，只能配置往一个平台上推送，如果要配置多个，就要改一下配置方式,在**notify**下级多一次平台标识**key**配置，该**key**值可以自己定义，互相不重复就行。 ```js notify: 'dingtalk': method: POST headers: [{'Content-Type': 'application/json'}] endpoint: https://oapi.dingtalk.com/robot/send?access_token=access_token content: '{"msgtype": "text","text": {"content":"有新 npm 包发布了: 包名称：{{ name }}，发布者：{{ publisher.name }}"}}' ``` 修改后保存文件，使用**pm2**重启**verdaccio**服务。 **第四步**：测试钉钉消息推送，修改**verdaccio-demo-publish**包**package.json**中版本号**version**,由**1.0.2**改为**1.0.3**,然后**npm publish**发布包到私有服，发布完成后，就会看到钉钉推送的机器人消息了。 ![微信截图_20220512115932.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ca4a229c35e43e29961c26110e925e8~tplv-k3u1fbpfcp-watermark.image?) ### 6.3 其他更多配置 **verdaccio**还提供很多其他的配置，比如配置**https**,可视化界面展示配置，发布离线包等等，可以看官网的详细配置介绍。 ## 七. 搭建过程中遇到过的问题及解决方案 ### 7.1 解决verdaccio包有时候丢失问题搭建过程中出现了几次**npm**包发布到私有库，后面修改配置重新启动服务后，原先上传的**npm**包会从可视化界面消失，在尝试几次后，发现如果前后两次启动**verdaccio**所在命令行不在同一目录下，就会出现该情况，开始排查原因：查看下**verdaccio**的配置文件 ```yaml cat /Users/guojiongwei/.config/verdaccio/config.yaml ``` 找到**storage**配置，该配置项是配置存放发布和缓存的私有库npm包文件位置的 ```yaml # path to a directory with all packages storage: ./storage ``` 进入**verdaccio**安装目录 **~/.config/verdaccio**查看里面的文件 ```yaml cd /Users/guojiongwei/.config/verdaccio ls ``` ![WX20220510-214044@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af3199e2c01144679a8cf38def0df121~tplv-k3u1fbpfcp-zoom-1.image) 可以看到**verdaccio**安装目录有三个文件 - **config.yaml**: **verdaccio**配置文件，刚才修改配置都是修改的该文件。 - **htpasswd**: 存储注册过的账号数据，密码会加密显示。 - **storage**: 存储发布到私有库的包和从**npm**公共库下载过缓存的包。这里**storage**文件下有四个包，其中一个是我们发布到**verdaccio**私有库的**verdaccio-demo-publish**包，一个是**react**，我们从**npm**公共库下载安装过，**verdaccio**会把下载过的包做缓存，以加快下次安装速度。这里有四个包，但我们在**verdaccio**可视化界面看到的依然只有一个,这是为什么呢？是因为**verdaccio**是通过**storage**文件下面的 **.verdaccio-db.json**来管理**npm**包是否展示在可视化界面的，这个文件会在启动**verdaccio**的时候生成，由于上面**config.yaml**中的**storage**配置使用的相对路径，所以在启动**verdaccio**时会在启动时命令行所在目录下生成**storage**文件，同时生成 **.verdaccio-db.json**文件，如下图所示： ![WX20220510-215840@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/346a886510d74528831a5d2c05a7df82~tplv-k3u1fbpfcp-zoom-1.image) 1. 切换一个新目录，查看目录下文件，以**verdaccio-demo-publish**目录为例，看到只有**index.js**和**package.json**两个文件。 2. 执行**pm2 delete verdaccio**删除**verdaccio**服务。 3. 使用**pm2 start verdaccio**启动**verdaccio**服务。 4. 执行ls再次查看该目录下面，发现新增了**storage**目录。 5. 进入**storage**目录，发现有 **.verdaccio-db.json**文件，该文件其实就是控制**verdaccio**可视化界面展示的**npm**包列表。 6. 查看 **.verdaccio-db.json**内容 ```yaml {"list":[],"secret":"ee62324d116a225ec786893eb410c9a5e9194ff3576981a0c462340881da17ba"} ``` **list**数组里面配置的就是在**verdaccio**可视化界面展示的**npm**包列表，默认为空数组。此时打开会发现刚才上传的**npm**包不见了。 ![WX20220509-211748@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5a8b8ad1d6945cb86426ab9bd996dff~tplv-k3u1fbpfcp-zoom-1.image) 出现该问题的原因是每次启动**verdaccio**如果命令行所在目录下没有**storage/.verdaccio-db.json**文件，就会新生成一个，同时可视化界面展示**npm**包列表会使用该**json**文件，由于**list**为空数组，所以会出现界面上看到已经上传包的情况。为了验证是否使用的该配置文件，可以手动修改下该文件的**list**为 ```yaml { "list":["verdaccio-demo-publish", "react"], "secret":"ee62324d116a225ec786893eb410c9a5e9194ff3576981a0c462340881da17ba" } ``` 然后**pm2 restart verdaccio**重启下服务，再刷新一下，就可以看到**verdaccio-demo-publish**和**react**的包了。 ![WX20220510-222032@2x.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eddcc4f34756474bb3f48f430238bc3d~tplv-k3u1fbpfcp-zoom-1.image) 知道该问题出现的原因后，解决方式就是修改配置**config.yaml**里面的**storage**配置，把相对路径改为绝对路径(按自己电脑的路径来配置) ```yaml storage: /Users/guojiongwei/.config/verdaccio/storage ``` 修改后再次**pm2 restart verdaccio**重启**verdaccio**服务，以后不管在哪个地方启动服务都不会出现**npm**包从列表消失的问题了。 ### 7.2 window系统pm2 start verdaccio报错在**window**系统全局安装**verdaccio**和**pm2**后，执行**pm2 start verdaccio**会报错 ![微信截图_20220511092152.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7eb4d6770f64eac8c26f553a380d968~tplv-k3u1fbpfcp-watermark.image?) 报错信息是**SyntaxError: Invalid or unexpected token** 不识别 **@** 字符，在经过网上查询后，找到了问题出现和原因和解决方案。 **问题出现原因** 全局安装**verdaccio**时默认安装位置为C:\Users\Administrator\AppData\Roaming\npm\node_modules\verdaccio，里面**bin**目录中的**verdaccio**文件是真正启动**verdaccio**服务执行的文件。 ![微信截图_20220511141208.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb00a838e69346c0a79671eddfed6d12~tplv-k3u1fbpfcp-watermark.image?) 但**npm**全局安装**verdaccio**包时，会把**verdaccio**包里面**bin**目录下的**verdaccio**文件创建链接到C:\Users\Administrator\AppData\Roaming\npm\verdaccio.cmd里面 ![微信截图_20220511141822.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cddbb66144e426b8e708399d5a5de97~tplv-k3u1fbpfcp-watermark.image?) 使用**pm2**启动**verdaccio**时会执行**verdaccio.cmd**文件，而**pm2**好像不识别**cmd**的文件语法，于是报错了。 **解决方法** 直接进入C:\Users\Administrator\AppData\Roaming\npm\node_modules\verdaccio\bin目录，在该目录下执行**pm2**启动命令即可 ```yaml pm2 start ./verdaccio ``` 也可以在任意位置直接执行 ```yaml pm2 start C:\Users\Administrator\AppData\Roaming\npm\node_modules\verdaccio\bin\verdaccio ``` ### 7.3 发布npm包推送钉钉消息接收不到上面有提到这个问题，发布**npm**包到私服后，查看私服**verdaccio**服务日志，发现消息是推送了，但是钉钉就是接受不到，后来经过排查问题，发现**content**字段要根据推送平台的字段要求来，最开始一直按照**verdaccio**官网例子字段配置的，一直接收不到。 [verdaccio官网](https://verdaccio.org/docs/notifications/)例子配置 ```js notify: method: POST headers: [{'Content-Type': 'application/json'}] endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken content: '{"color":"green","message":"New package published: {{ name }}","notify":true,"message_format":"text"}' ``` [钉钉官网](https://open.dingtalk.com/document/robots/custom-robot-access)例子配置 ```yaml { "text": { "content":"我就是我, @XXX 是不一样的烟火" }, "msgtype":"text" } ``` 每个推送平台的字段格式可能都不一样，按根据对应平台官方文档做成调整。 ## 八. 总结到这一步，一个基础可用的**npm**私有服就已经搭建好了，本文例子都是在电脑本地启动的，后面需要做的是部署到服务器上面，在服务器操作和本地操作流程是一样的，只是**verdaccio**安装的目录位置不一样。还可以用**nginx**配置域名指向**verdaccio**服务，使用起来更方便。也支持用**docker**来部署。本文只是记录自己在工作中使用**verdaccio**搭建**npm**私有库中的流程和遇到的问题，遇到肯定只是其中一部分问题，后续遇到问题或者好的使用技巧也会继续更新记录。本文最终**config.yaml**文件配置 ```yaml storage: /Users/guojiongwei/.config/verdaccio/storage # 以绝对配置npm包存放位置 plugins: /Users/guojiongwei/.config/verdaccio/plugins # 以绝对配置plugins存放位置 web: title: Verdaccio auth: htpasswd: file: ./htpasswd # 账号文件存放位置 max_users: -1 # 最大添加用户个数，-1代表禁止添加用户 uplinks: npmjs: url: https://registry.npmjs.org/ packages: '@*/*': access: $authenticated # 只有注册的账号才可以访问私有库的包 publish: guojiongwei # 只有该账号可以发布包到私有库 unpublish: guojiongwei # 只有该账号可以删除私有库上的包 proxy: npmjs '**': access:$authenticated # 只有注册的账号才可以访问私有库的包 publish: guojiongwei # 只有该账号可以发布包到私有库 unpublish: guojiongwei # 只有该账号可以删除私有库上的包 proxy: npmjs server: keepAliveTimeout: 60 listen: 0.0.0.0:4873 # 服务地址，允许其他电脑访问 notify: 'dingtalk': # 配置钉钉推送 method: POST headers: [{'Content-Type': 'application/json'}] endpoint: https://oapi.dingtalk.com/robot/send?access_token=access_token content: '{"msgtype": "text","text": {"content":"有新 npm 包发布了: 包名称：{{ name }}，发布者：{{ publisher.name }}"}}' middlewares: audit: enabled: true logs: { type: stdout, format: pretty, level: http } ``` **参考资料：** https://blog.csdn.net/yuzheng7002/article/details/104196062