搭建npm私服，我为什么推荐Verdaccio？

Maokai
3,730 阅读9分钟

我正在参加「掘金·启航计划」

1. npm私服是什么

在自己的服务器上部署一个支持发布、下载、版本管理等服务的npm仓库就是npm私服，也叫私有化部署npm

540px-Npm-logo.svg.png

众所周知的原因，国内下载npm包特别慢甚至下载失败，所以安装完node.js还要设置镜像源，镜像源就属于私服的一种

镜像源：是以一定频率定时同步npm官方仓库，以此代替官方仓库，提高包下载速度

npm config set registry https://npmmirror.com

有了镜像源为什么还需要npm私服？

可达鸭sikao.png

镜像源解决了国内下载速度的问题，但是不能发包

如果公司有自己的组件库，又不希望在网上公开，如何管理代码？

在每个项目里复制一遍，但是当组件修改了代码，就需要重新复制一遍， 带来的维护成本太高

这时就需要npm私服

2. npm私服有什么用

2.1 发布私有包

私服最重要的功能就是发布私有包，既能保证代码不公开又能享受npm安装的快捷

举个栗子🌰

在开发中通常会把一些方法封装成 utils.js，在项目初始化时复制一份

有了私服后就可以发一个 myUtils 包，然后通过 npm install myUtils 来安装

通过修改版本号就能快速更新包

ps：把项目模板发一个包，妈妈再也不用担心项目初始化了😁

跳动.gif

2.2 链接npm仓库

在一个项目中使用多个仓库下载包时，可以配置 .npmrc 指定下载地址

举个栗子🌰

vue 包从淘宝镜像源下载

myUtils 包从私服下载

.npmrc 需要配置两个包的下载地址，还要在 package.json 中将私有包 myUtils 加上组织名 @sf/myUtils

# 淘宝镜像源
registry=https://npmmirror.com
# 私有源
@sf:registry=http://...

甚至...

隔壁项目组也有自己的仓库，你又要用到他们的包，只好再次修改 .npmrc

image-20220809212700003.png

更好的办法

使用私服的仓库链接功能（上行链路），就可以把多个仓库聚合成一个下载入口

上面的例子 .npmrc 只需要配置一个私服的地址 registry=http://...

省事省力

聚合.png

2.3 提高下载速度

通过私服下载的包会缓存到服务器中

下载同一个包（同组织/名/版本）时优先从缓存中读取，找不到再从镜像或官方仓库下载

缓存策略可配置存储空间大小，保存周期等

3. 私服方案

3.1 开源免费

方案支持仓库star数github开发语言更新频率
Nexus 开源版maven，npm，docker，pypi...1.2knexus-publicJava高
Sinopianpm5.5ksinopiaJavaScript停止更新
Verdaccionpm13.7kverdaccioJavaScript高
cnpm.orgnpm3.6kcnpmjs.orgJavaScript停止更新
cnpmcorenpm< 500cnpmcoreTypeScript高

看起来是5个项目，其实是3个

Sinopia 停止更新后，社区大佬fork了一份并更名为 Verdaccio

cnpm.org 停止更新后，团队使用 TypeScript 重构并新建了 cnpmcore 仓库，目前 star数并不高

数据截至到2022年08月10日

所以可选的开源方案并不多，目前最受社区欢迎的就 Verdaccio，Nexus 两个

俩logo.png

3.2 收费方案

JFrog Artifactory 号称是 "最好的通用存储库管理器"，支持 docker、npm、maven、pypi等50多种仓库

官网

4. 为什么推荐Verdaccio

verdaccio 6 已经在开发中，注意关注动态

很多团队使用 Nexus ，原因是 Nexus 同时支持 Maven、npm 仓库

同时支持前后端的仓库，为了省事就不再单独部署 npm 仓库

从npm命令的角度二者差异不大，支持npm的多数命令，那为什么推荐 Verdaccio 呢？

4.1 npm命令

截止到 5.15.3 版 Verdaccio 支持以下npm命令

功能命令是否支持
安装包npm install、npm upgrade✅
发布包npm publish✅
取消发布npm unpublish✅
标记npm tag✅
弃用npm deprecate✅
注册用户npm adduser {newuser}✅
令牌npm token✅
转让包❌
搜索npm search✅
pingnpm ping✅
加星npm star、npm unstar、npm stars✅
审计npm audit✅

4.2 理由1

三个系统.png

二者最大的差异在于 Web 界面上

Verdaccio 显示了包名、描述、作者、版本、标签、更新时间、协议等信息，更接近npm官方界面

Nexus 上的信息则少的多

这是因为 Nexus 是一款综合仓库管理系统，不仅支持 npm，还有 maven，pypi 等仓库，对包的信息处理就没有 Verdaccio 直观

