使用 Verdaccio 搭建一個企業級私有 npm 庫

前言

私有 npm 庫，我想是每一個團隊都會實踐和經歷的一個階段。實現私有 npm 的方式有不少種，例如基於私有 Git 倉庫、基於 npm 官方提供的私有功能（付費）、Verdaccio 等等。可是，綜合比較各類因素下來（不要錢、還好用），Verdaccio 都略勝前面二者。

那麼，今天本文也將帶着你們一塊兒使用 Verdaccio 來搭建一個企業級私有 npm 庫！

1、安裝、啓動

Verdaccio 的安裝啓動過程較爲簡單。首先是全局安裝 Verdaccio：

npm i -g verdaccio

而後，在終端中輸入 verdaccio 命令啓動 Verdaccio：

verdaccio

接着 Verdaccio 會在終端中輸出提示，輸出它的配置文件位置、啓動的服務地址等信息：

默認 Verdaccio 啓動的服務都會在 4873 這個端口，在瀏覽器中打開這個地址咱們就會看到 Verdaccio 搭建的私有庫 npm 的界面：

能夠看到，默認的界面風格仍是很簡潔、美觀的。而且，這裏會提示咱們要登錄、發佈 npm 包須要執行的命令。

2、配置修改

雖然，安裝和啓動好了 Verdaccio。可是，因爲 Verdaccio 默認的配置和咱們生產的需求不一致，因此咱們須要修改一下 Verdaccio 的配置。

在生產環境下，私有 npm 庫須要具有如下 3 個功能：

• 支持對 npm 包的搜索
• 嚴格的權限把控，npm 包的訪問只能是已註冊的用戶。而且在一些場景下，須要刪除用戶
• 發佈 npm 包後，推送到釘釘羣，告知哪一個 npm 包進行了發佈

而 Verdaccio 的配置文件是在 ~/.config/Verdaccio 文件夾的 config.yaml 文件，默認的配置會是這樣：

storage: ./storage
plugins: ./plugins
web:
  title: Verdaccio
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
server:
  keepAliveTimeout: 60
middlewares:
  audit:
    enabled: true
logs:
  - { type: stdout, format: pretty, level: http }

這裏咱們來逐個認識一下默認配置中的幾個值的含義：

• storage 已發佈的包的存儲位置，默認存儲在 ~/.config/Verdaccio/ 文件夾下
• plugins 插件所在的目錄
• web 界面相關的配置
• auth 用戶相關，例如註冊、鑑權插件（默認使用的是 htpasswd）
• uplinks 用於提供對外部包的訪問，例如訪問 npm、cnpm 對應的源
• packages 用於配置發佈包、刪除包、查看包的權限
• server 私有庫服務端相關的配置
• middlewares 中間件相關配置，默認會引入 auit 中間件，來支持 npm audit 命令
• logs 終端輸出的信息的配置

接下來，咱們就來修改 Verdaccio 的配置文件中對應的值來一一支持上述功能。

2.1 開啓搜索

當咱們私有 npm 庫存在不少包的時候，咱們想要查找某個包就會有些麻煩。而 Verdaccio 是支持搜索功能的，它是由 search 控制的，默認爲 false，因此這裏咱們須要開啓它：

search: true

開啓以後，咱們就能夠在私有 npm 庫的頁面上的搜索欄進行正常的搜索操做。

2.2 權限把控

權限把控指的是咱們須要私有 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 的 https://registry.npmjs.org/）。而剩下的 3 個參數，都是用來設置包相關的權限，它有三個可選值 $all（全部人）、$anonymous（未註冊用戶）、$authenticated（註冊用戶）。那麼，下面咱們分別看一下這 3 個參數的含義：

• access 控制包的訪問權限
• publish 控制包的發佈權限
• unpublish 控制包的刪除權限

顯然，這裏咱們須要的是隻有用戶才能具有上述 3 個權限，即都設置爲 $authenticated：

packages:
  '@*/*':
    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

