還不知道npm私服？一篇教會你搭建私服并發(fā)布vue3組件庫到nexus

時間：2023-05-06 18:12:01 | 來源：網站運營

時間：2023-05-06 18:12:01 來源：網站運營

還不知道npm私服？一篇教會你搭建私服并發(fā)布vue3組件庫到nexus：

介紹

繼上一篇博客看了它！你也能輕松部署vue3組件庫發(fā)布后，得到了很多小伙伴們的關注。

這篇還不知道npm私服？一篇教會你搭建私服并發(fā)布vue3組件庫到nexus，有別于上一篇，此篇博客介紹了如何將vue3組件庫發(fā)布到私服，而不是發(fā)布到npm官方倉庫。

日常工作時，出于保密性、開發(fā)便捷性等需求，或者是還在內部測試階段，我們可能需要將vue3組件庫部署到公司的nexus中。我們可能希望部署vue3組件庫的操作是CI/CD中的一環(huán)。

現(xiàn)在建木CI有了自動發(fā)布構件的官方npm節(jié)點，這一切都將變得非常簡單。

節(jié)點：npm發(fā)布依賴包

準備工作

• 安裝建木CI，參考建木快速開始
• 安裝nexus搭建npm私服，創(chuàng)建用戶、開啟token驗證、生成token

1. 安裝sonatype nexus

# docker search nexus 搜索nexus 下載量最高的那個sonatype/nexus3docker search nexus# 從docker hub中將sonatype nexus拉取下來docker pull sonatype/nexus3# 啟動sonatype nexus并使其監(jiān)聽8081端口docker run -d -p 8081:8081 --name nexus sonatype/nexus3訪問搭建的nexus，可以看到如下界面，那么nexus搭建成功

接下來，需要登錄管理員(第一次登錄會提供密碼，然后要求改密碼)，創(chuàng)建Blob Stores的數(shù)據(jù)池地址，供后面?zhèn)}庫選擇

創(chuàng)建我們的私有npm庫，需要注意的是我們要創(chuàng)建三個倉庫(倉庫名有辨識即可)

• group見名知意，是一個倉庫組，包含多個具體的倉庫(proxy、hosted)
• hosted本地倉庫，就是我們內部發(fā)布包的地址
• proxy代理倉庫，會去同步代理倉庫的npm包(即下載本地倉庫沒有的包時，會去代理倉庫下載，代理倉庫可設置為官方倉庫)

創(chuàng)建proxy倉庫，需要設置一些值




創(chuàng)建hosted倉庫，需要設置一些值




創(chuàng)建group倉庫，選擇我們之前創(chuàng)建的兩個倉庫




大功告成！查看這個hosted類型的地址，建木CI流程編排需要這個地址作為參數(shù)







還需要私服的token，需要先創(chuàng)建一個賬戶，用于本地生成token







開啟nexus的用戶token權限驗證







需要本地設置hosted類型倉庫地址，npm config set registry http://xxx:8081/xxx/npm_hosted 然后npm login獲取token







添加token到建木的密鑰，先創(chuàng)建命名空間npm，在該空間下創(chuàng)建賬戶的密鑰wllgogogo_token

2. 挑選節(jié)點

建木CI是一個節(jié)點編排工具，那么我們需要挑選合適的節(jié)點完成一系列的業(yè)務操作

git clone節(jié)點

使用git clone節(jié)點，將我們需要部署的前端npm包項目從遠程倉庫上拉取下來。git clone節(jié)點的版本，我們選擇1.2.3版本

如下圖：訪問建木Hub可以查看節(jié)點詳細信息，比如，git clone節(jié)點的參數(shù)，源碼，版本說明等信息







nodejs構建節(jié)點

使用nodejs構建節(jié)點，會將我們clone下來的項目進行build構建，本文我們將用到1.4.0-16.13.0版本

如下圖查看此節(jié)點的詳細信息：







發(fā)布npm依賴包節(jié)點

使用發(fā)布npm依賴包節(jié)點，會將我們build后的項目發(fā)布到公服或私服，從1.1.0-16.15.0版本開始支持私服的發(fā)布

如下圖查看此節(jié)點的詳細信息：

3. 編排流程

節(jié)點選好了，得把它們編排在一起，目前建木CI提供了兩種方式來編排節(jié)點:

1. 使用建木CI的DSL來編排節(jié)點
2. 使用建木CI圖形化編排功能來編排節(jié)點

此次我們使用圖形化編排功能編輯此測試流程（ps：圖形化編排是建木CI 2.4.0推出的重磅級功能，詳見「v2.4」千呼萬喚的圖形化編排，來了！）

首先編輯項目信息







從左邊抽屜中將所需的三個節(jié)點拖拽出來







填充節(jié)點參數(shù)

填充參數(shù)之前，將三個節(jié)點連起來，如圖：這個箭頭可以完成的功能有：

• 定義流程運行先后順序
• 將上游節(jié)點的輸出參數(shù)輸出到下游節(jié)點，這里的git clone節(jié)點輸出參數(shù)將被輸出到后續(xù)所有節(jié)點

點擊節(jié)點圖標開始填充參數(shù)

• git clone節(jié)點
  這里我們配置一個需要部署的 npm包 項目的 git 地址，選擇1.2.3版本，改名git_clone
  

• nodejs構建 節(jié)點
  同樣配置此節(jié)點的必需參數(shù)
  1.節(jié)點版本：nodejs構建節(jié)點的版本選擇 1.4.0-16.13.0
  2.工作目錄：需要build的項目路徑
  3.registry url：給包管理工具設置鏡像，一般設置淘寶鏡像https://registry.npmmirror.com/
  4.包管理器類型：根據(jù)具體項目情況來選擇包管理器，這個項目構建用的是pnpm
  5.項目package.json文件目錄相對路徑：package.json目錄相對地址，讀取name和version
  

nodejs構建節(jié)點的工作目錄參數(shù)引用了git_clone節(jié)點的輸出參數(shù)（git_clone作為上游節(jié)點將它的輸出參數(shù)作為nodejs構建的輸入?yún)?shù)傳遞給nodejs構建節(jié)點），下圖演示了下游節(jié)點如何選擇上游節(jié)點的輸出參數(shù)作為自己的輸入?yún)?shù)

• 發(fā)布npm依賴包 節(jié)點
  1.節(jié)點版本：選擇 1.1.0-16.15.0
  2.工作目錄：發(fā)布包目錄
  3.鏡像倉庫：前面準備工作nexus創(chuàng)建的npm本地倉庫地址
  4.token令牌：前面準備工作nexus創(chuàng)建的用戶，在本地設置hosted地址后，執(zhí)行npm login生成的token
  

發(fā)布 npm包 構件到 nexus

啟動流程

如下圖啟動流程







流程運行中







流程運行成功







查看每個節(jié)點的運行日志

git clone節(jié)點：







nodejs構建節(jié)點







發(fā)布npm依賴包節(jié)點







在nexus中查看部署的npm依賴包







至此，我們已經使用建木CI成功將npm依賴包部署到了nexus上！

說明

想必大家對圖形化編排非常感興趣，其實圖形化編排流程底層也是生成了一個流程DSL，如果想?yún)⒖急敬螠y試流程具體生成的DSL，可以移步此處npm發(fā)布nexus




本文為建木博主「wllgogogo」的原創(chuàng)投稿文章，轉載請聯(lián)系授權。

項?官?

項目托管

項目文檔