实践[前端] 基于verdaccio构建公司私有npm仓库

反者道之动_弱者道之用
294 阅读3分钟

搭建私有npm仓库主要解决2个问题，分别是

  • 解决下载npm包慢的问题
  • 对于不方便发布到公网的私有包的管理。

针对上述问题的解决方式有很多种，比如使用cnpm或yarn提升下载速度，亦或是通过npm set registry设置一个网络代理，但是针对私有包就不是那么好管理了，而且有一部分场合是不适合直接使用npm进行网络包的下载的，针对上述情况，我们构建一个私有npm仓库是一个很好的选择。

目前市面上有很多私有npm仓库框架，如 Nexus verdaccio cnpm，我们本次使用verdaccio来构建我们的仓库，主要原因是该框架构建速度快简单高效，相对于cnpm这样的重量级场景下使用的显然是牛刀杀鸡，而且cnpm已经不维护了，新的衍生项目为@nilppm/npm(等有时间再研究吧)。

我们本次使用docker来构建软件仓库，主要原因是隔离环境配置以及node版本兼容性问题。

version: '1.0.0'
services:
  verdaccio:
    container_name: verdaccio_single
    image: verdaccio/verdaccio
    ports:
      - "4873:4873"
    volumes:
      - ./storage:/verdaccio/storage
      - ./conf:/verdaccio/conf
      - ./plugins:/verdaccio/plugins

我们需要在conf文件下新建config.yaml文件，并设置好配置项

# 包存储地址
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: https://registry.npmjs.org/        # 上行地址
   timeout: 30s                            # 超时时间

                         
 taobao:                                   # 上行名称
   url: https://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  }

此时访问网址 http://localhost:4873/就可以看到如下页面

image.png

我们需要按照提示依次创建npm用户即可

image.png

我们设置npm的代理，实现npm下载依赖包时优先从 我们的框架中查找软件包，如果本地仓库中没有，则从网络获取

npm set registry http://localhost:4873

我们下载的软件依赖缓存在/verdaccio/storage/data/文件夹中。

/verdaccio/storage/data $ ls
@ampproject                                 del                                         internal-ip                                 power-assert-renderer-succinct
@ava                                        delayed-stream                              interpret                                   prepend-http
@babel                                      detect-indent                               into-stream                                 prettier
@bcoe                                       detect-newline                              ip                                          pretty-format
...
/verdaccio/storage/data $

执行简图如下，前提是npm需要设置 npm proxy属性 image.png

这个东西没多少技术含量，本质上就是对npm仓库的代理缓存，类似于yarn,不过一个是基于网络的，一个是基于本地的，缓存的方式也差不多，不过我们可以针对访问的用户实现深层次的权限控制。

如果是内网开发，这个本地化仓库是非常适用的，可以实现完全的npm仓库隔离，同时如果配个本地gitlab,完全可以实现一套cli工具，进行公司项目的管理

avatar
文章
阅读
粉丝