搭建npm私服,我為什麼推薦Verdaccio?
highlight: atom-one-dark theme: vuepress
我正在參加「掘金·啟航計劃」
1. npm私服是什麼
在自己的伺服器上部署一個支援釋出、下載、版本管理等服務的npm倉庫就是npm私服,也叫私有化部署npm
眾所周知的原因,國內下載npm包特別慢甚至下載失敗,所以安裝完node.js還要設定映象源,映象源就屬於私服的一種
映象源:是以一定頻率定時同步npm官方倉庫,以此代替官方倉庫,提高包下載速度
shell
npm config set registry http://npmmirror.com
- 淘寶映象源 http://npmmirror.com
- 騰訊映象源 http://mirrors.cloud.tencent.com/npm/
- 華為映象源 http://mirrors.huaweicloud.com/repository/npm/
有了映象源為什麼還需要npm私服?
映象源解決了國內下載速度的問題,但是不能發包
如果公司有自己的元件庫,又不希望在網上公開,如何管理程式碼?
在每個專案裡複製一遍,但是當元件修改了程式碼,就需要重新複製一遍, 帶來的維護成本太高
這時就需要npm私服
2. npm私服有什麼用
2.1 釋出私有包
私服最重要的功能就是釋出私有包,既能保證程式碼不公開又能享受npm安裝的快捷
舉個栗子🌰
在開發中通常會把一些方法封裝成 utils.js
,在專案初始化時複製一份
有了私服後就可以發一個 myUtils
包,然後通過 npm install myUtils
來安裝
通過修改版本號就能快速更新包
ps:把專案模板發一個包,媽媽再也不用擔心專案初始化了😁
2.2 連結npm倉庫
在一個專案中使用多個倉庫下載包時,可以配置 .npmrc
指定下載地址
舉個栗子🌰
vue
包從淘寶映象源下載
myUtils
包從私服下載
.npmrc
需要配置兩個包的下載地址,還要在 package.json
中將私有包 myUtils
加上組織名 @sf/myUtils
```shell
淘寶映象源
registry=http://npmmirror.com
私有源
@sf:registry=http://... ```
甚至...
隔壁專案組也有自己的倉庫,你又要用到他們的包,只好再次修改 .npmrc
更好的辦法
使用私服的倉庫連結功能(上行鏈路),就可以把多個倉庫聚合成一個下載入口
上面的例子 .npmrc
只需要配置一個私服的地址 registry=http://...
省事省力
2.3 提高下載速度
通過私服下載的包會快取到伺服器中
下載同一個包(同組織/名/版本)時優先從快取中讀取,找不到再從映象或官方倉庫下載
快取策略可配置儲存空間大小,儲存週期等
3. 私服方案
3.1 開源免費
| 方案 | 支援倉庫 | star數 | github | 開發語言 | 更新頻率 | | ------------ | --------------------------- | ------ | -------------------------------------------------------- | ---------- | -------- | | Nexus 開源版 | maven,npm,docker,pypi... | 1.2k | nexus-public | Java | 高 | | Sinopia | npm | 5.5k | sinopia | JavaScript | 停止更新 | | Verdaccio | npm | 13.7k | verdaccio | JavaScript | 高 | | cnpm.org | npm | 3.6k | cnpmjs.org | JavaScript | 停止更新 | | cnpmcore | npm | < 500 | cnpmcore | TypeScript | 高 |
看起來是5個專案,其實是3個
Sinopia 停止更新後,社群大佬fork了一份並更名為 Verdaccio
cnpm.org 停止更新後,團隊使用 TypeScript 重構並新建了 cnpmcore 倉庫,目前 star數並不高
資料截至到2022年08月10日
所以可選的開源方案並不多,目前最受社群歡迎的就 Verdaccio,Nexus 兩個
3.2 收費方案
JFrog Artifactory 號稱是 "最好的通用儲存庫管理器",支援 docker、npm、maven、pypi等50多種倉庫
4. 為什麼推薦Verdaccio
verdaccio 6 已經在開發中,注意關注動態
很多團隊使用 Nexus ,原因是 Nexus 同時支援 Maven、npm 倉庫
同時支援前後端的倉庫,為了省事就不再單獨部署 npm 倉庫
從npm命令的角度二者差異不大,支援npm的多數命令,那為什麼推薦 Verdaccio 呢?
4.1 npm命令
截止到 5.15.3 版 Verdaccio 支援以下npm命令
| 功能 | 命令 | 是否支援 | | -------- | ------------------------------- | -------- | | 安裝包 | npm install、npm upgrade | ✅ | | 釋出包 | npm publish | ✅ | | 取消釋出 | npm unpublish | ✅ | | 標記 | npm tag | ✅ | | 棄用 | npm deprecate | ✅ | | 註冊使用者 | npm adduser {newuser} | ✅ | | 令牌 | npm token | ✅ | | 轉讓包 | | ❌ | | 搜尋 | npm search | ✅ | | ping | npm ping | ✅ | | 加星 | npm star、npm unstar、npm stars | ✅ | | 審計 | npm audit | ✅ |
4.2 理由1
二者最大的差異在於 Web 介面上
Verdaccio 顯示了包名、描述、作者、版本、標籤、更新時間、協議等資訊,更接近npm官方介面
Nexus 上的資訊則少的多
這是因為 Nexus 是一款綜合倉庫管理系統,不僅支援 npm,還有 maven,pypi 等倉庫,對包的資訊處理就沒有 Verdaccio 直觀
為什麼Web介面很重要?
講一下親身經歷,剛來公司時不知道發了哪些包,包的用途
只能從 Nexus 上扒拉,再去git檢視 README,程式碼
給後繼者帶來極大不便😣
所以易用的 npm 倉庫能方便快速瞭解團隊專案,提高開發效率。尤其開發人員變動時,感觸尤為深刻
看個動圖感受一下 Verdaccio 的介面
Verdaccio
-
提供各類包管理器
npm
yarn
pnpm
的安裝命令,一鍵複製 -
直接將
README.md
渲染到頁面上,不用再去git上翻 README
ps:變相督促大家好好寫 README 🤣
-
檢視依賴包,點選跳轉到對應包的詳情頁
-
歷史版本
-
上行鏈路,這就是前面說的 連結npm 倉庫 (圖中沒有配置 UPLINKS)
-
右上角包括倉庫資訊、登入,還有夜間模式等
Nexus
Nexus 需要先選版本再檢視詳情
npm包資訊內容與 Verdaccio 不同,展現形式也完全不一樣
Nexus 像一個 “字典”,把所有重要資訊羅列給你,Verdaccio 像一個 “工具” ,用起來更順手
4.3 理由2
除了有好看的皮囊,在其他方面 Verdaccio 也是一點不差
安裝簡單
支援 npm 、Docker 映象、Helm Chart、Cloudron 多種安裝方式,一行命令即可安裝
身份驗證
內建賬號註冊,登入功能(預設使用htpasswd),可通過外掛擴充套件LDAP等驗證方式
許可權控制
根據需要允許和限制對某個包的訪問、下載
上行鏈路
支援多個關聯多個npm倉庫
Webhooks
通過npm publish
釋出包時,可傳送通知
日誌
詳細的日誌記錄
外掛支援
官方支援認證、中介軟體、儲存、主題,4種類型外掛,可根據需求自己開發外掛,官網提供了詳細的開發文件
5. 從零開始搭建
從隔壁小黑那借來一臺 CentOS 7,開淦
官方提供了 docker 映象,為了省事直接使用 docker 安裝
5.1 安裝docker
使用 yum-utils 管理 yum 倉庫
```shell
安裝yum-utils
yum install -y yum-utils ```
新增 docker 的 yum 源
```shell
新增docker-ce源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
更新yum快取
yum --enablerepo=updates clean metadata ```
安裝 docker docker-compose 並執行
```shell
安裝
yum -y install docker-ce docker-ce-cli docker-compose
啟動
systemctl enable docker && systemctl start docker ```
5.2 配置docker映象源
已經配置過的直接下一步
```shell
docker配置資料夾
mkdir /etc/docker
編輯配置檔案
vi /etc/docker/daemon.json ```
修改 registry-mirrors 和 dns 配置
json
{
"registry-mirrors": [
"http://docker.mirrors.ustc.edu.cn",
"http://hub-mirror.c.163.com",
"http://reg-mirror.qiniu.com"
],
"dns": ["114.114.114.114","8.8.8.8"]
}
重啟docker
```shell
重啟配置
systemctl daemon-reload
重啟docker
systemctl restart docker ```
5.3 Verdaccio 容器配置
本文以安裝到 /verdaccio
目錄為例
安裝共需要3個檔案
- docker-compose.yaml
docker容器配置
- config.yaml
verdaccio配置檔案
- htpasswd
使用者密碼檔案
```shell
目錄結構
└── /verdaccio 專案目錄 ├──/conf 配置目錄 │ └── config.yaml verdaccio 配置檔案 │ └── htpasswd 使用者密碼檔案 │ ├──/storage 包存放目錄 │ ├──/plugins 外掛目錄 │ └── docker-compose.yaml docker-compose 配置檔案 ```
- 首先建立 docker-compose.yaml 檔案
docker-compose 是定義和執行docker容器的工具,通過
.yaml
檔案配置容器
```shell
建立目錄
mkdir /verdaccio
建立yaml檔案
touch /verdaccio/docker-compose.yaml
```
- 修改容器配置
```shell
用vi編輯器開啟檔案
vi /verdaccio/docker-compose.yaml ```
輸入以下內容
```yaml version: '3.1'
services: verdaccio: image: verdaccio/verdaccio container_name: "verdaccio" networks: - node-network environment: - VERDACCIO_PORT=4873 ports: - "4873:4873" volumes: - "./storage:/verdaccio/storage" - "./conf:/verdaccio/conf" - "./plugins:/verdaccio/plugins" networks: node-network: driver: bridge ```
- version:docker對應版本號 (構建時出錯請改小一點版本號)
- image:verdccio映象
- 三個
4873
是verdaccio訪問埠號 - volumes:是掛載物理機的目錄到 docker 中
- 第一行:儲存目錄,用於儲存npm包
- 第二行:配置檔案目錄,下一節 Verdaccio 配置 會講解
- 第三行:外掛目錄
本地建立好
docker-compose.yaml
傳到 CentOS 也是極好的
5.4 Verdaccio 配置
官網配置文件👉 http://verdaccio.org/zh-cn/docs/configuration/
- 建立配置檔案 config.yaml
Verdaccio 的配置檔案,上行鏈路、外掛、密碼檔案位置等等引數都通過
config.yaml
配置
```shell
建立目錄
mkdir /verdaccio/conf
建立檔案
touch /verdaccio/conf/config.yaml ```
- 修改配置
```shell
用vi編輯器開啟檔案
vi /verdaccio/conf/config.yaml ```
輸入以下內容
```yaml
npm包快取目錄
storage: /verdaccio/storage
外掛目錄
plugins: /verdaccio/plugins
密碼檔案
auth: htpasswd: file: /verdaccio/conf/htpasswd
上行鏈路
uplinks: npmjs: url: http://registry.npmjs.org timeout: 10s cache: false yarn: url: http://registry.yarnpkg.com timeout: 10s cache: false npmmirror: url: http://registry.npmmirror.com packages: # 帶@的包只能登入後釋出 "@/": # 訪問包的許可權 access: $all # 釋出包的許可權 publish: $authenticated # 代理鏈 proxy: npmjs npmmirror yarn # 普通包所有人都能釋出 "**": access: $all publish: $all proxy: npmjs npmmirror yarn middlewares: # 啟用 npm audit audit: enabled: true logs: - { type: stdout, format: pretty, level: http }
監聽埠
listen: 0.0.0.0:4873 ```
在 packages 中共有三種使用者角色
| 角色 | 描述 | | -------------- | ---------- | | $all | 所有使用者 | | $anonymous | 匿名使用者 | | $authenticated | 登入的使用者 |
在packages中可以定義某個包的釋出下載規則
網站的標題、Logo等設定參考 github web
欄位
官方預設配置檔案👉 http://github.com/verdaccio/verdaccio/blob/5.x/conf/default.yaml
5.5 建立容器並啟動
執行以下命令
```shell
進入verdaccio目錄
cd /verdaccio
構建
docker-compose up --build ```
看到這樣的提示後就可以開啟瀏覽器訪問verdaccio了
此時docker執行在前臺,Ctrl + C 結束命令就無法訪問
5.6 啟動和停止
編譯通過一次後,下次直接用 docker run 命令啟動,不需要再編譯 -d
是在後臺執行的意思
啟動
shell
docker run -d verdaccio/verdaccio
停止
```shell
檢視執行中的容器
docker ps -a
找到pid (CONTAINER ID)
docker stop * ```
💥 如果出現啟動以後無法訪問,需要升級核心之後重啟
shell
yum update
6. 使用Verdaccio
詳細命令參考 4.1 npm命令
把私服地址 配置到專案的 .npmrc 即可
js
registry=http://你的地址:4873/
註冊使用者
shell
npm adduser --registry http://你的地址:4873/
釋出包
shell
npm publish --registry http://你的地址:4873/
verdaccio 設定
```shell
已經做過docker的對映,只需修改 /verdaccio/conf/config.yaml
```
最重要的可以通過網頁瀏覽 npm 包
密碼管理
verdaccio使用 htpasswd
格式管理密碼,可以用工具生成,貼上到 /verdaccio/conf/htpasswd
檔案中
http://tool.oschina.net/htpasswd
在寫作過程中參考過以下內容
http://segmentfault.com/a/1190000020684605 http://blog.csdn.net/liuhangbiao/article/details/117604766