NPM 私有倉庫的搭建

RayChen1221發表於2020-04-29

NPM 私有倉庫的搭建

為什麼搭建私有倉庫

balabala,當然是有需求的時候嘛

搭建流程

介紹和安裝verdaccio

備註:

程式啟動後,配置檔案為/home/work/.config/verdaccio/config.yaml

密碼檔案所在位置:/home/work/.config/verdaccio/htpasswd

日誌檔案所在文職:/home/work/verdaccio.log

推薦部落格1

官方詳細文件verdaccio

  1. Nodejs環境全域性安裝(root)

    npm install –g verdaccio
  2. pm2 執行程式,注意請切換成普通使用者work,不需要root

    網址訪問 http://localhost:4873

    pm2 start verdaccio
  3. 修改配置檔案,配置檔案如下,
    參照預設檔案修改內容如下

    1. max_users: -1, 限制使用者自行註冊
    2. logs 日記儲存方式為檔案
    3. title 修改為公司名稱
    4. 修改packages的訪問,釋出,取消釋出的許可權,都改為需要登入的許可權,初步限制僅公司內部認證過的賬戶可訪問(access: $authenticated,publish: $authenticated,unpublish: $authenticated,proxy: npmjs)
    5. 後期需要的話,可針對不同的倉庫配置不同的人員username許可權,有開發能力的團隊,可自行定製外掛中介軟體,比如限制IP和使用者名稱訪問

自定義UI介面

從官方ui主題倉庫fork到個人帳號,然後克隆到本地開始進行自定義修改

現在去 github fork?

自定義介面後需要釋出版本到npm中,根據配置檔案的theme設定重啟後會自定應用

從官方倉庫中fock出來,修改搜尋關鍵字favicon, title, logo等,footer和header也可以修改一下

修改package.json中的name屬性,修改為 verdaccio-theme-****

安裝依賴,打包,等錄npm,釋出到npm倉庫(可釋出到共有npm,也可以釋出到剛剛新起的npm私有倉庫服務)

npm install && npm run build && npm login && npm publish
npm i verdaccio-theme-**** -g

服務端安裝剛剛釋出的主題包(root, 全域性安裝,因為verdaccio是動態載入外掛)

最後在配置檔案中修改主題配置

theme:
****:
a:b
su work
pm2 restart verdaccio 重啟服務生效


重新整理頁面吧親。不知道為什麼,僅寫theme: ****或者換行不生效,反正我也不懂,能用就行

新增使用者

點選去建立htpasswd密碼檔案網址

去網站生成密碼,然後將密碼新增到服務端密碼檔案中,記得重啟服務

預設配置

 

#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#

# path to a directory with all packages
storage: ./storage
# path to a directory with plugins to include
plugins: ./plugins

web:
title: Qianjunet npm repo
# comment out to disable gravatar support
# gravatar: false
# by default packages are ordercer ascendant (asc|desc)
# sort_packages: asc

auth:
htpasswd:
file: ./htpasswd
# Maximum amount of users allowed to register, defaults to "+inf".
# You can set this to -1 to disable registration.
max_users: -1

# a list of other known repositories we can talk to
uplinks:
npmjs:
url: https://registry.npmjs.org/

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

'**':
# allow all users (including non-authenticated users) to read and
# publish all packages
#
# you can specify usernames/groupnames (depending on your auth plugin)
# and three keywords: "$all", "$anonymous", "$authenticated"
# access: $all
access: $authenticated

# allow all known users to publish/publish packages
# (anyone can register by default, remember?)
publish: $authenticated
unpublish: $authenticated

# if package is not available locally, proxy requests to 'npmjs' registry
proxy: npmjs

# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
server:
keepAliveTimeout: 60

middlewares:
audit:
enabled: true

# log settings
logs:
#- { type: stdout, format: pretty, level: http }
- {type: file, path: ./verdaccio.log, level: info}
#experiments:
# # support for npm token command
# token: false



配置nginx, 將請求轉發到4873服務

 

server {
listen 80;
server_name npm.**********.com;

location / {
proxy_http_version 1.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:4873$request_uri;
proxy_redirect off;
}
}

如何使用?nrm

  • npm i -g nrm

  • 檢視當前所有npm的映象源

    nrm ls
  • 使用淘寶源

    1
    nrm use taobao
  • 新增我們自定義的私有倉庫的源

    1
    nrm add ******** http://npm.*****.com
  • 使用自定義的源

    1
    nrm use ********
  • 新增錯誤後,可刪除源

    1
    nrm del *****
  • 切換到自定義npm源後,使用npm登入

    1
    2
    3
    4
    5
    6
    nrm use ******
    npm login
    input username:
    input password:
    input public email:
    輸入相關資訊後登入成功,登入成功即可使用npm install some-package-name

釋出package

1
2
3
4
5
npm init
code .......
build .....
npm login
npm publish

最終詳細配置,還是得看官網,雖然官網的描述很不好懂,而且不全,但是比本篇記錄要全,畢竟這個只是小哥哥看完文件,實際操作後的隨筆而已

TODO: 待對接npm的使用者資訊到https://gitlab.*****.com

相關文章