【保姆级教学】内网部署的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包库代码的代码存储库,这个是真正要发布的包的代码库,最终会将这个包发布到群组hncPackage&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包的自动打包部署以及发布的详细流程。

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

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

相关推荐
傻虎贼头贼脑5 分钟前
day21JS-npm中的部分插件使用方法
前端·npm·node.js
low神16 分钟前
前端在网络安全攻击问题上能做什么?
前端·安全·web安全
qbbmnnnnnn1 小时前
【CSS Tricks】如何做一个粒子效果的logo
前端·css
唐家小妹1 小时前
【flex-grow】计算 flex弹性盒子的子元素的宽度大小
前端·javascript·css·html
涔溪1 小时前
uni-app环境搭建
前端·uni-app
安冬的码畜日常1 小时前
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格(上)
前端·css·css3·html5·网格布局·grid布局·css网格布局
洛千陨1 小时前
element-plus弹窗内分页表格保留勾选项
前端·javascript·vue.js
小小19921 小时前
elementui 单元格添加样式的两种方法
前端·javascript·elementui
前端没钱2 小时前
若依Nodejs后台、实现90%以上接口,附体验地址、源码、拓展特色功能
前端·javascript·vue.js·node.js
爱喝水的小鼠2 小时前
AJAX(一)HTTP协议(请求响应报文),AJAX发送请求,请求问题处理
前端·http·ajax