欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

pm2與Verdaccio搭建私有npm庫過程詳解

 更新時間：2022年08月23日 10:25:05   作者：施強前端團隊  
這篇文章主要介紹了pm2與Verdaccio搭建私有npm庫過程詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

最近開會的時候討論到前端組件庫搭建，因為需要多人協(xié)作，使用npm link等都比較麻煩，且當業(yè)務規(guī)模較大了之后，我們一般會有自己的腳手架，自己的全局工具包等等。其中可能包含了自身的業(yè)務代碼不能公開，因此我們都需要一個私有化的npm倉庫。

一般私有化的npm倉庫有以下幾種方法實現(xiàn)：

  • 通過npm購買私有服務
  • 通過git直接引用
  • 通過開源項目直接搭建，例如cnpm、verdaccio、sinopia等

下面對各個方案進行一個粗淺的對比：

  • 官方私有npm服務：團隊版$7/人/月這個價格就已經(jīng)直接勸退，且不說npm在國內的網(wǎng)絡情況不容樂觀。
  • 直接安裝git代碼：直接通過npm install 引入對應git代碼確實有一定的便利性，但是當全局包多了之后不便于維護且權限難以管理
  • sinopia：基于Node.js實現(xiàn)的一個開源npm庫，年久失修。最近一次提交是6年前，直接放棄。
  • cnpm：阿里出的npm私有方案，權限控制較為全面但是配置復雜，需要自己搭建mysql之類的數(shù)據(jù)庫存儲。
  • verdaccio：基于sinopia繼續(xù)開發(fā)，目前維護很頻繁而且配置簡單，可以快速搭建。

為什么選用Verdaccio？

https://verdaccio.org/

先跟大家吐個槽，其實我本來是想用sinopia搭建的私服，也知道大家也都傾向于sinopia來搭，畢竟它出道比較早，知名度比較高，但是sinopia的作者幾年前就已經(jīng)停止了對sinopia的維護和升級，不信大家可以自己去GitHub上看，上次更新真的停留在了幾年前，唉，然后真是留了一堆坑，所幸不是沒人管，只是有一群人又出了一個sinopia的fork,也就是sinopia的分支，而且還起了個洋氣的意大利名verdaccio ，但是verdaccio 確實是正在維護的，我查了最近一次更新還是在2天前，這幫人還是挺勤快的，造福了大家啊~ 而且也比較好用，我用sinopia搭的時候填的一堆坑在verdaccio 這壓！根！不！存！在！真是絕望啊，為啥我沒有早點發(fā)現(xiàn)它。這里是verdaccio 在github的源碼地址，大家想深入了解最好還是去看看源碼和詳細介紹。話不多說下面正式開始verdaccio的搭建。

安裝

Verdaccio 的安裝啟動過程較為簡單。首先是全局安裝 Verdaccio：

npm i -g verdaccio

然后，在終端中輸入 verdaccio 命令啟動 Verdaccio：

接著 Verdaccio 會在終端中輸出提示，輸出它的配置文件位置、啟動的服務地址等信息：

默認 Verdaccio 啟動的服務都會在 4873 這個端口，在瀏覽器中打開這個地址我們就會看到 Verdaccio 搭建的私有庫 npm 的界面：

修改配置

雖然，安裝和啟動好了 Verdaccio。但是，由于 Verdaccio 默認的配置和我們生產(chǎn)的需求不一致，所以我們需要修改一下 Verdaccio 的配置。

在生產(chǎn)環(huán)境下，私有 npm 庫需要具備以下 3 個功能：

  • 支持對 npm 包的搜索
  • 嚴格的權限把控，npm 包的訪問只能是已注冊的用戶。并且在一些場景下，需要刪除用戶

