注册

还不知道npm私服?一篇教会你搭建私服并发布vue3组件库到nexus

介绍

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

现在建木CI有了自动发布构件的官方npm节点,这一切都将变得非常简单。

节点:npm发布依赖包

准备工作

  • 安装建木CI,参考建木快速开始

  • 安装nexus搭建npm私服,创建用户、开启token验证、生成token

1. 安装sonatype nexus

# docker search nexus 搜索nexus 下载量最高的那个sonatype/nexus3
docker 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搭建成功

b1f978e4fcdf45c0b0a1c6f09cec40d0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

接下来,需要登录管理员(第一次登录会提供密码,然后要求改密码),创建Blob Stores的数据池地址,供后面仓库选择

8a0118d786004c169f63a566f7ff8c7b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

创建我们的私有npm库,需要注意的是我们要创建三个仓库(仓库名有辨识即可)

  • group见名知意,是一个仓库组,包含多个具体的仓库(proxy、hosted)

  • hosted本地仓库,就是我们内部发布包的地址

  • proxy代理仓库,会去同步代理仓库的npm包(即下载本地仓库没有的包时,会去代理仓库下载,代理仓库可设置为官方仓库)

4d899daa278d443883aec1a2beee92a9~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

创建proxy仓库,需要设置一些值

60419bb5079041e9b910fdd7dea37ee7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

创建hosted仓库,需要设置一些值

e3ccecbf479f445da11df53296056e37~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

创建group仓库,选择我们之前创建的两个仓库

d3c6365f97124606a4e2db3dac0306b1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

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

327311bed7fd4fcea72b1a0552666d71~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

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

385706ed115744c4b2973af19ddb3531~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

开启nexus的用户token权限验证

5c9e53f9f0034551a2ef73d7fd4e883c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

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

3d571014449746549193967f2bff722b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

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

902d87bba45c412fa7956c242c5ea174~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

2. 挑选节点

建木CI是一个节点编排工具,那么我们需要挑选合适的节点完成一系列的业务操作

git clone节点

使用git clone节点,将我们需要部署的前端npm包项目从远程仓库上拉取下来。git clone节点的版本,我们选择1.2.3版本

如下图:访问建木Hub可以查看节点详细信息,比如,git clone节点的参数,源码,版本说明等信息

f399550e2c9641d185074a281a1b6389~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

nodejs构建节点

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

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

17327ee5af024354aca0cfd0b3548c65~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

发布npm依赖包节点

使用发布npm依赖包节点,会将我们build后的项目发布到公服或私服,从1.1.0-16.15.0版本开始支持私服的发布

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

7c3502f9e4f54893883c22ce327045a2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

3. 编排流程

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

  1. 使用建木CI的DSL来编排节点

  2. 使用建木CI图形化编排功能来编排节点

此次我们使用图形化编排功能编辑此测试流程(ps:图形化编排是建木CI 2.4.0推出的重磅级功能,详见「v2.4」千呼万唤的图形化编排,来了!

首先编辑项目信息

c7c26473e1304e8bb368fbc9e5c8c1a4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

从左边抽屉中将所需的三个节点拖拽出来

c9b9b3636c3b4711a95752b25d06c8ab~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

填充节点参数

填充参数之前,将三个节点连起来,如图:这个箭头可以完成的功能有:

  • 定义流程运行先后顺序

  • 将上游节点的输出参数输出到下游节点,这里的git clone节点输出参数将被输出到后续所有节点

c380c3658a3b469ebb202db1a79e8351~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

点击节点图标开始填充参数

  • git clone节点

    这里我们配置一个需要部署的 npm包 项目的 git 地址,选择1.2.3版本,改名git_clone

    5ef9016948fd451c8631f7b81c1d6cc7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

  • 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

    397fd91cabcc4a2786e8ac88b0cd1b08~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

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

    71ecf040fde24e70acf3dfc6f638f2c8~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

  • 发布npm依赖包 节点

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

    d6900af03a8f45649ce6ee30ae516fe2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

发布 npm包 构件到 nexus

启动流程

如下图启动流程

fb946ab284644cac96c08257c79bb6c5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

流程运行中

16b79e46d14f470d94f1af885e3f439c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

流程运行成功

98f681610f184fd889b08d5c2648a43e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

查看每个节点的运行日志

git clone节点:

766aefa1bd06476bb5c778df26ec0db6~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

nodejs构建节点

24fedbd9eb1045c7a128126493e8159c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

发布npm依赖包节点

0e62ac8fb11b4751bb0ec970fd86ce35~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

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

df19f6e8765844248a77330e6f05ccc9~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp

至此,我们已经使用建木CI成功将npm依赖包部署到了nexus上!


作者:Jianmu
来源:juejin.cn/post/7109026865259479076

0 个评论

要回复文章请先登录注册