大家好,我是日拱一卒的攻城师不浪,专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀,这是2024年输出的第28/100篇文章。
交流合作:brown_7778
前言
最近一直在分享三维可视化方向的内容,都快忘记自己的老本行是传统前端了。。
当然,其实可视化和前端也是密不可分的,特别是如果你要用webgl引擎
去做三维可视化的话,其实还得让前端开发人员上!
所以,我认为前端能做的事情可太多了,常见的PC端
,H5
,小程序
咱就不说了,基操了,还有跨端开发(安卓、IOS
)、鸿蒙
、大屏
、三维
、GIS
,包括后端语言nodejs
等等。
所以,以后请不要再说我们前端就是小鸡啄米
了!我要为我的前端兄弟姐妹们正名!谁再说我跟谁急!
前情介绍
好了,言归正传吧。
最近我和团队的成员正在研发一款技术产品,涉及到Unreal游戏引擎
+前端
+nodejs
。
主要功能是UE将数字孪生
业务开发过程中常用到的三维功能,例如相机、POI点位、线、面、天气、特效类(辐射圈、迁徙线、流光等)、模型、材质、还包括GIS相关的一些功能等等吧,进行一个统一的接口封装
,然后前端再统一封装成开发人员用起来比较顺手的API,并形成统一规范的接口文档。
这样一来,后期做三维可视化项目的时候,就会大大缩减UE开发的人工成本
以及和前端沟通联调的成本
,且代码也都统一规范化
,方便后期维护
。
OK,产品我就稍微提一嘴,最近在忙别的事情,后边有时间我将着重展示一下我们的研发成果。
那么在这个过程中呢,我主要负责产品的设计,接口文档的设计以及前端JSSDK
的架构以及工程化
搭建,基础Class类
的封装,以及产品的运维管理平台
也是我在做。
对,我就是那个牛马!但是一只快乐的牛马
😊,因为这些事情是我喜欢且愿意做的。
CI/CD自动构建部署的坑
前端JS的包开发完成之后,需要在公司内网发布npm包
,为了节省人工成本,需要配置自动化工作流:包括自动编译打包
以及自动部署
并内网发布。
这就涉及到了工程化中的CI/CD流
知识点,需要在前端配置一个.gitlab-ci.yml
文件,这时gitlab平台会自动执行这个文件并开启工作流。
我一开始自以为是的认为已经配置的完美无缺了,代码如下:
stages: # 分段
- install
- build
- deploy
cache: # 缓存
key:
files:
- yarn.lock
paths:
- node_modules/
install-job:
stage: install
script:
- npm install --force
only:
- master
build-job:
stage: build
script:
- npm run build
only:
- master
deploy-job:
stage: deploy
script:
- npm publish
only:
- master
从安装、打包到发布一气呵成,毫不拖泥带水。
然后兴高采烈的把npm包安装上,一使用,好嘛,刚更新的代码竟然使用不了,然后我就去查node_modules
里的包源代码,主要是dist
和types
两个文件夹的代码,纳尼?为什么新增的代码都没有被打包进npm包呢?
明明我认为我的yml
已经很完美了,也没有发现有什么问题,但是问题确实不太好排查,又因为要的急,无奈之下,我只好手动build
,然后把dist和types两个文件夹都从.ignore
文件中释放出来,再重新发布,这下才能用了。
但是身为最强架构师的我,怎能容忍这般耻辱?我必须得排插到真凶!
说一下我的排查思路:手动打包发布就可以,但是自动打包发布就不行,说明问题出现在了自动这一步,矛头直指.gitlab-ci.yml
配置文件。
但是配置文件执行的时候又没有报错,那是不是漏了什么东西呢?后来我就把我当前的配置文件以及我遇到的问题喂给了ChatGPT
,如下:
我的.gitlab-ci.yml文件配置如下:
stages: # 分段
- install
- build
- deploy
// ...
问题:当我通过流水线自动发布之后,我的dist文件没有更新成打包之后的产物
看看GPT的完美回答,直接解决了我的问题:
为了确保在 GitLab CI/CD 中缓存 node_modules
并且正确地生成和部署 dist
文件,你需要确认以下几点:
- 缓存:确保
node_modules
被正确缓存。 - 工件(Artifacts):将
dist
文件夹添加为工件,在各阶段之间传递。 - 依赖关系:确保
build-job
依赖于install-job
的成果。
下面是修改后的 .gitlab-ci.yml
文件:
//...
install-job:
// ...
artifacts:
paths:
- node_modules/
build-job:
//...
dependencies:
- install-job
artifacts:
paths:
- dist/
deploy-job:
//...
dependencies:
- build-job
artifacts:
paths:
- dist/
解释关键改动
-
Artifacts in
install-job
:- 添加了
artifacts
部分,包含node_modules/
目录。这确保node_modules
被保存并在后续阶段可用。
- 添加了
-
Dependencies in
build-job
:- 使用
dependencies
指定build-job
依赖于install-job
的artifacts
,确保node_modules
在build-job
中可用。 - 添加
artifacts
部分,包含dist/
目录,这样在deploy-job
中也可以访问到dist/
目录。
- 使用
-
Dependencies in
deploy-job
:- 使用
dependencies
指定deploy-job
依赖于build-job
的artifacts
,确保dist/
在deploy-job
中可用。 - 也添加
artifacts
部分,包含dist/
目录,以防后续阶段需要访问。
- 使用
确认缓存和工件路径
node_modules/
:用于缓存依赖项,加快构建速度。dist/
:包含构建后的产物,需要在deploy-job
中发布。
测试和验证
- 检查工件:在 GitLab CI/CD 界面检查各阶段生成的工件,确保
dist/
目录在build-job
中生成并传递到deploy-job
。
这应该能够解决 dist
文件没有在部署阶段更新的问题。
总结
OK,GPT的解答已经完全点通了我,归根结底,我并没有把yml文件写完整,其中最重要的是我漏掉了artifacts这个参数配置,然后我又问了下GPT。
artifacts:指定构建过程中生成的文件或目录,以便在作业完成后被GitLab CI保存和传递给后续阶段或者作业。
由于每个job启动时, 都会自动删除.gitignore中指定的文件,而我的dist和types文件夹又恰好都在.gitignore中,因此,当走到最后一步deploy-job
工作流的时候,gitlab CI中已经没有dist和types这俩文件目录了,所以理所当然的发布后的包中只有缓存的代码,而不会有更新后的代码了。
不得不感慨,AI真的在改变我们的生活呀!确实在提高生产效率方面正在发挥它强大的作用!
准备创建一个AI学习&副业社群(非免费),主要是分享我付费学到的一些AI资料,AI提示词、AI视频、AI绘画、AI数字人、智能体构建、AI写作、RPA自动化、AI开发相关、AI副业等,群内互相分享学习以及讨论AI相关的内容,一起追赶探索行业发展动态,如果有兴趣的可私信我:brown_7778