前端工程化之路（1）- 使用 verdaccio 搭建私有npm庫

服務端安裝部署

安裝

本文書寫時 verdaccio 最新版本是 4.4.1
其依賴 NodeJs 8.x 及其以上 、python 2.7及其以上 版本，推薦都裝最新的

打開終端，全局安裝：

# Windows下以管理員模式打開cmd
npm install -g verdaccio
# mac 或者 linux
sudo npm install -g verdaccio

啓動服務

verdaccio

服務啓動成功後瀏覽器訪問 http://localhost:4873/ 便可，so easy

這裏須要注意的是啓動時第一行的打印信息:

warn --- config file  - C:\Users\tiany\AppData\Roaming\verdaccio\config.yaml

這裏輸出的 config.yaml 就是 verdaccio 的配置文件

若是你須要 verdaccio 服務在你的服務器後臺運行，參照這裏配置進程守護

配置

默認配置解讀

用編輯器打開 config.yaml 配置文件，我對其做用進行了一些註釋解讀:

#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#

# 用戶下載安裝的包都被緩存在此配置的目錄
storage: ./storage
# 插件所在目錄
plugins: ./plugins

# 定製 Web 界面
web:
  # 訪問服務主頁時（http://localhost:4873/），網頁標籤的title名稱，可改爲公司名稱
  title: JK724包管理中心
  # Gravatar 頭像支持，默認關閉，可打開（http://cn.gravatar.com/）
  gravatar: true
  # 默認狀況下package 是升序天然排序的， 可選值： asc 或 desc
  # sort_packages: asc

auth:
  htpasswd:
    # 存儲了加密認證信息的 htpasswd 文件
    file: ./htpasswd
    # 容許註冊的用戶最大數量, 默認值是 "+inf"，即不限制
    # 能夠將此值設置爲-1 以禁用新用戶註冊。
    # max_users: 1000

# 若是你要安裝的包在私有的npm庫裏沒有找到，就去下面的服務列表裏找
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

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

# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

# 終端日誌輸出配置
logs:
  - { type: stdout, format: pretty, level: http }
  #- {type: file, path: verdaccio.log, level: info}
#experiments:
#  支持 npm token 命令
#  token: false

以上是 verdaccio 在啓動時的默認配置，完整配置還須要去官網查看文檔，但對於咱們來講，目前迫切須要更改的配置的用戶鑑權，畢竟私有npm倉就是不想外人訪問或下載，而默認狀況下是任何人均可以註冊和查看的的，而一旦註冊就有了發包的權力

添加註冊用戶

verdaccio 的鑑權模塊是使用 htpasswd插件 實現的，對權限的配置比較簡單，不支持給某個具體的用戶設置細分權限(好比訪問權限、發佈權限),不過對於咱們公司的狀況來講夠用了。

1. 添加新帳戶，執行完命令後會讓你輸入 用戶名、密碼

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

2. 禁用註冊。修改 config.yaml 文件,放開 max_users 選項：

   auth:
     htpasswd:
       # 存儲了加密認證信息的 htpasswd 文件
       file: ./htpasswd
       # 容許註冊的用戶最大數量, 默認值是 "+inf"，即不限制
       # 能夠將此值設置爲-1 以禁用新用戶註冊。
       max_users: -1

3. 更改 package 權限，只有註冊用戶可訪問、發佈包:

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

4. 重啓 verdaccio 服務

修改web用戶UI

config.yaml 配置中也提供了web用戶界面相關UI元素的修改，logo,主題色等，具體點擊這裏

客戶端使用

1. 登陸（若是未禁用註冊，輸入不存在的帳號，會自動註冊）

   ## 具體場景中，http://localhost:4873 改爲npm私有服務器所在的ip地址
   npm adduser --registry http://localhost:4873

2. 發佈

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

參考文檔

https://verdaccio.org/docs/zh...