登录
当前位置： 首页 > 工具软件 > npm-consider > 使用案例 >

Web团队建设--npm私库搭建

梁俊智
2023-12-01

Web团队建设–npm私库搭建

前言

在日常工作中，我们平时使用的一些优秀的类库基本都来源于 npm， 如果我们仅仅是简单的直接使用他们的功能的话 npm 其实已经完全可以满足我们的需求，但在我们的开发过程中总会出现一些公有的东西出现，类似一些公共的组件、公共方法工具类之类的，这块如果我们希望能够方便使用且降低开发成本的话便只能把它独立为一个 npm 库来使用，然后公司的代码的话一般都是不可以公开的，由此我们搭建公司私有库的需求便过来了。

搭建私库的优势一方面可以存放公司内部公共的代码封装和工具或者对第三方的开源代码做定制化修改和扩展的内容，另一方面的话还可以大大提高依赖库的下载速度和源的稳定性，类似的大家平时使用的淘宝源实际上性质也是个私库。

私库搭建

针对 npm 的私库搭建工具其实是有很多的，有付费的也有免费的，这里我们选用的是 verdaccio ，原因的话大致如下：

  • 免费
  • 他是基于 Node.js 开发的，环境要求较为简单
  • 安装容易和使用简单
  • 兼容 yarn、npm 等工具

硬性要求

一台远程服务器或本地电脑。

安装 Node 环境

安装方式可直接下载安装或通过包管理器进行安装，此处不做赘述详见官方文档。

此处注意 Node.js 版本需 >= v12

安装 Verdaccio

推荐采用全局方式安装

# npm
$ npm install -g verdaccio

# yarn
$ yarn global add verdaccio

安装完成后可先运行 verdaccio 命令查看是否安装成功

$> verdaccio
warn --- config file  - /home/.config/verdaccio/config.yaml
warn --- http address - http://localhost:4873/ - verdaccio/5.10.0

此处打印的 config file 即配置文件地址

浏览器访问http://localhost:4873/ 即可查看管理包列表页面

启动 verdaccio

前台启动使用 verdaccio 命令即可，后台启动建议使用 pm2 或其他进程保护工具。

安装 pm2

$ npm install pm2 -g
# or
$ yarn global add pm2

安装完成后使用 pm2 启动 verdaccio

# 使用 pm2 启动 verdaccio
$ pm2 start verdaccio

# 或通过路径启动
$ pm2 start PATH-TO-GLOBAL-VERDACCIO/verdaccio

# 查看服务状态
$ pm2 status

# 查看 pm2 守护下的进程 verdaccio 的实时日志
$ pm2 show verdaccio

使用本地库

verdaccio 服务启动完成后可通过 nrm 工具进行源地址切换

# 全局安装 nrm
$ npm install -g nrm

安装完成后通过如下命令查看已有配置

$ nrm ls

* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

添加本地库至 nrm 配置列表

# 添加配置项
nrm add localNpm http://localhost:4873

# 切换 npm 源至私库
nrm use localNpm

# 添加环境用户并根据提示输入用户名密码，为后续传包做准备 （重要）
npm adduser --registry http://localhost:4873/

至此简单环境配置完毕

nrm 为个人认为比较好用的 npm 源管理工具，使用起来比较方便，当然也可以采用直接配置源地址的方式进行配置，命令为 npm set registry http://localhost:4873/ 或安装时使用 npm install --registry http://localhost:4873

发布包到私库可使用如下命令

# 直接发布
$ npm publish
# 或指定源
$ npm publish --registry http://localhost:4873

配置 Nginx 代理

nginx 配置参考如下

server {
   listen       80;
   server_name  verdaccio.zengqing.top;
   access_log /var/log/nginx/verdaccio.log;

   return 302 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name verdaccio.zengqing.top;

    ssl_certificate     /etc/nginx/cert.crt;
    ssl_certificate_key /etc/nginx/cert.key;

    ssl on;
    ssl_session_cache  builtin:1000  shared:SSL:10m;
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
    ssl_prefer_server_ciphers on;

    ssl_session_timeout 5m;
    
    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_pass          http://localhost:4873;
        proxy_read_timeout  600;
        proxy_redirect off;
        client_max_body_size 200m;
    }
    
    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_pass http://localhost:4873/$1;
        proxy_redirect off;
    }
}

通过 Nginx 反向代理 https 后必须添加 ~ ^/verdaccio/(.*)$ location 解析，否则可能会影响 web ui 正常使用

之后便可将 nrm 配置项中的地址切换为配置好的域名

Verdaccio 进阶使用

