私有化輕量級持續集成部署方案–07-私有NPM倉庫-Verdaccio

• 2022 年 2 月 25 日
• 筆記
• Deploy

提示：本系列筆記全部存在於
Github，
可以直接在
Github 查看全部筆記

對於個人來說，私有NPM倉庫 作用性基本很小，但是對於企業，私有NPM倉庫 可以保護程式碼暴露，具有很大的意義。

也是為了學習搭建 私有NPM倉庫，就在持續部署中集成了私有倉庫。

開源社區，有兩個廣泛使用的 私有NPM倉庫 項目：

1. Sinopia
2. Verdaccio

Sinopia 項目官方於2019年已經不再維護，也就是現在已經不在推薦使用此項目。

Verdaccio 項目是從 Sinopia項目 fork 出來的，官方聲稱 100% 向後兼容 Sinopia。

Verdaccio 目前也就成了最普遍的 私有NPM倉庫 的解決方案。

Verdaccio

Verdaccio 概述

Verdaccio 是一個 Node 創建的輕量的私有 npm proxy registry

Verdaccio 中最強大的兩個功能是 上行鏈路 和 包身份許可權

Verdaccio 部署

Docker Compose 文件

Verdaccio 的 Docker Compose 文件比較簡單，主要是配置數據掛載

version: '3.9'

services:
  verdaccio:
    image: verdaccio/verdaccio:5.5
    container_name: verdaccio
    restart: always
    ports:
      - '4873:4873'
    volumes:
      - /volumes/verdaccio/conf:/verdaccio/conf
      - /volumes/verdaccio/storage:/verdaccio/storage
      - /volumes/verdaccio/plugins:/verdaccio/plugins

config.yaml

Verdaccio 項目提供了一個配置文件： config.yaml。

默認情況下 Verdaccio 會在首次運行時創建此文件。

但因為使用了 宿主目錄 掛載數據，所以需要預先創建此文件。

# 包存儲地址
storage: /verdaccio/storage

# 插件存儲地址
plugins: /verdaccio/plugins

# UI相關資訊
web:
 enable: true # 開啟 Web 頁面
 title: Verdaccio  # Web 頁面標題

# 身份認證
auth:
 htpasswd:                           # 默認情況下使用的 htpasswd 插件作為身份認證
   file: /verdaccio/conf/htpasswd # htpasswd 文件為加密認證資訊文件
   max_users: -1                     # 最大用戶數量， -1 表示禁用新用戶註冊

# 上行鏈路
uplinks:
 npmjs:                                    # 上行名稱，隨便定義
   url: //registry.npmjs.org/        # 上行地址
   timeout: 30s                            # 超時時間

                         
 taobao:                                   # 上行名稱
   url: //registry.npm.taobao.org/   # 上行地址
   timeout: 30s                          

# 包訪問設置, 可以根據名稱對包做不同許可權設置
packages:
 '@*/*':
   access: $authenticated                # 登錄用戶才允許訪問
   publish: $authenticated               # 登錄用戶才允許發布
   proxy: taobao                         # 代理上行鏈路地址

 '**':
   access: $authenticated                # 登錄用戶才允許訪問
   publish: $authenticated               # 登錄用戶才允許發布
   proxy: taobao                         # 代理上行鏈路地址

server:
 keepAliveTimeout: 30                    # 伺服器保持活動鏈接的時間,較大的包可能會消耗一定時間,此屬性就是設置活動鏈接時間

middlewares:
 audit:
   enabled: true

# 日誌
logs: { type: stdout, format: pretty, level: http  }

config.yaml 文件設置了一些關鍵屬性， 至於其它屬性，請參考： verdaccio–配置文件

auth(身份認證)

auth 是設置 用戶身份憑證的屬性

Verdaccio 項目默認使用了 htpasswd 插件作為 用戶認證 服務。

