介绍

继上一篇博客看了它!你也能轻松部署vue3组件库公布后,失去了很多小伙伴们的关注。

这篇还不晓得npm私服?一篇教会你搭建私服并公布vue3组件库到nexus,有别于上一篇,此篇博客介绍了如何将vue3组件库公布到私服,而不是公布到npm官网仓库。

日常工作时,出于保密性、开发便捷性等需要,或者是还在内部测试阶段,咱们可能须要将vue3组件库部署到公司的nexus中。咱们可能心愿部署vue3组件库的操作是CI/CD中的一环。

当初建木CI有了主动公布构件的官网npm节点,这所有都将变得非常简单。

节点:npm公布依赖包

筹备工作

  • 装置建木,参考建木如何部署
  • 装置nexus搭建npm私服,创立用户、开启token验证、生成token

1. 装置sonatype nexus

# docker search nexus 搜寻nexus 下载量最高的那个sonatype/nexus3docker search nexus# 从docker hub中将sonatype nexus拉取下来docker pull sonatype/nexus3# 启动sonatype nexus并使其监听8081端口docker run -d -p 8081:8081 --name nexus sonatype/nexus3

拜访搭建的nexus,能够看到如下界面,那么nexus搭建胜利

接下来,须要登录管理员(第一次登录会提供明码,而后要求改明码),创立Blob Stores的数据池地址,供前面仓库抉择

创立咱们的公有npm库,须要留神的是咱们要创立三个仓库(仓库名有辨识即可)

  • group见名知意,是一个仓库组,蕴含多个具体的仓库(proxy、hosted)
  • hosted本地仓库,就是咱们外部公布包的地址
  • proxy代理仓库,会去同步代理仓库的npm包(即下载本地仓库没有的包时,会去代理仓库下载,代理仓库可设置为官网仓库)

创立proxy仓库,须要设置一些值

创立hosted仓库,须要设置一些值

创立group仓库,抉择咱们之前创立的两个仓库

功败垂成!查看这个hosted类型的地址,建木CI流程编排须要这个地址作为参数

还须要私服的token,须要先创立一个账户,用于本地生成token

开启nexus的用户token权限验证

须要本地设置hosted类型仓库地址,npm config set registry http://xxx:8081/xxx/npm_hosted 而后npm login获取token

增加token到建木的密钥,先创立命名空间npm,在该空间下创立账户的密钥wllgogogo_token

2. 筛选节点

建木是一个节点编排工具,那么咱们须要筛选适合的节点实现一系列的业务操作

  • git clone节点

应用git clone节点,将咱们须要部署的前端npm包我的项目从近程仓库上拉取下来。git clone节点的版本,咱们抉择1.2.3版本

如下图:拜访建木Hub能够查看节点详细信息,比方,git clone节点的参数,源码,版本阐明等信息

  • nodejs构建节点

应用nodejs构建节点,会将咱们clone下来的我的项目进行build构建,本文咱们将用到1.4.0-16.13.0版本

如下图查看此节点的详细信息:

  • 公布npm依赖包节点

应用公布npm依赖包节点,会将咱们build后的我的项目公布到公服或私服,从1.1.0-16.15.0版本开始反对私服的公布

如下图查看此节点的详细信息:

3. 编排流程

节点选好了,得把它们编排在一起,目前建木提供了两种形式来编排节点:

应用建木的DSL来编排节点
应用建木图形化编排性能来编排节点

首先编辑我的项目信息

从右边抽屉中将所需的三个节点拖拽进去

填充节点参数填充参数之前,将三个节点连起来,如图:这个箭头能够实现的性能有:

  • 定义流程运行先后顺序将上游节点的输入参数输入到上游节点,这里的git clone节点输入参数将被输入到后续所有节点

点击节点图标开始填充参数git clone节点这里咱们配置一个须要部署的 npm包 我的项目的 git 地址,抉择1.2.3版本,改名git_clone

  • nodejs构建节点

同样配置此节点的必须参数

1.节点版本:nodejs构建节点的版本抉择 1.4.0-16.13.0
2.工作目录:须要build的我的项目门路
3.registry url:给包管理工具设置镜像,个别设置淘宝镜像registry.npmmirror.com/
4.包管理器类型:依据具体我的项目状况来抉择包管理器,这个我的项目构建用的是pnpm
5.我的项目package.json文件目录相对路径:package.json目录绝对地址,读取name和version

nodejs构建节点的工作目录参数援用了git_clone节点的输入参数(git_clone作为上游节点将它的输入参数作为nodejs构建的输出参数传递给nodejs构建节点),下图演示了上游节点如何抉择上游节点的输入参数作为本人的输出参数

公布npm依赖包节点

1.节点版本:抉择 1.1.0-16.15.0
2.工作目录:公布包目录
3.镜像仓库:后面筹备工作nexus创立的npm本地仓库地址
4.token令牌:后面筹备工作nexus创立的用户,在本地设置hosted地址后,执行npm login生成的token

公布 npm包 构件到 nexus

启动流程

如下图启动流程

流程运行中

流程运行胜利

查看每个节点的运行日志git clone节点:

nodejs构建节点

公布npm依赖包节点

在nexus中查看部署的npm依赖包

至此,咱们曾经应用建木CI胜利将npm依赖包部署到了nexus上!阐明想必大家对图形化编排十分感兴趣,其实图形化编排流程底层也是生成了一个流程DSL,如果想参考本次测试流程具体生成的DSL,能够移步此处npm公布nexus

官⽹:https://jianmu.dev
代码:https://gitee.com/jianmu-dev
文档:https://docs.jianmu.dev
示例:https://ci.jianmu.dev