配置文件

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ù)，默認為 "+inf".
# 可用通過設置為-1禁止注冊
# max_users: 1000
# 上游npm庫，這里可用設置為淘寶
uplinks:
npmjs:
url: https://registry.npmjs.org/
packages:
# 作用域包
'@*/*':
# 允許所有人訪問
access: $all
# 注冊用戶可訪問
publish: $authenticated
# 注冊用戶可訪問
unpublish: $authenticated
proxy: npmjs
'**':
# 默認情況下所有用戶 (包括未授權用戶) 都可以查看和發(fā)布任意包
# 你可以指定 用戶名/分組名 (取決于你使用什么授權插件，默認的授權插件是內置的 htpasswd)
# 訪問權限有三個關鍵詞: "$all", "$anonymous", "$authenticated"
# $all 表示不限制，任何人可訪問；
# $anonymous 表示未注冊用戶可訪問；
# $authenticated 表示只有注冊用戶可訪問
access: $all
# 允許所有注冊用戶發(fā)布/撤銷已發(fā)布的軟件包
# (注意：默認情況下任何人都可以注冊)
publish: $authenticated
unpublish: $authenticated
# 如果私有包服務不可用在本地，則會代理請求到'npmjs'
proxy: npmjs
# 您可以指定傳入連接的HTTP /1.1服務器保持活動超時（以秒為單位）。
# 值為0會使http服務器的行為類似于8.0.0之前的Node.js版本，后者沒有保持活動超時。
# 解決方法：通過給定的配置可以解決以下問題
server:
keepAliveTimeout: 60
# 中間件
middlewares:
audit:
enabled: true
# 日志設置
logs: { type: stdout, format: pretty, level: http }
# 開放遠程訪問，允許所有IP
listen:
- 0.0.0.0:4873

這里我們來逐個認識一下默認配置中的幾個值的含義：

字段含義
storage已發(fā)布的包的存儲位置，默認存儲在 ~/.config/Verdaccio/ 文件夾下
plugins插件所在的目錄
web界面相關的配置
auth用戶相關，例如注冊、鑒權插件（默認使用的是 htpasswd）
uplinks用于提供對外部包的訪問，例如訪問 npm、cnpm 對應的源
packages用于配置發(fā)布包、刪除包、查看包的權限
server私有庫服務端相關的配置
middlewares中間件相關配置，默認會引入 auit 中間件，來支持 npm audit 命令
logs終端輸出的信息的配置

權限把控

權限把控指的是我們需要私有 npm 庫上發(fā)布的包只能團隊成員查看，除此之外人員不能看到一切信息。那么，回到 Verdaccio，我們需要做這 2 件事：

  • 限制 npm 包的查看，只能為已注冊的用戶
  • 禁止用戶注冊（在團隊成員已注冊完成后）

相應地，這里我們需要修改配置文件的 pacakges 和 auth。前面我們也提及了 packages 是用于配置發(fā)布包、查看包、刪除包相關的權限。我們先再來看看默認的配置：

packages:
'@*/*':
access: $all
publish: $authenticated
unpublish: $authenticated
proxy: npmjs
'**':
access: $all
publish: $authenticated
unpublish: $authenticated
proxy: npmjs

這里的 key 代表對應權限需要匹配的包名，例如對于第一個，如果我們發(fā)布的包名是這樣的 @wjc/test 就會命中。每個規(guī)則中對應 4 個參數(shù)。其中 proxy 代表如果在私有 npm 庫找不到，則會代理到 npmjs（對應 unlinks 中的 npmjs 的 registry.npmjs.org/）。而剩下的 3 個參數(shù)，都是用來設置包相關的權限，它有三個可選值 all（所有人）、all（所有人）、all（所有人）、anonymous（未注冊用戶）、$authenticated（注冊用戶）。那么，下面我們分別看一下這 3 個參數(shù)的含義：

  • access 控制包的訪問權限
  • publish 控制包的發(fā)布權限
  • unpublish 控制包的刪除權限

顯然，這里我們需要的是只有用戶才能具備上述 3 個權限，即都設置為 $authenticated：

'@*/*':
access: $authenticated
publish: $authenticated
unpublish: $authenticated
proxy: npmjs
'**':
access: $authenticated
publish: $authenticated
unpublish: $authenticated
proxy: npmjs