htpasswd 插件需要提供一個存儲用戶憑證的文件：/verdaccio/conf/htpasswd。

max_users 屬性表示最大註冊用戶， 當值為 -1 時，表示禁止用戶註冊；當值不為 -1時，可以使用 npm adduser 命令添加用戶。

禁用用戶註冊時，可以使用 htpasswd-generator工具 生成身份憑證，然後存儲在 /verdaccio/conf/htpasswd。

PS：用戶認證 可以自定義為其它插件

unlinks(上行鏈路)

unlinks(上行鏈路) 是設置上游代理倉庫的屬性。

unlinks(上行鏈路) 可以配置多個地址，針對每一個 unlinks(上行鏈路) 都可以做不同設置。

詳細請參考 verdaccio–上行鏈路

默認的 unlinks(上行鏈路) 為 npmjs。

packages(訪問許可權)

packages(訪問許可權) 是設置包訪問許可權的屬性。

可以根據名稱對一個 或 一組 包分別對 訪問、發布、代理等操作做不同的設置。

上述配置 簡單的對所有包統一處理。

配置中訪問、發布 許可權設置為了 $authenticated， 這個值是 Verdaccio 預設的變數值，表示登錄用戶。

還可以將許可權設置為 其它變數值 或 指定用戶，詳細請參考 verdaccio–包的訪問

執行部署

配置文件準備就緒，就可以執行部署，部署成功後就可以訪問頁面

PS: 注意開啟雲伺服器 4873 埠號防火牆

掛載目錄許可權

默認情況下 Verdaccio 容器不具有宿主機目錄的操作許可權。

將容器目錄掛載到宿主機後，Verdaccio 執行寫入操作時，會返回許可權錯誤。

解決這個問題，需要賦予 Verdaccio 容器 寫入宿主機目錄的許可權。

sudo chown -R 10001:65533 /volumes/verdaccio

測試Verdaccio倉庫

部署成功後，可以在本地創建一個測試項目，發布到 Verdaccio 倉庫中。

對於個人來說，私有NPM倉庫 作用性基本很小，但是對於企業，私有NPM倉庫 可以保護程式碼暴露，具有很大的意義。

也是為了學習搭建 私有NPM倉庫，就在持續部署中集成了私有倉庫。

開源社區，有兩個廣泛使用的 私有NPM倉庫 項目：

1. Sinopia
2. Verdaccio

Sinopia 項目官方於2019年已經不再維護，也就是最好不要再使用此項目進行搭建。

Verdaccio 項目是從 Sinopia項目 fork 出來的，官方聲稱 100% 向後兼容 Sinopia。

Verdaccio 目前就成了普遍的 私有NPM倉庫 的解決方案。

Verdaccio

Verdaccio 概述

Verdaccio 是一個 Node 創建的輕量的私有 npm proxy registry

Verdaccio 提供了上行鏈路功能， 安裝 Verdaccio 倉庫中不存在的包時，可以配置向上游倉庫下載。

Verdaccio 還提供了強大的身份認證系統。

Verdaccio 部署

Docker Compose 文件

Verdaccio 的 Docker Compose 文件比較簡單，主要配置數據掛載

version: '3.9'

services:
  verdaccio:
    image: verdaccio/verdaccio:5.5
    container_name: verdaccio
    restart: always
    ports:
      - '4873:4873'
    volumes:
      - /volumes/verdaccio/conf:/verdaccio/conf
      - /volumes/verdaccio/storage:/verdaccio/storage
      - /volumes/verdaccio/plugins:/verdaccio/plugins

config.yaml

Verdaccio 項目提供了一個配置文件： config.yaml。

默認情況下 Verdaccio 會在首次運行時創建此文件。

但因為使用了 宿主目錄 掛載數據，所以需要預先創建此文件。

# 包存儲地址
storage: /verdaccio/storage

# 插件存儲地址
plugins: /verdaccio/plugins

