使用Verdaccio搭建npm私服并推送npm包

前言

作为一个前端开发，做久了业务会发现能复用的方法或者组件非常多，我们通常会将其封装并开发一套自己的模板，这样可以直接套用模板进行开发，但是又会存在一个问题，不同的项目用到的通用方法或者组件是不同的，冗余的方法与组件会增大我们打包体积。
我们又想到可以将我们封装好的方法或者组件传到npm仓库中，这样就可以像搭积木一样，下载自己所需的方块就好了，但是出于对代码的保护，我们并不能直接公开的传到npm仓库中，这时候就需要搭建一套npm私服来对我们的轮子进行管理，而使用Verdaccio搭建npm私服是目前主流的方法，本文将介绍如何使用Verdaccio搭建npm私服，并且开发一个简单的npm包进行使用。

先来看一下搭建好的效果：

什么是Verdaccio？
Verdaccio 是意大利语绿色的意思。Verdaccio前身是Sinopia ，Sinopia停止更新后，以此为基础推出了 Verdaccio， Verdaccio是一个轻量级的 npm 缓存中新，按需缓存所有依赖项,并加速本地或私有网络中的安装，是搭建 npm 私服较为流行的方案之一。Verdaccio官网 如何搭建？

1.准备工作

• 需要准备CentOS系统，阿里云服务器即可练手
• 使用Xshell进行服务器连接

准备一台阿里云服务器，练手用的话无所谓参数性能，轻量级服务器即可：

安装Xshell新建连接，按照步骤输入主机等信息登录即可。 首先需要使用Xshell连接我们的阿里云服务器，登录成功后看到我们的系统界面就可以进行下一步操作了。

2.安装docker

2.1 安装yum-utils

首先我们安装yum-utils，yum-utils是yum的工具包集合，由不同的作者开发，使yum使用起来更加方便，包括接下来使用的yum-config-manager等功能。

yum install -y yum-utils

2.2 搭建docker镜像yum源

这里我们设置docker的阿里云centos源，可以解决docker安装时所需依赖等问题。

# 添加docker源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 

# 更新yum缓存
yum --enablerepo=updates clean metadata

2.3 docker设置国内镜像源

# 创建docker配置文件 
mkdir /etc/docker 

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

修改 registry-mirrors 和 dns 配置

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

dns配置详解：

114.114.114.114是国内通用的免费DNS服务器的IP地址
8.8.8.8Google公司提供的免费DNS服务器的IP地址

registry-mirrors国内加速地址：

1.Docker中国区官方镜像
registry.docker-cn.com

2.网易
hub-mirror.c.163.com

3.ustc 
docker.mirrors.ustc.edu.cn

4.中国科技大学
docker.mirrors.ustc.edu.cn

5.七牛云 
reg-mirror.qiniu.com

2.4 重启docker

# 重启配置 
systemctl daemon-reload 

# 重启docker 
systemctl restart docker

2.5 查看是否成功

docker info

完成以上操作后我们就可以进行 Verdaccio 容器配置。

3.Verdaccio部署

我们来看一下Verdaccio整体文件目录，分为conf配置目录，storage 包存放目录，plugins 插件目录以及docker-compose的配置文件docker-compose.yaml

└── /verdaccio 项目目录
   ├──/conf 配置目录
   │  └── config.yaml verdaccio的配置文件
   │  └── htpasswd 预设用户密码文件
   │
   ├──/storage 包存放目录
   │
   ├──/plugins 插件目录
   │
   └── docker-compose.yaml docker-compose 配置文件

3.1 创建 docker-compose.yaml 文件

docker-compose是用于定义和运行多容器Docker应用程序的工具。通过docker-compose，可以使用YAML文件来配置应用程序的服务。

# 创建目录 
mkdir /verdaccio 

# 创建yaml文件 
touch /verdaccio/docker-compose.yaml

# 修改yaml文件
vi /verdaccio/docker-compose.yaml

修改docker-compose.yaml文件内容：

version: '3.1' 

services:
  verdaccio:
    image: verdaccio/verdaccio 
    container_name: "verdaccio"
    ports:
      - "4873:4873"
    volumes:
      - "./storage:/verdaccio/storage"
      - "./conf:/verdaccio/conf"
      - "./plugins:/verdaccio/plugins"
networks:
  node-network:
    driver: bridge