通过以上配置后基本已能够实现私库的发布及正常使用了，但目前私库的权限还是不可控的，即任何注册的用户都可以进行发包删包的操作，很明显这个不是我们想要的状态，所以我们还需要对配置文件进行调整，将权限系统控制起来。

config.yaml 解读

初始配置

storage: ./storage
plugins: ./plugins

# https://verdaccio.org/docs/webui
web:
  title: Verdaccio

# https://verdaccio.org/docs/configuration#authentication
auth:
  htpasswd:
    file: ./htpasswd

# https://verdaccio.org/docs/configuration#uplinks
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

# https://verdaccio.org/docs/protect-your-dependencies/
# https://verdaccio.org/docs/configuration#packages
packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

# https://verdaccio.org/docs/configuration#server
server:
  keepAliveTimeout: 60

# https://verdaccio.org/docs/configuration#offline-publish
# publish:
#   allow_offline: false

# https://verdaccio.org/docs/configuration#url-prefix
# url_prefix: /verdaccio/
# VERDACCIO_PUBLIC_URL='https://somedomain.org';
# url_prefix: '/my_prefix'
# // url -> https://somedomain.org/my_prefix/
# VERDACCIO_PUBLIC_URL='https://somedomain.org';
# url_prefix: '/'
# // url -> https://somedomain.org/
# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';
# url_prefix: '/second_prefix'
# // url -> https://somedomain.org/second_prefix/'

# https://verdaccio.org/docs/configuration#security
# security:
#   api:
#     legacy: true
#     jwt:
#       sign:
#         expiresIn: 29d
#       verify:
#         someProp: [value]
#    web:
#      sign:
#        expiresIn: 1h # 1 hour by default
#      verify:
#         someProp: [value]

# https://verdaccio.org/docs/configuration#user-rate-limit
# userRateLimit:
#   windowMs: 50000
#   max: 1000

# https://verdaccio.org/docs/configuration#max-body-size
# max_body_size: 10mb

# https://verdaccio.org/docs/configuration#listen-port
# listen:
# - localhost:4873            # default value
# - http://localhost:4873     # same thing
# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
# - https://example.org:4873  # if you want to use https
# - "[::1]:4873"                # ipv6
# - unix:/tmp/verdaccio.sock    # unix socket

# The HTTPS configuration is useful if you do not consider use a HTTP Proxy
# https://verdaccio.org/docs/configuration#https
# https:
#   key: ./path/verdaccio-key.pem
#   cert: ./path/verdaccio-cert.pem
#   ca: ./path/verdaccio-csr.pem

# https://verdaccio.org/docs/configuration#proxy
# http_proxy: http://something.local/
# https_proxy: https://something.local/

# https://verdaccio.org/docs/configuration#notifications
# notify:
#   method: POST
#   headers: [{ "Content-Type": "application/json" }]
#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
#   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

middlewares:
  audit:
    enabled: true

# https://verdaccio.org/docs/logger
# log settings
logs: { type: stdout, format: pretty, level: http }
#experiments:
#  # support for npm token command
#  token: false
#  # disable writing body size to logs, read more on ticket 1912
#  bytesin_off: false
#  # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
#  tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
#  # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
#  tarball_url_redirect(packageName, filename) {
#    const signedUrl = // generate a signed url
#    return signedUrl;
#  }

# translate your registry, api i18n not available yet
# i18n:
# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
#   web: en-US

storage

包文件存储目录，上传的包存放的位置

plugins

插件目录位置，适用于基于 Docker/Kubernetes 的部署。

web

Web 界面配置。详见官方文档

auth

认证相关配置项，默认的授权方式是 htpasswd, 可以通过 plugins 进行修改。详见官方文档

uplinks

配置上游仓库配置用来拉取本地不存在的包，可以理解为配置远程注册中心的代理，通常这里可配置 npm 地址或 淘宝镜像地址。详见官方文档

uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages

配置访问包的权限。 详见官方文档。

参数解读：

  • access : 哪类用户可以对匹配的项目进行安装操作( install )
  • publish : 哪类用户可以对匹配的项目进行发布操作( publish )
  • unpublish : 哪类用户可以对匹配的项目进行删除操作( publish )
  • proxy : 代理项，这里的值是对应于 uplinks 的名称，如果本地不存在，允许去对应的 uplinks 配置地址拉取

权限值解读：

  • $all : 所有人(已注册、未注册)都可以执行对应的操作。
  • $authenticated : 通过验证的人(已注册)可以执行对应操作。
  • $anonymous : 表示匿名者可以进行对应操作。