設置好 packages 后，我們還得更改 auth 的值，因為此時注冊用戶是沒有限制的，也就是說如果你的私有 npm 庫部署在外網(wǎng)環(huán)境的話，任何人都可以通過 npm adduser 命令注冊用戶。

顯然，這是不允許出現(xiàn)的情況，所以這里我們需要設置 auth 的 max_users 為 -1，它代表的是禁用注冊用戶：

auth: max_users: -1

部署

verdaccio提供了docker和全局包2種方式進行安裝，下面是兩種安裝方式的詳細步驟

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
# 啟動docker容器
# -d: 在后臺開啟docker進程
# --name: 給容器指定一個名稱
# --p: 將本機的4873端口映射到docker的4873端口
# --restart=always: 自動重啟容器
# -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這個文件夾掛載到docker的/verdaccio/conf文件夾，verdaccio在啟動時會自動尋找/verdaccio/conf/config.yaml文件作為配置。

pm2部署

pm2的部署相對于docker需要安裝node。但是相對的部署起來會更快捷，可以根據(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/
# 設置npm源
$ nrm use verdaccio

npm包發(fā)布

注冊

# 注冊用戶，這里因為方便演示，所以沒有關閉注冊。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/
# 查看當前登錄用戶
$ npm who am i
yourusername

發(fā)布

# 發(fā)布當前包
$ 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
# 最后看到 + [你的包名@版本號]既可

需要注意的是相同的包上傳時版本號需要不同，否則上傳會失敗。

刪除

進入包文件路徑直接刪除即可。

以上就是pm2與Verdaccio搭建私有npm庫過程詳解的詳細內容，更多關于pm2 Verdaccio搭建npm庫的資料請關注腳本之家其它相關文章！

相關文章

  • 服務端nodejs抓取jsonp接口數(shù)據(jù)實現(xiàn)示例

    服務端nodejs抓取jsonp接口數(shù)據(jù)實現(xiàn)示例

    這篇文章主要為大家介紹了服務端nodejs抓取jsonp接口數(shù)據(jù)實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-06-06
  • 如何在NestJS中添加對Stripe的WebHook驗證詳解

    如何在NestJS中添加對Stripe的WebHook驗證詳解

    這篇文章主要為大家介紹了如何在NestJS中添加對Stripe的WebHook驗證詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • 淺談Node.js：理解stream

    淺談Node.js：理解stream

    本篇文章主要介紹了Node.js：stream，Stream在node.js中是一個抽象的接口，具有一定的參考價值，有需要的可以了解一下。
    2016-12-12
  • Electron調用外接攝像頭并拍照上傳實現(xiàn)詳解

    Electron調用外接攝像頭并拍照上傳實現(xiàn)詳解

    這篇文章主要為大家介紹了Electron調用外接攝像頭并拍照上傳實例實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-02-02
  • 深入Node TCP模塊的理解

    深入Node TCP模塊的理解

    這篇文章主要介紹了深入Node TCP模塊的理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • node后端服務?；畹膶崿F(xiàn)

    node后端服務?；畹膶崿F(xiàn)

    這篇文章主要介紹了node后端服務?；畹膶崿F(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • 如何配置nodejs的環(huán)境變量

    如何配置nodejs的環(huán)境變量

    這篇文章主要介紹了如何配置nodejs的環(huán)境變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • VsCode無法識別node問題解決過程

    VsCode無法識別node問題解決過程

    這篇文章主要給大家介紹了關于VsCode無法識別node問題解決的相關資料,文中通過圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2023-07-07
  • puppeteer庫入門初探

    puppeteer庫入門初探

    這篇文章主要介紹了puppeteer庫入門初探,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • node.js中的fs.appendFile方法使用說明

    node.js中的fs.appendFile方法使用說明

    這篇文章主要介紹了node.js中的fs.appendFile方法使用說明,本文介紹了fs.appendFile方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下
    2014-12-12

最新評論