# UI相關資訊
web:
 enable: true # 開啟 Web 頁面
 title: Verdaccio  # Web 頁面標題

# 身份認證
auth:
 htpasswd:                           # 默認情況下使用的 htpasswd 插件作為身份認證
   file: /verdaccio/conf/htpasswd # htpasswd 文件為加密認證資訊文件
   max_users: -1                     # 最大用戶數量， -1 表示禁用新用戶註冊

# 上行鏈路
uplinks:
 npmjs:                                    # 上行名稱，隨便定義
   url: //registry.npmjs.org/        # 上行地址
   timeout: 30s                            # 超時時間

                         
 taobao:                                   # 上行名稱
   url: //registry.npm.taobao.org/   # 上行地址
   timeout: 30s                          

# 包訪問設置, 可以根據名稱對包做不同許可權設置
packages:
 '@*/*':
   access: $authenticated                # 登錄用戶才允許訪問
   publish: $authenticated               # 登錄用戶才允許發布
   proxy: taobao                         # 代理上行鏈路地址

 '**':
   access: $authenticated                # 登錄用戶才允許訪問
   publish: $authenticated               # 登錄用戶才允許發布
   proxy: taobao                         # 代理上行鏈路地址

server:
 keepAliveTimeout: 30                    # 伺服器保持活動鏈接的時間,較大的包可能會消耗一定時間,此屬性就是設置活動鏈接時間

middlewares:
 audit:
   enabled: true

# 日誌
logs: { type: stdout, format: pretty, level: http  }

config.yaml 文件設置了一些關鍵屬性， 至於其它屬性，請參考： verdaccio–配置文件

auth(身份認證)

auth 屬性是 Verdaccio 用戶身份憑證的屬性

Verdaccio 項目默認使用了 htpasswd 插件作為 用戶認證 服務。

htpasswd 插件需要提供一個存儲用戶憑證的文件：/verdaccio/conf/htpasswd。

max_users 屬性表示最大註冊用戶， 當值為 -1 時，表示禁止用戶註冊；當值不為 -1時，可以使用 npm adduser 命令添加用戶。

禁用用戶註冊時，可以使用 htpasswd-generator工具 生成身份憑證，然後存儲在 /verdaccio/conf/htpasswd。

PS：用戶認證 可以自定義為其它插件

unlinks(上行鏈路)

unlinks(上行鏈路) 屬性是 Verdaccio 配置上游代理倉庫的屬性。

unlinks(上行鏈路) 可以配置多個地址，針對每一個 unlinks(上行鏈路) 都可以做不同設置。

詳細請參考 verdaccio–上行鏈路

默認的 unlinks(上行鏈路) 為 npmjs。

packages(訪問許可權)

packages(訪問許可權) 屬性是 Verdaccio 配置包訪問許可權的屬性。

可以根據名稱對一個 或 一組 包對 訪問、發布、代理等不同操作做不同設置。

上述配置 只簡單的 對所有進行了統一處理 中。

配置中訪問、發布 許可權設置為了 $authenticated， 這個值是 Verdaccio 預設的變數值，表示登錄用戶。

還可以將許可權設置為 其它變數值 或 指定用戶，詳細請參考 verdaccio–包的訪問

執行部署

配置文件準備就緒，就可以執行部署，隨後訪問頁面

PS: 注意開啟雲伺服器 4873 埠號防火牆

掛載目錄許可權

默認情況下 Verdaccio 容器不具有宿主機目錄的操作許可權。

將容器容器目錄掛載到宿主機後，Verdaccio 執行寫入操作時，會返回許可權錯誤。

解決這個問題，需要賦予 Verdaccio 容器 寫入宿主機目錄的許可權。

sudo chown -R 10001:65533 /volumes/verdaccio

測試Verdaccio倉庫

部署成功後，可以在本地創建一個測試項目，發布到 Verdaccio 倉庫中。