• version docker版本号
• image verdaccio镜像
• volumes 将物理机的目录挂载到docker中

3.2 配置Verdaccio

3.2.1 创建配置文件 config.yaml

此文件是 Verdaccio 的重要配置文件, 可以设置包目录、插件目录、上行链路、预设用户密码、上传权限检查等, 同时可以启用插件并扩展功能。Verdaccio详细配置

# 创建目录
mkdir /verdaccio/conf

# 创建文件
touch /verdaccio/conf/config.yaml

# 修改config.yaml文件
vi /verdaccio/conf/config.yaml

修改config.yaml文件内容：

    storage: /verdaccio/storage
    plugins: /verdaccio/plugins
    auth:
      htpasswd:
        file: /verdaccio/conf/htpasswd
    i18n:
      web: zh-CN
    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:
      audit:
        enabled: true
    logs:
      - { type: stdout, format: pretty, level: http }    
    listen: 0.0.0.0:4873

文件配置详解：

# npm包存储地址
storage: /verdaccio/storage

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

#开启web 服务,能够通过web 访问
web:
  # WebUI is enabled as default, if you want disable it, just uncomment this line
  enable: true
  title: npm-store #网站首页进入的正文标题
  # logo: #这里可以给定一个远程连接的图片,注释掉就采用默认的
  # comment out to disable gravatar support
  gravatar: true
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc # 包的排序
  # darkMode: true # 黑暗模式
  
# 密码文件
auth:
  htpasswd:
    file: /verdaccio/conf/htpasswd
    #此配置项可以关闭注册功能
    max_users: -1
# 语言配置 
i18n:
    # list of the available translations https://github.com/verdaccio/ui/tree/master/i18n/translations
  web: zh-CN # 默认是en-US,我们改为默认中文
  
# 上行链路配置
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:
    # 三种身份,所有人,匿名用户,认证(登陆)用户
    # "$all", "$anonymous", "$authenticated"
  # 带@的包只能登录后发布
  "@*/*":
    # 访问包的权限
    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

3.2.2 创建用户密码预设文件 htpasswd

当我们希望禁止用户注册而是采取预设用户时，需要修改此文件，放置用户名及密码，如用户名demo、密码：123456，密码需要MD5加密。htpasswd在线加密网址

    # 创建文件
    touch /verdaccio/conf/htpasswd

    # 修改config.yaml文件
    vi /verdaccio/conf/htpasswd

将加密后的字符串放入文件中即可。

4.Verdaccio启动

# 进入verdaccio目录
cd /verdaccio

# 后台构建
docker-compose up --build

执行命令后，启动成功，此时就可以访问我们的仓库地址。

此时使用ctrl+c可以退出运行，如果希望在后台运行，需要执行如下命令:

docker run -d verdaccio/verdaccio

停止运行

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

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

或者是使用docker-compose更方便

# 后台构建
 docker-compose up -d
 
 
# 停止并删除构建
 docker-compose down

5.客户端使用

在文件夹下新建.npmrc 文件，把私服地址 配置到项目的 .npmrc。

5.1 注册用户

npm adduser --registry 仓库地址

5.2 发布包

5.2.1 新建一个快速发布的包

新建一个文件夹testUtils,新建一个index.js,导出一个方法：

export const testMethod=(a)=>{
    return a+10
}

新建一个package.json文件： 包括包的名字、版本、作者、文件导入导出规范等信息。

{
  "name": "test-npm",
  "version": "1.0.0",
  "author": "authorname",
  "type": "module",
  "dependencies": {
    
  }
}

5.2.2 登录用户并推送包

依次输入用户名密码邮箱即可。

npm login  --registry 仓库地址

登录成功后执行推送命令，成功后回到我们的仓库页面可以看到推送的包的信息。

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

5.2.3 安装使用包

可以看到我们可以成功下载包并引入使用。

npm i test-npm

5.3 问题解决

在注册登录或者推送时出现Permission denied：权限被拒绝，没有访问文件的权限。 sudo chmod -R 777 指定文件或目录

总结

本文详细讲解了如何使用阿里云服务器安装docker，配置Verdaccio，同时使用docker部署Verdaccio，从而搭建起我们的npm私服，并且演示了简单的npm包的构建与推送，通过本文可以快速搭建一套自己公司的npm私服，希望对大家有用。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情