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

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

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

為什么選擇verdaccio

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

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

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

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

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

付費(fèi)的我們就不考慮了狰闪，沒這個(gè)必要，而且付費(fèi)的也不是就更好濒生。sinopia搭建十分簡(jiǎn)單友好埋泵，不過這玩意兒已經(jīng)停止維護(hù)了，最近的更新在4年前罪治，但有一群人出了sinopia的一個(gè)分支丽声，起了個(gè)名字叫verdaccio，這個(gè)就是這次主要推薦的方案觉义，這個(gè)庫(kù)一直在積極維護(hù)中雁社，github start 7000+，看來還是比較靠譜的晒骇，而且國(guó)內(nèi)外各種資料參考下來霉撵，這個(gè)方案也是受到極力推薦的。verdaccio搭建私服很簡(jiǎn)單洪囤，相比于cnpm搭建徒坡，還需要安裝配置mysql，這個(gè)絕對(duì)會(huì)少走一些坑瘤缩。

image.png

搭建步驟

1. 首先我們需要向運(yùn)維同學(xué)申請(qǐng)一臺(tái)linux服務(wù)器喇完，給臺(tái)2GB左右的虛擬機(jī)就夠用了；
2. 找個(gè)合適的地方下載安裝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海洼；
   換個(gè)名字：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/
啟動(dòng)nginx: sudo nginx
（重啟命令：sudo nginx -s reload）

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

verdaccio使用方式

verdaccio允許任何人創(chuàng)建賬號(hào)浮入，若沒有配置verdaccio的配置文件config.yaml龙优，則默認(rèn)任何注冊(cè)了verdaccio的開發(fā)都有publish權(quán)限∈滦悖看個(gè)實(shí)例：

1. 添加一個(gè)用戶：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

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

image.png

verdaccio最佳實(shí)踐

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

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

image.png

這個(gè)目錄下有兩個(gè)文件及一個(gè)目錄：

image.png

打開config.yaml涛贯，查看packages項(xiàng)，原始內(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有兩種模式
一種是 @/ 表示某下屬的某項(xiàng)目
另一種是 * 匹配項(xiàng)目名稱(名稱在package.json中有定義)
權(quán)限：

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

值的含義：

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

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

publish: michael martin

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

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

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

image.png

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

image.png

參考

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