pm2與Verdaccio搭建私有npm庫過程詳解
前言
最近開會(huì)的時(shí)候討論到前端組件庫搭建，因?yàn)樾枰嗳藚f(xié)作，使用npm link等都比較麻煩，且當(dāng)業(yè)務(wù)規(guī)模較大了之后，我們一般會(huì)有自己的腳手架，自己的全局工具包等等。其中可能包含了自身的業(yè)務(wù)代碼不能公開，因此我們都需要一個(gè)私有化的npm倉庫。
一般私有化的npm倉庫有以下幾種方法實(shí)現(xiàn)：
- 通過npm購買私有服務(wù)
- 通過git直接引用
- 通過開源項(xiàng)目直接搭建，例如cnpm、verdaccio、sinopia等
下面對各個(gè)方案進(jìn)行一個(gè)粗淺的對比：
- 官方私有npm服務(wù)：團(tuán)隊(duì)版$7/人/月這個(gè)價(jià)格就已經(jīng)直接勸退，且不說npm在國內(nèi)的網(wǎng)絡(luò)情況不容樂觀。
- 直接安裝git代碼：直接通過npm install 引入對應(yīng)git代碼確實(shí)有一定的便利性，但是當(dāng)全局包多了之后不便于維護(hù)且權(quán)限難以管理
- sinopia：基于Node.js實(shí)現(xiàn)的一個(gè)開源npm庫，年久失修。最近一次提交是6年前，直接放棄。
- cnpm：阿里出的npm私有方案，權(quán)限控制較為全面但是配置復(fù)雜，需要自己搭建mysql之類的數(shù)據(jù)庫存儲(chǔ)。
- verdaccio：基于sinopia繼續(xù)開發(fā)，目前維護(hù)很頻繁而且配置簡單，可以快速搭建。
為什么選用Verdaccio？
先跟大家吐個(gè)槽，其實(shí)我本來是想用sinopia搭建的私服，也知道大家也都傾向于sinopia來搭，畢竟它出道比較早，知名度比較高，但是sinopia的作者幾年前就已經(jīng)停止了對sinopia的維護(hù)和升級(jí)，不信大家可以自己去GitHub上看，上次更新真的停留在了幾年前，唉，然后真是留了一堆坑，所幸不是沒人管，只是有一群人又出了一個(gè)sinopia的fork,也就是sinopia的分支，而且還起了個(gè)洋氣的意大利名verdaccio ，但是verdaccio 確實(shí)是正在維護(hù)的，我查了最近一次更新還是在2天前，這幫人還是挺勤快的，造福了大家啊~ 而且也比較好用，我用sinopia搭的時(shí)候填的一堆坑在verdaccio 這壓！根！不！存！在！真是絕望啊，為啥我沒有早點(diǎn)發(fā)現(xiàn)它。這里是verdaccio 在github的源碼地址，大家想深入了解最好還是去看看源碼和詳細(xì)介紹。話不多說下面正式開始verdaccio的搭建。
安裝
Verdaccio 的安裝啟動(dòng)過程較為簡單。首先是全局安裝 Verdaccio：
npm i -g verdaccio
然后，在終端中輸入 verdaccio 命令啟動(dòng) Verdaccio：
接著 Verdaccio 會(huì)在終端中輸出提示，輸出它的配置文件位置、啟動(dòng)的服務(wù)地址等信息：
默認(rèn) Verdaccio 啟動(dòng)的服務(wù)都會(huì)在 4873 這個(gè)端口，在瀏覽器中打開這個(gè)地址我們就會(huì)看到 Verdaccio 搭建的私有庫 npm 的界面：
修改配置
雖然，安裝和啟動(dòng)好了 Verdaccio。但是，由于 Verdaccio 默認(rèn)的配置和我們生產(chǎn)的需求不一致，所以我們需要修改一下 Verdaccio 的配置。
在生產(chǎn)環(huán)境下，私有 npm 庫需要具備以下 3 個(gè)功能：
- 支持對 npm 包的搜索
- 嚴(yán)格的權(quán)限把控，npm 包的訪問只能是已注冊的用戶。并且在一些場景下，需要?jiǎng)h除用戶
配置文件
npm i -g verdaccio
# 存放軟件所有軟件包的目錄
storage: ../storage
# 存放所有插件的目錄
plugins: ../plugins
web:
# 網(wǎng)站Title
title: Verdaccio
# 禁用Gravatar頭像
# gravatar: false
# 排序方式 asc|desc
# sort_packages: asc
# 是否啟用暗黑模式
# darkMode: true
# logo地址
# logo: http://somedomain/somelogo.png
# favicon地址
# favicon: http://somedomain/favicon.ico | /path/favicon.ico
# i18n翻譯配置
# i18n:
# 可用列表見：https://github.com/verdaccio/ui/tree/master/i18n/translations
# web: en-US
auth:
htpasswd:
file: ./htpasswd
# 最大注冊用戶數(shù)，默認(rèn)為 "+inf".
# 可用通過設(shè)置為-1禁止注冊
# max_users: 1000
# 上游npm庫，這里可用設(shè)置為淘寶
uplinks:
npmjs:
url: https://registry.npmjs.org/
packages:
# 作用域包
'@*/*':
# 允許所有人訪問
access: $all
# 注冊用戶可訪問
publish: $authenticated
# 注冊用戶可訪問
unpublish: $authenticated
proxy: npmjs
'**':
# 默認(rèn)情況下所有用戶 (包括未授權(quán)用戶) 都可以查看和發(fā)布任意包
# 你可以指定 用戶名/分組名 (取決于你使用什么授權(quán)插件，默認(rèn)的授權(quán)插件是內(nèi)置的 htpasswd)
# 訪問權(quán)限有三個(gè)關(guān)鍵詞: "$all", "$anonymous", "$authenticated"
# $all 表示不限制，任何人可訪問；
# $anonymous 表示未注冊用戶可訪問；
# $authenticated 表示只有注冊用戶可訪問
access: $all
# 允許所有注冊用戶發(fā)布/撤銷已發(fā)布的軟件包
# (注意：默認(rèn)情況下任何人都可以注冊)
publish: $authenticated
unpublish: $authenticated
# 如果私有包服務(wù)不可用在本地，則會(huì)代理請求到'npmjs'
proxy: npmjs
# 您可以指定傳入連接的HTTP /1.1服務(wù)器保持活動(dòng)超時(shí)（以秒為單位）。
# 值為0會(huì)使http服務(wù)器的行為類似于8.0.0之前的Node.js版本，后者沒有保持活動(dòng)超時(shí)。
# 解決方法：通過給定的配置可以解決以下問題
server:
keepAliveTimeout: 60
# 中間件
middlewares:
audit:
enabled: true
# 日志設(shè)置
logs: { type: stdout, format: pretty, level: http }
# 開放遠(yuǎn)程訪問，允許所有IP
listen:
- 0.0.0.0:4873
這里我們來逐個(gè)認(rèn)識(shí)一下默認(rèn)配置中的幾個(gè)值的含義：
| 字段 | 含義 |
|---|---|
| storage | 已發(fā)布的包的存儲(chǔ)位置，默認(rèn)存儲(chǔ)在 ~/.config/Verdaccio/ 文件夾下 |
| plugins | 插件所在的目錄 |
| web | 界面相關(guān)的配置 |
| auth | 用戶相關(guān)，例如注冊、鑒權(quán)插件（默認(rèn)使用的是 htpasswd） |
| uplinks | 用于提供對外部包的訪問，例如訪問 npm、cnpm 對應(yīng)的源 |
| packages | 用于配置發(fā)布包、刪除包、查看包的權(quán)限 |
| server | 私有庫服務(wù)端相關(guān)的配置 |
| middlewares | 中間件相關(guān)配置，默認(rèn)會(huì)引入 auit 中間件，來支持 npm audit 命令 |
| logs | 終端輸出的信息的配置 |
權(quán)限把控
權(quán)限把控指的是我們需要私有 npm 庫上發(fā)布的包只能團(tuán)隊(duì)成員查看，除此之外人員不能看到一切信息。那么，回到 Verdaccio，我們需要做這 2 件事：
- 限制 npm 包的查看，只能為已注冊的用戶
- 禁止用戶注冊（在團(tuán)隊(duì)成員已注冊完成后）
相應(yīng)地，這里我們需要修改配置文件的 pacakges 和 auth。前面我們也提及了 packages 是用于配置發(fā)布包、查看包、刪除包相關(guān)的權(quán)限。我們先再來看看默認(rèn)的配置：
packages: '@*/*': access: $all publish: $authenticated unpublish: $authenticated proxy: npmjs '**': access: $all publish: $authenticated unpublish: $authenticated proxy: npmjs
這里的 key 代表對應(yīng)權(quán)限需要匹配的包名，例如對于第一個(gè)，如果我們發(fā)布的包名是這樣的 @wjc/test 就會(huì)命中。每個(gè)規(guī)則中對應(yīng) 4 個(gè)參數(shù)。其中 proxy 代表如果在私有 npm 庫找不到，則會(huì)代理到 npmjs（對應(yīng) unlinks 中的 npmjs 的 registry.npmjs.org/）。而剩下的 3 個(gè)參數(shù)，都是用來設(shè)置包相關(guān)的權(quán)限，它有三個(gè)可選值 all（所有人）、all（所有人）、all（所有人）、anonymous（未注冊用戶）、$authenticated（注冊用戶）。那么，下面我們分別看一下這 3 個(gè)參數(shù)的含義：
- access 控制包的訪問權(quán)限
- publish 控制包的發(fā)布權(quán)限
- unpublish 控制包的刪除權(quán)限
顯然，這里我們需要的是只有用戶才能具備上述 3 個(gè)權(quán)限，即都設(shè)置為 $authenticated：
'@*/*': access: $authenticated publish: $authenticated unpublish: $authenticated proxy: npmjs '**': access: $authenticated publish: $authenticated unpublish: $authenticated proxy: npmjs
設(shè)置好 packages 后，我們還得更改 auth 的值，因?yàn)榇藭r(shí)注冊用戶是沒有限制的，也就是說如果你的私有 npm 庫部署在外網(wǎng)環(huán)境的話，任何人都可以通過 npm adduser 命令注冊用戶。
顯然，這是不允許出現(xiàn)的情況，所以這里我們需要設(shè)置 auth 的 max_users 為 -1，它代表的是禁用注冊用戶：
auth: max_users: -1
部署
verdaccio提供了docker和全局包2種方式進(jìn)行安裝，下面是兩種安裝方式的詳細(xì)步驟
docker部署
docker不太熟，感興趣的可以去嘗試。
# 拉取verdaccio docker鏡像 $ docker pull verdaccio/verdaccio:nightly-master # 查看docker鏡像 $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE verdaccio/verdaccio nightly-master 32713721fda5 16 hours ago 580MB # 拷貝下面配置文件到本地~/docker/verdaccio目錄 $ cp config.yaml ~/docker/verdaccio # 啟動(dòng)docker容器 # -d: 在后臺(tái)開啟docker進(jìn)程 # --name: 給容器指定一個(gè)名稱 # --p: 將本機(jī)的4873端口映射到docker的4873端口 # --restart=always: 自動(dòng)重啟容器 # -v: 將本地~/docker/verdaccio目錄掛載到docker的/verdaccio/conf目錄 $ docker run --restart=always -d -v ~/docker/verdaccio:/verdaccio/conf --name verdaccio -p 4873:4873 verdaccio/verdaccio # 查看docker容器 $ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 6aac1ea8707a verdaccio/verdaccio "uid_entrypoint /bin…" 2 minutes ago Up 2 minutes 0.0.0.0:4873->4873/tcp, :::4873->4873/tcp verdaccio
這樣我們就完成了verdaccio在docker上的部署，其中我們將~/docker/verdaccio這個(gè)文件夾掛載到docker的/verdaccio/conf文件夾，verdaccio在啟動(dòng)時(shí)會(huì)自動(dòng)尋找/verdaccio/conf/config.yaml文件作為配置。
pm2部署
pm2的部署相對于docker需要安裝node。但是相對的部署起來會(huì)更快捷，可以根據(jù)自己需要選擇。
管理npm倉庫源
這里推薦使用nrm來管理npm的源
# 全局安裝nrm
$ npm install -g nrm
# 添加私有庫
$ nrm add verdaccio http://{地址}:4873/
# 查看現(xiàn)有的npm源
$ nrm ls
npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.cloud.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/
* verdaccio ---- http://{地址}:4873/
# 設(shè)置npm源
$ nrm use verdaccio
npm包發(fā)布
注冊
# 注冊用戶，這里因?yàn)榉奖阊菔荆詻]有關(guān)閉注冊。Username：用戶名 Password：密碼
$ npm adduser
npm notice Log in on http://{地址}:4873/
Username: yourusername
Password:
Email: (this IS public) xxxxxx@qq.com
Logged in as yourusername on http://{地址}:4873/.
登錄
# 登錄用戶
$ npm login
npm notice Log in on http://{地址}:4873/
Username: yourusername
Password:
Email: (this IS public) xxxxxx@qq.com
Logged in as yourusername on http://{地址}:4873/
# 查看當(dāng)前登錄用戶
$ npm who am i
yourusername
發(fā)布
# 發(fā)布當(dāng)前包 $ npm publish npm notice Hui-ui-vue@0.1.0 npm notice === Tarball Contents === npm notice 611B public/index.html npm notice 4.3kB public/favicon.ico npm notice 73B babel.config.js npm notice 151B packages/baseInput/index.js npm notice 214B packages/index.js npm notice 130B examples/main.js npm notice 730B vue.config.js npm notice 891B package.json npm notice 310B README.md npm notice 6.8kB examples/assets/logo.png npm notice 344B examples/App.vue npm notice 199B packages/baseInput/src/baseInput.vue npm notice 2.0kB examples/components/HelloWorld.vue npm notice === Tarball Details === npm notice name: Hui-ui-vue npm notice version: 0.1.0 npm notice package size: 10.5 kB npm notice unpacked size: 16.8 kB npm notice shasum: 08de3054edbef6c1706f849e40d05e99c16c607e npm notice integrity: sha512-6sVp52WobtHhq[...]bXfgebrphWd+Q== npm notice total files: 13 npm notice + Hui-ui-vue@0.1.0 # 最后看到 + [你的包名@版本號(hào)]既可
需要注意的是相同的包上傳時(shí)版本號(hào)需要不同，否則上傳會(huì)失敗。
刪除
進(jìn)入包文件路徑直接刪除即可。
以上就是pm2與Verdaccio搭建私有npm庫過程詳解的詳細(xì)內(nèi)容，更多關(guān)于pm2 Verdaccio搭建npm庫的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
服務(wù)端nodejs抓取jsonp接口數(shù)據(jù)實(shí)現(xiàn)示例
這篇文章主要為大家介紹了服務(wù)端nodejs抓取jsonp接口數(shù)據(jù)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
如何在NestJS中添加對Stripe的WebHook驗(yàn)證詳解
這篇文章主要為大家介紹了如何在NestJS中添加對Stripe的WebHook驗(yàn)證詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本篇文章主要介紹了Node.js：stream，Stream在node.js中是一個(gè)抽象的接口，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
Electron調(diào)用外接攝像頭并拍照上傳實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Electron調(diào)用外接攝像頭并拍照上傳實(shí)例實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了深入Node TCP模塊的理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了node后端服務(wù)保活的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了如何配置nodejs的環(huán)境變量問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要給大家介紹了關(guān)于VsCode無法識(shí)別node問題解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了puppeteer庫入門初探,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了node.js中的fs.appendFile方法使用說明,本文介紹了fs.appendFile方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12