NPM 私服搭建-verdaccio

本文僅是技術驗證，記錄，交流，不針對任何人。有冒犯的地方，請諒解。 該文首發於https://vsnail.cn/static/doc/blog/verdaccio.html

背景

目前項目組以及公司的前端項目愈來愈多，業務系統劃分愈來愈精細，那麼前端項目之間的公共組件、公共服務應該如何抽取、如何維護、如何管理，這些問題就愈顯突出。所以搭建 npm 私服，將公共組件和服務以包的形式進行管理，經過版本號的形式進行發佈，能夠有效的管理公司、項目組內部的公共組件及服務。同時經過權限設置，也能夠有效的保護公司成果不被泄露。除此以外，因爲前端每次打包都須要從新拉取第三方包，這個步驟的速度依賴於網絡以及第三方鏡像。npm 私服能夠設置緩存，第一次拉取第三方包後，之後的拉取將直接從 NPM 私服上進行，這樣將會極大的提高打包編譯速率。

爲何選擇 verdaccio

網上主要有幾種搭建企業 npm 私服的方式：

1. 付費選擇：

• MyGet
• NPM Org

2. 免費選擇：

• DIY NPM
• Git，這也是一種選擇，在package.json中指定git倉庫的URL便可，可是這種作法有些彆扭，第一，使得package.json不夠優雅，第二，當git倉庫爲private時，你須要HTTPS或SSH憑據，並且一般咱們並無每一個團隊的權限。
• Sinopia
• verdaccio

排除付費，可選擇的其實也就DIY NPM、Sinopia、verdaccio。從社區活躍度來講，基本都選擇了verdaccio。verdaccio是一個極簡單的開源的NPM服務。

搭建

1. 找個合適的地方下載安裝nodejs，好比在/usr/local/lib下

   安裝wget（已經安裝的跳過這步）

   yum install -y wget;
   
   複製代碼

   下載：

   wget https://npm.taobao.org/mirrors/node/v12.14.0/node-v12.14.0-linux-x64.tar.xz
   
   複製代碼

   解壓：

   tar -xvf node-v10.6.0-linux-x64.tar.xz;
   
   複製代碼

   重命名安裝目錄：

   mv node-v10.6.0-linux-x64 nodejs;
   
   複製代碼

   創建軟鏈接：

   ln -s /usr/local/lib/nodejs/bin/npm /usr/local/bin/
   ln -s /usr/local/lib/nodejs/bin/node /usr/local/bin/
   
   複製代碼

執行node -v和 npm -v命令檢查是否安裝成功

全局安裝verdaccio：

npm i verdaccio -g;
複製代碼

全局安裝pm2，用來守護node進程：

npm i pm2 -g;
複製代碼

pm2啓動服務，執行

pm2 start verdaccio;
複製代碼

而後瀏覽器訪問http://服務器IP，出現如下頁面則表明安裝成功。

pm2 start ** // 啓動;
pm2 reload ** //重啓 ;
pm2 logs *** // 日誌

verdaccio 使用

verdaccio容許任何人建立帳號，若沒有配置verdaccio的配置文件config.yaml，則默認任何註冊了verdaccio的開發都有publish權限。看個實例：

如下都以http://1.1.1.1:4873服務爲例。注意要其餘機器能訪問，必需要修改配置文件。可參考進階的配置

1. 添加一個用戶：npm adduser --registry http://1.1.1.1:4873
2. 給要添加到服務的工程添加源信息，在工程根目錄下新建.npmrc文件，添加如下內容

registry=http://1.1.1.1:4873
複製代碼

3. package.json中設置好版本，執行npm publish

4. 查看http://1.1.1.1:4873。可返現網站上已有列表

進階

向上面這樣，確定是不能知足咱們的需求的。咱們須要權限可控（添加用戶，請求、發佈、撤銷包），UI 可配置。先看看verdaccio提供的配置

verdaccio 默認配置

#包緩存路徑
storage: ./storage

# 網站配置
web:
#網站標題
  title: verddico
#網站logo
  logo: /root/.config/verdaccio/logo.png
#網站導航欄背景色
  primary_color: "#3894ff"
#權限配置
auth:
# 內置的htpasswd權限插件
  htpasswd:
# 用戶列表文件
    file: ./htpasswd
# 用戶最大數目。-1表示不能在隨意註冊。
    max_users: -1
# 外部包管理倉庫地址
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    proxy: npmjs
  '**':
    proxy: npmjs
logs:
  - {type: stdout, format: pretty, level: http}

複製代碼

外網訪問配置

若是外網須要訪問，那麼必須在config.yaml增長如下配置

listen: 0.0.0.0:4873
複製代碼

用戶管理

按照默認配置，咱們能夠經過

npm adduser --registry=http://1.1.1.1:4873

複製代碼

這樣能夠隨意的註冊用戶。可是對於公司私服來講，一般不但願這樣。所以咱們能夠經過如下配置來禁止隨意註冊用戶。

auth:
 htpasswd:
 file: ./htpasswd
 max_users: -1
複製代碼

問題來了，這樣之後，咱們如何增長用戶呢？能夠有如下兩種方式：

1. 手動編輯./htpasswd文件。
2. 使用第三方插件，以命令的形式增長用戶。

npm install sinopia-adduser -g

複製代碼

安裝好該插件，在./htpasswd目錄下，運行如下命令

sinopia-adduser

複製代碼

權限設置

verdaccio 默認引入了htpasswd插件。可是這個插件只能以user的角度去設置權限。而實際中，咱們一般想經過分組來設置權限。

因爲第三方權限組件都有權限服務器，而咱們僅僅只想有個按分組來設置權限的功能便可.所以本身寫了一個簡單的分組權限插件verdaccio-simplegroup。github地址:https://github.com/btshj-snail/snail-verdaccio-group。

npm install verdaccio-simplegroup -g

複製代碼

在config.yaml配置文件中，增長相應的配置

auth:
 htpasswd:
 file: ./htpasswd
 max_users: -1
 simplegroup:
 admin_group: Jack Lucy
 base_group: Jack

packages:
  '@company/*':
 access: $authenticated
 publish: admin_group
 unpublish: admin_group
 proxy: npmjs

  '@base/*':
 access: $authenticated
 publish: base_group
 unpublish: base_group
 proxy: npmjs
  '**':
 access: $all
 publish:
 unpublish:
 proxy: npmjs
複製代碼

ok，增長了以上配置，基本能夠達到可以使用的程度了。吐槽一下，verdaccio提供的默認網站 UI 真的有點low，提供的可配置地方又比較少。原本還想寫一個網站的插件，但想一想最近的時間，來仍是之後再弄吧。

參考

1. npm 私服搭建—verdaccio 方案及其最佳實踐
2. YAML 快速入門
3. Verdaccio 搭建私有 NPM
4. verdaccio