使用verdaccio 搭建npm私有倉庫

1. 為什么要搭建私有的npm倉庫？
    隨着公司的業務越來越復雜，項目迭代速度也越來越快，那么項目間的常用的業務代碼共享變得非常之有必要。但是對於公司的業務代碼是不能對外開放的，因此我們有必要搭建一個類似於 http://npmjs.org這個的一個私有平台來管理公司業務相關的組件及代碼。
    更簡單的描述就是我們需要在公司內部搭建一個npm倉庫，管理包的同時，也可以借助npm的命令行工具快速用代碼模塊或業務組件。
但是在沒有npm私有倉庫之前，我們都是手動復制某個項目的某個模塊到相關的項目中，這樣操作比較繁瑣，因此我們需要一個npm私有倉庫存放相關公用的組件及模塊。
2. npm及私有npm的工作原理？

   我們使用npm安裝，共享和分發代碼，npm幫助我們管理項目中的依賴關系，當我們使用 npm install 去安裝一個模塊時，會先檢查 node_modules目錄中是否已經存在這個模塊，如果沒有便會向遠程倉庫查詢。
那現在如果我們搭建了私有的npm，當我們使用 npm install 后會向私有的npm發起請求，服務器會先查詢所請求的這個模塊是否是我們自己的私有模塊或已經緩存過的公共模塊，如果是則直接返回給用戶，如果不是的話，那么則會繼續向上查找(也就是開源的npm倉庫)去查找該模塊並返回給用戶。
3. 如何搭建一個私有的npm倉庫呢？

 搭建npm倉庫一般有如下基本方法：(需要付費的這邊先不寫出來哦)：
 1. 使用 Sinopia
 2. 使用cnpmjs.org

 這邊先不講 第二種使用cnpmjs.org，因為它要搭建數據庫比較麻煩，有興趣的童靴可以自己去研究一下。那我們使用第一種哦，那為什么我們現在不用Sinopia呢？而使用 verdaccio 來搭建呢？那是因為 Sinopia 庫作者兩年前就已經停止了更新了，所以之后就出來了verdaccio(查看github地址
https://github.com/verdaccio/verdaccio)

搭建過程如下：

1. 首先需要安裝node環境，反正我電腦上已經安裝了，哈哈~ 這邊先不介紹了。
2. 安裝 verdaccio
使用命令：

npm install -g verdaccio

如果在安裝過程中報 grywarn的權限錯的話，那么需要加上 --unsafe-perm, 如下命令：

npm install -g verdaccio --unsafe-perm

3. 啟動 verdaccio

安裝完成后，我們就可以在命令行中 輸入 verdaccio 命令運行，如下所示：

然后在瀏覽器中 運行 http://localhost:4873 就可以看到 如下圖所示：

說明服務啟動成功了；

4. verdaccio配置;

首先我們需要知道的是我們使用npm全局安裝node包后，全局安裝包的所有目錄在什么地方，因此我們可以使用命令行查看：

1. 查看全局包的位置如下名：

npm root -g

如下圖所示：

2. 進入該目錄后，使用ls命令查看所有的全局包，我們可以找到我們剛剛安裝的 verdaccio 包，如下圖所示：

3. 進入該目錄下的conf目錄下， 可以看到默認的配置 default.yaml， 如下所示：

4. 需要修改 config.yaml文件，該文件就是從 default.yaml自動復制過來的，因此他們的里面配置文件是一樣的。首先我們需要找到該文件，看了其他的同學的博客，感覺他們都是復制過來的，可能我的是mac電腦吧，沒有他們講的對應目錄，那么config.yaml目錄文件到底在哪里呢？細心的同學可能會發現，我們運行verdaccio命令后，輸出的命令會告訴我們它的位置：如下圖所示：

5. 進入該文件的目錄下找到 config.yaml, 網上都說對應的目錄下默認有兩個文件：可是我在命令行下只看到一個文件，嗨！先不管這些；我們先要打開該配置文件
進行配置，由於我用的是 sublime text編輯器，因此我這邊可以運行命令即可打開進行配置修改： sudo open ./config.yaml -a 'sublime text';

如下圖所示：

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
#

# path to a directory with all packages
storage: /Users/tugenhua/.local/share/verdaccio/storage

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

# a list of other known repositories we can talk to
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $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 packages
    # (anyone can register by default, remember?)
    publish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

# To use `npm audit` uncomment the following section
middlewares:
  audit:
    enabled: true

# log settings
logs:
  - {type: stdout, format: pretty, level: http}
  #- {type: file, path: verdaccio.log, level: info}

# 如下是新增的，默認是沒有的，只能在本機訪問，添加完成后就可以在外網訪問了~  
listen: 0.0.0.0:4873  

6. 通過pm2啟動verdaccio

啟動： 直接在終端通過 verdaccio 命令啟動服務時，我們一般會借助pm2工具進行進程管理。
pm2安裝方式：

npm install -g pm2

通過pm2啟動 verdaccio

pm2 start which verdaccio 

如下圖所示：

停止服務：如果需要停止 verdaccio服務，使用如下命令即可：

pm2 stop which verdaccio

接着我們在頁面再刷新下 http://localhost:4873/#/ 就訪問不到了，我們需要重新啟動下即可：

使用pm2查看verdaccio進程下的實時日志：

pm2 show verdaccio

如下所示：

通過如上命令，我們可以看到所有的 verdaccio的所有信息，打開 out log path查看進程輸出日志，如果出現錯誤的話，我們也可以打開 error log查看錯誤日志。
7. verdaccio的使用

在使用verdaccio之前，我們可以先安裝nrm來管理自己的npm代理，nrm可以快速修改，切換，增加npm鏡像地址。

先安裝 nrm, 命令如下：

npm install -g nrm

想要了解更多有關的nrm命令，可以使用 nrm --help, 會列出所有的命令行的。

7.1 添加別名

我這邊為了演示下，搭建的地址為 http://192.168.77.1:4873，你們自己可以修改自己的服務器ip地址了；如下命令：

nrm add verdaccio http://192.168.77.1:4873

如上的 命令 nrm add verdaccio http://192.168.77.1:4873 中的verdaccio是我為私有npm起的別名，你們自己可以更改自己喜歡的名字，現在我們可以使用 nrm ls 命令查看 使用的所有鏡像源地址，verdaccio 就是我們剛剛新增的，如下圖所示：

如果我們現在不想從私有npm上下載包的話，我們可以使用 nrm use xx命令，use下地址。

8. npm 發布包

要在私有npm倉庫中發布包首先需要注冊或登錄賬號。如果我們還沒有賬號的話，通過輸入命令 npm adduser, 然后依次輸入用戶名，密碼即可創建完畢。如果已有賬號，通過輸入命令 npm login，然后依次輸入用戶名，密碼即可登錄。然后進入我們需要上傳的代碼目錄，執行命令發布即可；

如下圖所示：

我項目中隨便弄了一個項目名稱叫 npmtest, 里面也是一樣什么都沒有，npm init新建一個 package.json， 然后里面就一個 index.js文件，內容就是一個
console.log('私有npm我來了'); 這樣的，我想上傳到上去，package.json 代碼如下：

{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

其中包名就叫 npmtest. 在項目的目錄下，先登錄，如下：

然后發布我們的代碼：我們可以使用 npm publish命令來發布包；如下所示：

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

但是在發布之前，一定要切記，當當前的npm源切換到官方npm源下：如下圖所示：

但是當我發布的時候，報錯，如下所示：

應該是npm版本太低了(我當時的版本是3.xxx)，因此我更新到最新的版本6.xx來了；

更新npm版本：如下命令：

npm install -g npm 

更新完成后就可以發布了，執行命令：npm publish --registry http://localhost:4873; 如下圖所示：

發布完成后，在刷新下 http://localhost:4873/#/ 就可以看到我們剛剛發布的包了，

9. npm 下載包

最后我們再驗證下，我們新建一個文件夾為 npmtest2，進入到該項目的根目錄下，使用命令 npm install npmtest 下載我們剛剛發布到私有的npm包；

如下圖所示：

下載完成后，我們可以看到有兩個文件，一個是node_modules，就是我們需要依賴的文件，里面有npmtest項目文件，還有一個是 package-lock.json文件，該文件是更新node庫后自動生成的文件，里面包含了node庫中所有包的下載地址當前版本以及包之間的依賴關系。當我們下載包時候就會根據package-lock.json的
版本去現在，就不會再去npmjs去檢查了。這樣就會提升下載速度。