為什么要搭建公司內(nèi)部的npm服務(wù)？

如今前端圈已十分繁榮，一個跟得上技術(shù)時代腳步的互聯(lián)網(wǎng)公司必定是前后端分離的（至少在狹義上是分離的），這就導(dǎo)致了前端承受的分工壓力會越來越大，很多公司的前端項目變得十分龐雜，因此技術(shù)負(fù)責(zé)人可能會考慮根據(jù)業(yè)務(wù)線進(jìn)行拆分為幾個工程系統(tǒng)，這樣又引申出一個問題：這幾個系統(tǒng)之間如何共用一套公司內(nèi)部的組件庫呢？每個工程里面都copy一套肯定不行，做一個小修改要同步幾個工程，繁瑣且容易出錯。上傳到npm庫是個很不錯的選擇，不同的系統(tǒng)都指向一個npm源，然后通過npm install就行，快速且“干凈”，所以在這種場景下，搭建一套公司內(nèi)部的npm庫就顯得很有必要。簡單來說，npm私服主要優(yōu)勢其實就兩個：

• 托管公司內(nèi)部組件庫代碼，不對外，方便管理
• 項目中使用到的npm包會緩存到私服庫里，能明顯提升之后下包的速度

為什么選擇verdaccio

網(wǎng)上主要有幾種搭建企業(yè)npm私服的方式，簡單羅列一下：

1. 付費(fèi)選擇：

• MyGet (https://www.myget.org) 9美元/月，且只能有兩個賬號和1GB的存儲空間。
• NPM Org (https://www.npmjs.com) 每個賬號每月7美元

2. 免費(fèi)選擇：

• DIY NPM (https://docs.npmjs.com/misc/registry)
• Git，這也是一種選擇，在package.json中指定git倉庫的URL即可，但是這種做法有些別扭，第一，使得package.json不夠優(yōu)雅，第二，當(dāng)git倉庫為private時，你需要HTTPS或SSH憑據(jù)，而且通常我們并沒有每個團(tuán)隊的權(quán)限。
• Sinopia (https://www.npmjs.com/package/sinopia)
• Cnpmjs.org (https://github.com/cnpm/cnpmjs.org)

付費(fèi)的我們就不考慮了，沒這個必要，而且付費(fèi)的也不是就更好。sinopia搭建十分簡單友好，不過這玩意兒已經(jīng)停止維護(hù)了，最近的更新在4年前，但有一群人出了sinopia的一個分支，起了個名字叫verdaccio，這個就是這次主要推薦的方案，這個庫一直在積極維護(hù)中，github start 7000+，看來還是比較靠譜的，而且國內(nèi)外各種資料參考下來，這個方案也是受到極力推薦的。verdaccio搭建私服很簡單，相比于cnpm搭建，還需要安裝配置mysql，這個絕對會少走一些坑。

image.png

搭建步驟

1. 首先我們需要向運(yùn)維同學(xué)申請一臺linux服務(wù)器，給臺2GB左右的虛擬機(jī)就夠用了；
2. 找個合適的地方下載安裝nodejs，比如在/usr/local/lib下
   安裝wget：yum install -y wget；（已經(jīng)安裝的跳過這步）
   下載：wget https://nodejs.org/dist/v10.6.0/node-v10.6.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/
3. 執(zhí)行node -v和 npm -v命令檢查是否安裝成功
4. 全局安裝verdaccio：npm i verdaccio -g;
5. 全局安裝pm2，用來守護(hù)node進(jìn)程：npm i pm2 -g;
6. 安裝nginx，仍然在 /usr/local/lib下
   下載：wget http://nginx.org/download/nginx-1.13.7.tar.gz
   解壓：tar -zxvf nginx-1.13.7.tar.gz；
   換個名字：mv nginx-1.13.7 nginx；
   進(jìn)入安裝目錄：cd nginx
   執(zhí)行：./configure；
   執(zhí)行：make && make install；
   cd conf/修改nginx.conf，加上這一段：

server {
  listen       80;
  server_name  registry.npm.your.server;
  location / {
    proxy_pass    http://127.0.0.1:4873/;
    proxy_set_header        Host $host;
  }
}

建立軟連接：ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/
啟動nginx: sudo nginx
（重啟命令：sudo nginx -s reload）

7. pm2啟動服務(wù)，執(zhí)行pm2 start verdaccio，然后瀏覽器訪問http://服務(wù)器IP，出現(xiàn)以下頁面則代表安裝成功。
   
   image.png

verdaccio使用方式

verdaccio允許任何人創(chuàng)建賬號，若沒有配置verdaccio的配置文件config.yaml，則默認(rèn)任何注冊了verdaccio的開發(fā)都有publish權(quán)限。看個實例：

1. 添加一個用戶：npm adduser --registry http://172.16.14.5:
   

   image.png

2. 給要添加到服務(wù)的工程添加源信息，在工程根目錄下新建.npmrc文件，添加以下內(nèi)容：

registry=http://172.16.14.5/

3. package.json中設(shè)置好版本，執(zhí)行npm publish:

image.png

此時再訪問http://172.16.14.5，該工程已出現(xiàn)在列表中：

image.png

verdaccio最佳實踐

上述publish倉庫的步驟很簡單，創(chuàng)建用戶 -> 設(shè)置npm源 -> npm publish。但這樣并不是我們想要的流程，我們想要的是publish權(quán)限可把控，這當(dāng)然是可以做的。

1. 查看config.yaml配置文件
一般來說此配置文件在/創(chuàng)建用戶/.config/verdaccio中，如果你不確定，你可以直接在服務(wù)器上執(zhí)行verdaccio命令，第一個config file即文件所在位置.

image.png

這個目錄下有兩個文件及一個目錄：

image.png

打開config.yaml，查看packages項，原始內(nèi)容為：

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

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

字段含義：
scope有兩種模式
一種是 @/ 表示某下屬的某項目
另一種是 * 匹配項目名稱(名稱在package.json中有定義)
權(quán)限：

• access: 表示哪一類用戶可以對匹配的項目進(jìn)行安裝(install)
• publish: 表示哪一類用戶可以對匹配的項目進(jìn)行發(fā)布(publish)
• proxy: 如其名，這里的值是對應(yīng)于 uplinks 的名稱，如果本地不存在，允許去對應(yīng)的uplinks去取。

值的含義：

• $all 表示所有人(已注冊、未注冊)都可以執(zhí)行對應(yīng)的操作
• $authenticated 表示只有通過驗證的人(已注冊)可以執(zhí)行對應(yīng)操作，注意，任何人都可以去注冊賬戶。
• $anonymous 表示只有匿名者可以進(jìn)行對應(yīng)操作（通常無用）

如果要指定某個用戶才有權(quán)限，可以直接寫上用戶名，多個用戶用空格隔開，比如：

publish: michael martin

修改完成后請重啟nginx和pm2。當(dāng)前已存在的用戶列表可在htpasswd文件中查看。

下載包及緩存?zhèn)}庫

在指定源為內(nèi)網(wǎng)源的工程下，通過npm install就能下載內(nèi)網(wǎng)的庫了。我們內(nèi)部的倉庫存儲在storage目錄里，進(jìn)入storage中，可以看到這里存儲了我們使用過的庫：

image.png

其中testpro是我們內(nèi)部的庫，進(jìn)入庫中，可以看到我們發(fā)布的所有版本都在這里以壓縮包的形式存儲著

image.png

參考

1. Ways to have your private npm registry
2. https://verdaccio.org/docs/en/what-is-verdaccio