还不知道 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」的原创投稿文章，转载请联系授权。

项⽬官⽹

项⽬托管

在线示例