使用verdaccio+docker搭建npm私有倉庫以及使用

公司內部前端組件或庫的共享等,搭建一個npm私有庫就很方便,現在中大型公司也基本都有自己的npm私有庫,這篇文章,和大家一起共同搭建一個npm私有庫,共同學習

前置條件

  1. 一台電腦
  2. 可以聯網

一、安裝docker

使用的windows版本的 docker Desktop, 可以直接去 docker Desktop 官方網站去下載,下載完成後正常安裝就可以了。

或者使用 winget 安裝

winget install Docker.DockerDesktop

linux 下的安裝

直接使用各個發行版對應的 pkg manangment 安裝,由於本人最熟悉ubuntu,下面給出ubuntu下的安裝命令

#Ubuntu
apt install docker
apt install docker-compose // 如需要使用docker-compose可以使用此命令安裝

二、基於 Docker 安裝 Verdaccio

1、創建相關的目錄

mkdir /opt/Docer-container/verdaccio
cd /opt/Docer-container/verdaccio
mkdir conf && mkdir storage && mkdir plugins
cd ./storage && mkdir data && touch htpasswd
cd ../conf touch config.yaml
vim config.yaml

2、創建配置文件

# 存放軟體所有軟體包的目錄
storage: /verdaccio/storage/data
# 存放所有插件的目錄
plugins: /verdaccio/plugins

web:
  # 網站Title
  title: Verdaccio
  # 禁用Gravatar頭像
  # gravatar: false
  # 排序方式 asc|desc
  # sort_packages: asc
  # 是否啟用暗黑模式
  # darkMode: true
  # logo地址
  # logo: //somedomain/somelogo.png
  # favicon地址
  # favicon: //somedomain/favicon.ico | /path/favicon.ico

# i18n翻譯配置
# i18n:
# 可用列表見://github.com/verdaccio/ui/tree/master/i18n/translations
#   web: en-US

auth:
  htpasswd:
    file: /verdaccio/storage/htpasswd
    # 最大註冊用戶數,默認為 "+inf".
    # 可用通過設置為-1禁止註冊
    # max_users: 1000

# 上游npm庫,可以設置多個
uplinks:
  npmjs:
    url: //registry.npmjs.org/
  taobao:
    url: //registry.npmmirror.com/

packages:
	# 作用域包
  '@*/*':  
    # 允許所有人訪問
    access: $all
    # 註冊用戶可訪問
    publish: $authenticated
    # 註冊用戶可訪問
    unpublish: $authenticated
    proxy: npmjs

  '**':
    # 默認情況下所有用戶 (包括未授權用戶) 都可以查看和發布任意包
    # 你可以指定 用戶名/分組名 (取決於你使用什麼授權插件,默認的授權插件是內置的 htpasswd)
    # 訪問許可權有三個關鍵詞: "$all", "$anonymous", "$authenticated"
    # $all 表示不限制,任何人可訪問;
    # $anonymous 表示未註冊用戶可訪問;
    # $authenticated 表示只有註冊用戶可訪問
    access: $all

    # 允許所有註冊用戶發布/撤銷已發布的軟體包
    # (注意:默認情況下任何人都可以註冊)
    publish: $authenticated
    unpublish: $authenticated

    # 如果私有包服務不可用在本地,則會代理請求到'npmjs'
    # proxy 可以有多個值,多個值用空格分開
    proxy: taobao 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

3、安裝運行 Verdaccio

docker run -it --name verdaccio \
-p 4873:4873 \
-v /opt/Docker-container/Verdanccio/conf:/verdaccio/conf \
-v /opt/Docker-container/Verdanccio/storage:/verdaccio/storage \
-v /opt/Docker-container/Verdanccio/plugins:/verdaccio/plugins \
verdaccio/verdaccio

運行成功後就可以通過//伺服器ip:4873訪問npm私有庫了。

報錯處理:

如果提示 fatal--- cannot open config file /verdaccio/conf/config.yaml: Error: CONFIG: it does not look like a valid config file, 可以執行下面的命令

chcon -Rt container_file_t ./conf

更多解決方法請查看官方文檔

三、管理 npn、yarn、pnpm 源

1、替換 npn、yarn、pnpm 源為 //192.168.188.164:4873/

#npm和pnpm 設置(pnpm使用npm配置的源)
npm config set registry //192.168.188.164:4873/
# yarn 設置
yarn config set registry //192.168.188.164:4873/ #-g是全局設置

直接把默認的npm源替換為我們私有庫,但是多個源的時候不太好管理。所以推薦使用nrm來管理我們的npm源。

2、使用 nrm 管理 npm

# 全局安裝nrm
$ npm i -g nrm

# 添加私有庫
$ nrm add vnpm //192.168.188.164:4873

# 查看現有的npm源
$ nrm ls

  npm ---------- //registry.npmjs.org/
  yarn --------- //registry.yarnpkg.com/
  tencent ------ //mirrors.cloud.tencent.com/npm/
  cnpm --------- //r.cnpmjs.org/
  taobao ------- //registry.npmmirror.com/
  npmMirror ---- //skimdb.npmjs.com/registry/
  private ------ //192.168.188.164:10086/repository/npm/
* vnpm --------- //192.168.188.164:4873/

# 設置npm源
$ nrm use vnpm

管理 yarn 的源,可以使用 yrm 來管理;用法同 nrm

四、註冊用戶和發布npm包

1、註冊私有庫用戶

# 註冊用戶
$ npm adduser
複製程式碼

2、登陸私有庫用戶

# 登錄用戶
$ npm login

# 查看當前登錄用戶
$ npm who am i
複製程式碼

3、在私有庫發布包

# 發布當前包 
$ npm publish

到此,所有的安裝,註冊用戶,發布包流程都已經完成了,各位小夥伴如果有什麼問題可以私聊/留言。