保姆级教学内网部署的gitlab，如何通过CI/CD自动构建打包部署私有npm包（上）

Hello大家好，我是不浪，坚持从工作和生活中不断学习，提炼，沉淀，最终建立自己的强势领域！这是2024年输出的第2/100篇文章，欢迎志同道合的朋友一起学习交流；

公众号：攻城师不浪
微信：brown_7778

由于这部分内容相对比较多，我将为大家进行拆分讲解，此篇为上，先来了解一下gitlab中的各种概念以及npm的一些参数配置解释，都配置好后会用命令行进行发布（如果这些内容都了解，请自行跳过本章，直接看下一篇），话不多说，直接上手。

项目创建

创建组

在内网gitlab上创建一个组，相当于gitlab的scope（作用域），gitlab要求在它这里发布的npm包必须具有scope，比如你的组名叫hnc，那么你将来要发布的包的name需要命名为：@hnc/xxx

创建项目

创建好组之后，在组里新建项目

  • uefe-api：该项目将用于uefe-api包库代码的代码存储库，这个是真正要发布的包的代码库，最终会将这个包发布到群组hnc的Package&Registries中；

记住：每个独立的项目都算一个npm包

生成令牌（Deploy tokens）

项目创建完成之后，需要生成项目私有的认证令牌，我们把uefe-api这个库作为我们要发布的npm包，先生成它的Deploy tokens（记住：不是Access tokens，我在这个坑爬了两天才出来??）；

token作用：最后发布npm包的时候需要用来认证

  • read_package_registry： 允许对包注册表进行只读访问；(要勾选，不勾选就无法上传更新代码)
  • write_package_registry： 允许对包注册表进行读写访问；(要勾选，不勾选就无法上传更新代码)

重点：点击生成token之后，一定要将生成的页面复制出来，不然页面再次刷新，你就看不到了！

身份验证

两种方式：

  • 命令行认证
  • 包注册表认证：也就是.npmrc配置

我们先用命令行进行认证：

npm config set -- '//gitlab.com/api/v4/projects/133/packages/npm/:_authToken' "发布令牌"

字段解释：

  • gitlab.com: 公司gitlab内网部署的域名；
  • 133: 项目id（Project ID），也就是我们要发布的项目uefe-api的项目id，在项目主页名称下方可查看；
  • 发布令牌：也就是我们上边刚申请的Deploy tokens；

除了上边这三个字段需要修改，其他保持一致。

认证成功之后可以查看验证结果（.npmrc配置会被增加一条token认证）：

//gitlab.com/api/v4/projects/133/packages/npm/:_authToken=XXX
  • mac系统：在~/.npmr;
  • windows系统：一般在C:Users<你的用户名>.npmrc;

这个验证的作用其实也是为了后期npm登录，就不需要账号密码登录了，只需要这个token验证通过就可以。

npm配置

npm（注册表）配置文件

在项目根目录新建.npmrc文件，配置一下npm包要发布到哪个服务器即可；

@hnc:registry=https://gitlab.com/api/v4/packages/npm/

字段解释：

  • hnc: 群组名称，在上边建过；
  • gitlab.com: 公司gitlab内网部署的域名；

除了上边这两个字段需要修改，其他保持一致。

配置packages.json

配置publishConfig字段，这个字段的作用是指定我们这个npm包要发布到哪里去。

"@hnc:registry": "http://gitlab.com/api/v4/projects/133/packages/npm/"

字段解释：

  • hnc: 群组名称，在上边建过；
  • gitlab.com: 公司gitlab内网部署的域名；
  • 133: 项目id（Project ID），也就是我们要发布的项目uefe-api的项目id，在项目主页名称下方可查看；

除了上边这三个字段需要修改，其他保持一致。

手动发布

接下来呢就是手动发布（自动发布下篇讲），我们直接命令行操作即可；

npm publish

发布成功之后，群组hnc下的Packages & Registries就会有发布记录

注意：如果出现403报错，检查一下npm包的版本是否重复发布！

使用

首先配置一下npm，我们使用命令行。

第一步：

// 指定一下npm源
npm config set @hnc:registry=http://gitlab.com/api/v4/packages/npm/

字段解释：

  • hnc: 群组名称，在上边建过；
  • gitlab.com: 公司gitlab内网部署的域名；

第二步：

// 指定一下npm源
npm config set -- '//gitlab.com/api/v4/packages/npm/:_authToken' "群组token"

字段解释：

  • gitlab.com: 公司gitlab内网部署的域名；
  • 群组token：注意：这是群组token，也就是到hnc组中去创建，依旧选择Deploy tokens

以上两步设置完成之后，就可以直接执行

npm i @hnc/uefe-api

总结

以上就是使用命令行在gitlab中发布npm包的一整个详细的流程，主要包括：

  • 项目如何创建
  • 如何生成项目发布令牌
  • gitlab中npm发布如何验证token
  • npm配置如何与项目配置相关联
  • 如何安装内网npm包

好了，下一章我们将讲解如何在私有部署的gitlab网站中进行npm包的自动打包部署以及发布的详细流程。

” 欲知后事如何，且听下回分解~ “

点击关注不迷路，持续升级打怪??????