若是要開啓用戶註冊，設置指定數字（大於 0）便可

2.3 發佈包推送釘釘羣

發佈包推送釘釘羣，指的是咱們每次發佈包能夠經過釘釘羣的機器人來通知咱們發佈的包的信息。

首先，這裏咱們須要先有一個釘釘羣的機器人對應的 Webhook（獲取方式能夠查看釘釘的文檔）。而後，在 Verdaccio 的配置文件中添加 notify：

notify:
  'dingtalk':
    method: POST
    headers: [{'Content-Type': 'application/json;charset=utf-8'}]
    endpoint: https://oapi.dingtalk.com/robot/send?access_token=****, # 釘釘機器人的 webhook
    content: '{"color":"green","message":"新的包發佈了: * {{ name }}*","notify":true,"message_format":"text"}'

其中，method 和 headers 分別表示請求的方法和實體的類型。endpoint 表示請求的 Webhook 地址。content 則表示獲取發佈信息的基礎模版，模版中 message 的值會是釘釘羣的機器人發送的消息內容（name 表示發佈的包名）。

假設，此時咱們發佈了一個包名爲 verdaccio-npm-demo 的私有包，相應地咱們會在釘釘羣裏收到通知：

3、基本使用

既然配置好了 Verdaccio。那麼，咱們就能夠開始發佈第一個私有包了 😎。

3.1 註冊用戶

首先，咱們須要註冊一個用戶：

npm adduser --registry http://localhost:4873/

接着，它會要求你填寫用戶名、密碼和郵箱，用於登錄私有 npm 庫：

3.2 刪除用戶

既然有註冊用戶，不可避免的需求是在一些場景下，咱們須要刪除某個用戶來禁止其登錄私有 npm 庫。

前面也說起了 Verdaccio 默認使用的是 htpasswd 來實現鑑權。相應地，註冊的用戶信息會存儲在 ~/.config/verdaccio/htpasswd 文件中：

wuliu:pWxgur/1w5v1I:autocreated 2021-02-18T07:58:57.827Z

這裏一條記錄對應一個用戶，也就是若是這條記錄被刪除了，那麼該用戶就不能登錄了，即刪除了該用戶。

3.3 添加、切換源

這裏咱們爲了操做方面，經過 nrm 來切換源。沒有安裝 nrm 的同窗，能夠先安裝一下：

npm i -g nrm

而後，使用 nrm 添加一個源：

nrm add mynpm http://localhostm:4873/

這裏的 mynpm 表明你這個源的簡稱，你能夠因本身的喜愛來命名。

接着，咱們能夠運行 nrm ls 命令來查看目前存在的源：

能夠看到默認狀況下 npm 使用的源是 https://registry.npmjs.org/，那麼這裏咱們須要將它切換成私有 npm 庫對應的源：

nrm use mynpm

切換好源後，咱們以後的 npm i 就會先去私有庫查找包，若是不存在則會去 https://registry.npmjs.org/（由於上面配置了 proxy）查找包。

3.4 發佈

發佈的話就直接在某個須要發佈包的項目（假設這裏咱們的包叫 verdaccio-npm-demo2）的根目錄下運行：

npm publish

而後，在私有 npm 庫的界面上就能夠看到咱們發佈的包：

結語

固然，Verdaccio 能作的還有不少，例如集成 Git Action 自動發包、自定義鑑權插件等。可是，通過咱們上面的一番折騰，私有 npm 庫已經初具規模能夠投入生產使用了哈 😲。最後，文章中若是存在表達不當或錯誤的地方，歡迎各位同窗提 Issue。

點贊 👍

經過閱讀本篇文章，若是有收穫的話，能夠點個贊，這將會成爲我持續分享的動力，感謝～

我是五柳，喜歡創新、搗鼓源碼，專一於源碼（Vue 三、Vite）、前端工程化、跨端等技術學習和分享。此外，個人全部文章都會收錄在 https://github.com/WJCHumble/Blog，歡迎 Watch Or Star!