配置权限为 $authenticated 时需注意，如果 auth 未配置 max_users: -1 时任何人均可注册账号
若想要将权限指定到指定的人的账户此处可直接填对应账户名，多个使用 空格 分隔，如：publish: admin xiaochen

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

  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

server

配置服务配置项（Express.js）。

server:
  keepAliveTimeout: 60

publish

配置是否支持离线发布，默认不支持。

url_prefix

配置服务反向代理的路径

security

配置用户鉴权方式，默认使用 JWT 方式。

此配置需 api 与 web 分别配置，如下

security:
  api:
    legacy: true
    jwt:
      sign:
        expiresIn: 29d
      verify:
        someProp: [value]
   web:
     sign:
       expiresIn: 1h # 1 hour by default
     verify:
        someProp: [value]

userRateLimit

配置用户端点的默认速率配置

# userRateLimit:
#   windowMs: 50000
#   max: 1000

max_body_size

配置上传包的大小限制，默认为 10mb，可根据自己需求调大。

max_body_size: 100mb

listen

服务运行的端口，默认为 localhost:4873，可根据自己需求调整，格式如下。

# listen:
# - localhost:4873            # default value
# - http://localhost:4873     # same thing
# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
# - https://example.org:4873  # if you want to use https
# - "[::1]:4873"              # ipv6
# - unix:/tmp/verdaccio.sock  # unix socket

https

配置 Https 证书，详见官方文档

# https:
#   key: ./path/verdaccio-key.pem
#   cert: ./path/verdaccio-cert.pem
#   ca: ./path/verdaccio-csr.pem

http_proxy, https_proxy

配置代理地址

# http_proxy: http://something.local/
# https_proxy: https://something.local/

notify

配置通知。详见官方文档

# notify:
#   method: POST
#   headers: [{ "Content-Type": "application/json" }]
#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
#   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

middlewares

配置中间件。

middlewares:
  audit:
    enabled: true

logs

配置 Logger。详见官方文档

logs: { type: stdout, format: pretty, level: http }

experiments

#experiments:
#  # support for npm token command
#  token: false
#  # disable writing body size to logs, read more on ticket 1912
#  bytesin_off: false
#  # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
#  tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
#  # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
#  tarball_url_redirect(packageName, filename) {
#    const signedUrl = // generate a signed url
#    return signedUrl;
#  }

i18n

# i18n:
# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
#   web: en-US

配置修改

配置文件地址

  • Windows : C:\用户\当前用户\AppData\Roaming\verdaccio\config.yaml
  • Linux : /home/.config/verdaccio/config.yaml

配置文件地址可通过运行 verdaccio 命令查看

# config.yaml
storage: ./storage
plugins: ./plugins

web:
  title: Verdaccio

auth:
  htpasswd:
    file: ./htpasswd
    # 禁止用户自行注册，通过 https://hostingcanada.org/htpasswd-generator/ 手动创建用户并写入 htpasswd 文件
    max_users: -1

uplinks:
  # 上游配置 npm
  npmjs:
    url: https://registry.npmjs.org/

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

server:
  keepAliveTimeout: 60

publish:
  allow_offline: true

# 调整上传包上限大小为 100M
max_body_size: 100mb

# 修改服务启动端口 此处可不修改（若在本地电脑安装时建议修改）
# listen: 0.0.0.0:4873

middlewares:
  audit:
    enabled: true

logs: { type: stdout, format: pretty, level: http }

i18n:
  # 修改默认中文展示
  web: zh-CN

修改配置文件后重启 verdaccio 服务

$ pm2 restart verdaccio

此处配置了用户不可自行创建账号，需管理员通过 htpasswd-generator 工具手动创建账号并写入 htpasswd 文件

更多文章可查看 我的博客

 类似资料：

相关阅读

详解docker私有仓库搭建与使用实战详解CentOS 7 : Docker私有仓库搭建和使用用GitLab搭建自己的私有GitHub库的步骤Docker Registry搭建私有镜像仓库的实现方法搭建一个私有的Docker registry教程

相关文章

1.2 开发环境搭建Kotlin IntelliJ IDEA 环境搭建Spring开发环境搭建Hadoop运行环境搭建阿里云数据库团队后端实习一面面经

相关问答

飞行路线切换到团队版，不使用任何团队功能需要开发团队。在项目编辑器中选择开发团队从私钥和证书重新创建密钥库文件使用递归挑选团队如何在主webpack项目中使用npm库中的web-worker

相关文档

Django 搭建简易博客教程一步步搭建物联网系统使用 Express + MongoDB 搭建多人博客使用 Express 和 MongoDB 搭建多人博客Sass for Web Designers
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.