使用verdaccio 搭建npm私有倉庫

龍恩0707發表於2018-06-10

使用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去檢查了。這樣就會提升下載速度。

相關文章