【保姆级教学】内网部署的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配置

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

js 复制代码

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认证）：

ruby 复制代码

//gitlab.com/api/v4/projects/133/packages/npm/:_authToken=XXX

mac系统 ：在~/.npmr;
windows系统 ：一般在C:\Users\<你的用户名>\.npmrc;

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

npm配置

npm（注册表）配置文件

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

less 复制代码

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

字段解释：

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

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

配置packages.json

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

js 复制代码

"@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，我们使用命令行。

第一步：

js 复制代码

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

字段解释：

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

第二步：

js 复制代码

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

字段解释：

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

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

js 复制代码

npm i @hnc/uefe-api

总结

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

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

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

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

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