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

时间：2023-05-06 18:12:01 | 来源：网站运营

时间：2023-05-06 18:12:01 来源：网站运营

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

介绍

继上一篇博客看了它！你也能轻松部署vue3组件库发布后，得到了很多小伙伴们的关注。

这篇还不知道npm私服？一篇教会你搭建私服并发布vue3组件库到nexus，有别于上一篇，此篇博客介绍了如何将vue3组件库发布到私服，而不是发布到npm官方仓库。

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

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

节点：npm发布依赖包

准备工作

• 安装建木CI，参考建木快速开始
• 安装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. 挑选节点

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

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. 编排流程

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

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

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

首先编辑项目信息







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







填充节点参数

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

• 定义流程运行先后顺序
• 将上游节点的输出参数输出到下游节点，这里的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：给包管理工具设置镜像，一般设置淘宝镜像https://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




本文为建木博主「wllgogogo」的原创投稿文章，转载请联系授权。

项⽬官⽹

项目托管

项目文档