为什么Web界面很重要？

讲一下亲身经历，刚来公司时不知道发了哪些包，包的用途

只能从 Nexus 上扒拉，再去git查看 README，代码

给后继者带来极大不便😣

image-20220811154856782.png

所以易用的 npm 仓库能方便快速了解团队项目，提高开发效率。尤其开发人员变动时，感触尤为深刻

看个动图感受一下 Verdaccio 的界面

Verdaccio详情.gif

Verdaccio

  • 提供各类包管理器 npm yarn pnpm 的安装命令，一键复制

  • 直接将 README.md 渲染到页面上，不用再去git上翻 README

    ps：变相督促大家好好写 README 🤣

  • 查看依赖包，点击跳转到对应包的详情页

  • 历史版本

  • 上行链路，这就是前面说的 链接npm 仓库 （图中没有配置 UPLINKS）

  • 右上角包括仓库信息、登录，还有夜间模式等

Nexus详情.gif

Nexus

Nexus 需要先选版本再查看详情

npm包信息内容与 Verdaccio 不同，展现形式也完全不一样

Nexus 像一个 “字典”，把所有重要信息罗列给你，Verdaccio 像一个 “工具” ，用起来更顺手

4.3 理由2

除了有好看的皮囊，在其他方面 Verdaccio 也是一点不差

image-20220812205249597.png

安装简单

支持 npm 、Docker 镜像、Helm Chart、Cloudron 多种安装方式，一行命令即可安装

身份验证

内置账号注册，登录功能（默认使用htpasswd），可通过插件扩展LDAP等验证方式

权限控制

根据需要允许和限制对某个包的访问、下载

上行链路

支持多个关联多个npm仓库

Webhooks

通过npm publish 发布包时，可发送通知

日志

详细的日志记录

插件支持

官方支持认证、中间件、存储、主题，4种类型插件，可根据需求自己开发插件，官网提供了详细的开发文档

5. 从零开始搭建

从隔壁小黑那借来一台 CentOS 7，开淦

官方提供了 docker 镜像，为了省事直接使用 docker 安装

5.1 安装docker

使用 yum-utils 管理 yum 仓库

# 安装yum-utils
yum install -y yum-utils

添加 docker 的 yum 源

# 添加docker-ce源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# 更新yum缓存
yum --enablerepo=updates clean metadata

安装 docker docker-compose 并运行

# 安装
yum -y install docker-ce docker-ce-cli docker-compose
# 启动
systemctl enable docker && systemctl start docker

如果提示 找不到docker-compose

试试：先执行 yum -y install epel-release 在执行安装命令

Snipaste_2022-10-09_19-42-47.png

5.2 配置docker镜像源

已经配置过的直接下一步

# docker配置文件夹
mkdir /etc/docker
# 编辑配置文件
vi /etc/docker/daemon.json

修改 registry-mirrors 和 dns 配置

{
  "registry-mirrors": [
    "https://docker.mirrors.ustc.edu.cn",
    "https://hub-mirror.c.163.com",
    "https://reg-mirror.qiniu.com"
  ],
  "dns": ["114.114.114.114","8.8.8.8"]
}

重启docker

# 重启配置
systemctl daemon-reload

# 重启docker
systemctl restart docker

Snipaste_2022-10-09_19-44-20.png

5.3 Verdaccio 容器配置

本文以安装到 /verdaccio 目录为例

安装共需要3个文件

  • docker-compose.yaml docker容器配置
  • config.yaml verdaccio配置文件
  • htpasswd 用户密码文件
# 目录结构
 
└── /verdaccio 项目目录
   ├──/conf 配置目录
   │  └── config.yaml verdaccio 配置文件
   │  └── htpasswd 用户密码文件
   │
   ├──/storage 包存放目录
   │
   ├──/plugins 插件目录
   │
   └── docker-compose.yaml docker-compose 配置文件

Snipaste_2022-10-09_19-45-52.png

  1. 首先创建 docker-compose.yaml 文件

docker-compose 是定义和运行docker容器的工具，通过 .yaml 文件配置容器

# 创建目录
mkdir /verdaccio

# 创建yaml文件
touch /verdaccio/docker-compose.yaml
  1. 修改容器配置
# 用vi编辑器打开文件
vi /verdaccio/docker-compose.yaml

输入以下内容

version: '3.1'

services:
  verdaccio:
    image: verdaccio/verdaccio
    container_name: "verdaccio"
    networks:
      - node-network
    environment:
      - VERDACCIO_PORT=4873
    ports:
      - "4873:4873"
    volumes:
      - "./storage:/verdaccio/storage"
      - "./conf:/verdaccio/conf"
      - "./plugins:/verdaccio/plugins"