在沒有任何問題的情況下，可以成功的將項目發布到 倉庫 中，在頁面登錄時可以看到這個項目

網關配置

Verdaccio 官方文檔–Reverse Proxy Setup 中給出了使用反向代理的配置。

主要是對代理頭的設置。其中至關重要的一個屬性是：proxy_set_header X-Forwarded-Proto $scheme

server {
        #SSL 訪問埠號為 443
        listen 443 ssl http2;
        #填寫綁定證書的域名
        server_name npm.mwjz.live;
        #上傳大小限制
        client_max_body_size 10M;
        #日誌
        error_log /var/log/nginx/npm/error.log;
        access_log /var/log/nginx/npm/access.log;
        #證書文件
        ssl_certificate /etc/nginx/conf.d/ssl/npm/npm.mwjz.live_bundle.crt;
        #證書密鑰文件
        ssl_certificate_key /etc/nginx/conf.d/ssl/npm/npm.mwjz.live.key;

        ssl_ciphers SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!3DES:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        location / {
            #   代理設置
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_read_timeout 600;
            proxy_redirect off;
            proxy_pass //10.0.24.12:4873;
        }
        

        location ~ ^/verdaccio/(.*)$ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_set_header X-NginX-Proxy true;
            proxy_redirect off;
            proxy_pass //10.0.24.12:4873/$1;
        }
    }

重啟 網關服務 和 Verdaccio 容器

docker exec -it gateway nginx -s reload

Drone 配置私有 NPM 倉庫

Drone 持續部署中集成 Verdaccio 倉庫，需要在執行時登錄 倉庫。

NPM 會將登錄憑證存儲在 .npmrc 文件中。

也就是需要一個插件執行登錄操作，並將登錄憑證寫入 .npmrc 文件

Drone 社區中提供了一個這樣的鏡像插件：robertstettner/drone-npm-auth

kind: pipeline          # 定義一個管道
type: docker            # 定義管道類型
name: build              # 定義管道名稱

volumes:                # 聲明數據卷
- name: node_modules    # 數據卷名稱
  host:                 # Host Volume
    path: /volumes/drone/volumes/web/node_modules   # 宿主機目錄

clone:
  disable: false        # 啟用程式碼拉取

steps:
  # 生成版本號標籤
  - name: build-tags  
    image: yxs970707/drone-web-tags  # 使用鏡像
    depends_on: [clone]   # 依賴的步驟，
    settings:
      tags:
        - latest

  # 私有 NPM 倉庫登錄     
  - name: npm-login 
    image: robertstettner/drone-npm-auth
    settings:
      registry: //npm.mwjz.live/
      username:
        from_secret: npm_username
      password:
        from_secret: npm_password
      email:
        from_secret: npm_email
  
  # 編譯項目
  - name: build-project   # 步驟名稱
    image: node:16.13.2   # 使用鏡像
    depends_on: [npm-login]   # 依賴的步驟，
    volumes:              # 掛載數據卷
    - name: node_modules  # 數據卷名稱
      path: /drone/src/node_modules # 容器內目錄
    commands:             # 執行命令
      - npm config set registry //npm.mwjz.live/
      - npm config get
      - npm install       # 安裝node_modules包
      - npm run build     # 執行編譯

 # 打包Docker鏡像
  - name: build-image     # 步驟名稱
    image: plugins/docker # 使用鏡像
    depends_on: [build-tags, build-project] # 依賴步驟
    settings:             # 當前設置
      username:           # 帳號名稱
        from_secret: docker_username
      password:           # 帳號密碼
        from_secret: docker_password
      dockerfile: deploy/Dockerfile # Dockerfile地址， 注意是相對地址
      registry: docker.mwjz.live  # 私有鏡像倉庫地址
      repo: docker.mwjz.live/mwjz/deploy-web-demo # 鏡像名稱

可以將Drone 中 node_modules 快取清除，然後提交測試