networks:
  node-network:
    driver: bridge
  • version：docker对应版本号 (构建时出错请改小一点版本号)
  • image：verdccio镜像
  • 三个 4873 是verdaccio访问端口号
  • volumes：是挂载物理机的目录到 docker 中
    • 第一行：存储目录，用于保存npm包
    • 第二行：配置文件目录，下一节 Verdaccio 配置 会讲解
    • 第三行：插件目录

本地创建好 docker-compose.yaml 传到 CentOS 也是极好的

Snipaste_2022-09-27_20-34-43.png

5.4 Verdaccio 配置

官网配置文档👉 verdaccio.org/zh-cn/docs/…

  1. 创建配置文件 config.yaml

Verdaccio 的配置文件，上行链路、插件、密码文件位置等等参数都通过 config.yaml 配置

# 创建目录
mkdir /verdaccio/conf

# 创建文件
touch /verdaccio/conf/config.yaml
  1. 修改配置
# 用vi编辑器打开文件
vi /verdaccio/conf/config.yaml

输入以下内容

# npm包缓存目录
storage: /verdaccio/storage
# 插件目录
plugins: /verdaccio/plugins
# 密码文件
auth:
  htpasswd:
    file: /verdaccio/conf/htpasswd
# 上行链路
uplinks:
  npmjs:
    url: https://registry.npmjs.org
    timeout: 10s
    cache: false
  yarn:
    url: https://registry.yarnpkg.com
    timeout: 10s
    cache: false
  npmmirror:
    url: https://registry.npmmirror.com
packages:
  # 带@的包只能登录后发布
  "@*/*":
    # 访问包的权限
    access: $all
    # 发布包的权限
    publish: $authenticated
    # 代理链
    proxy: npmjs npmmirror yarn
  # 普通包所有人都能发布
  "**":
    access: $all
    publish: $all
    proxy: npmjs npmmirror yarn
middlewares:
  # 启用 npm audit
  audit:
    enabled: true
logs:
  - { type: stdout, format: pretty, level: http }
#监听端口
listen: 0.0.0.0:4873

在 packages 中共有三种用户角色

角色描述
$all所有用户
$anonymous匿名用户
$authenticated登录的用户

在packages中可以定义某个包的发布下载规则

网站的标题、Logo等设置参考 github web字段

官方默认配置文件👉 github.com/verdaccio/v…

5.5 创建容器并启动

执行以下命令

# 进入verdaccio目录
cd /verdaccio
# 构建
docker-compose up --build

Snipaste_2022-10-09_19-47-39.png

看到这样的提示后就可以打开浏览器访问verdaccio了

此时docker运行在前台，Ctrl + C 结束命令就无法访问

Snipaste_2022-10-09_19-49-20.png

5.6 启动和停止

编译通过一次后，下次直接用 docker run 命令启动，不需要再编译 -d 是在后台运行的意思

启动

docker run -d verdaccio/verdaccio

Snipaste_2022-10-09_19-56-23.png

停止

# 查看运行中的容器
docker ps -a

# 找到pid （CONTAINER ID）
docker stop *****

image-20221009195902497.png

💥 如果出现启动以后无法访问，需要升级内核之后重启

yum update

6. 使用Verdaccio

详细命令参考 4.1 npm命令

把私服地址 配置到项目的 .npmrc 即可

registry=http://你的地址:4873/

注册用户

npm adduser --registry http://你的地址:4873/

发布包

npm publish --registry http://你的地址:4873/

verdaccio 设置

# 已经做过docker的映射，只需修改 /verdaccio/conf/config.yaml

最重要的可以通过网页浏览 npm 包

密码管理

verdaccio使用 htpasswd 格式管理密码，可以用工具生成，粘贴到 /verdaccio/conf/htpasswd 文件中

tool.oschina.net/htpasswd

在写作过程中参考过以下内容

segmentfault.com/a/119000002… blog.csdn.net/liuhangbiao…

avatar
文章
阅读
粉丝
相关推荐
verdaccio搭建私有npm仓库
1.6k阅读
 · 
12点赞
npm私服搭建与包发布
14k阅读
 · 
37点赞
从零搭建、开发和发布一个 npm 包（react + webpack + typescript + less）
3.1k阅读
 · 
6点赞
如何设计npm包的开发和发布流程
5.8k阅读
 · 
22点赞
npm包 搭建，打包，调试，发布
6.3k阅读
 · 
30点赞
简易npm包的开发流程
1.2k阅读
 · 
5点赞
13 个 npm 快速开发技巧
14k阅读
 · 
250点赞
搭建私有 npm 仓库（Verdaccio + docker）
2.0k阅读
 · 
11点赞
如何搭建npm私仓
2.6k阅读
 · 
32点赞

友情链接：