docker流水线部署前端项目的坑

时间:2024-03-20 10:51:49

docker流水线部署前端项目的坑

问题描述

使用Rancher自带的流水线部署一个nodejs编写的前端项目,遇到的问题是:本地build前端项目是可以通过的,但是在流水线的容器中build的时候却失败

问题截图

docker流水线部署前端项目的坑

解决过程

网络问题

根据报错的日志来看,貌似是build过程中有些依赖没下下来,毕竟npm有时候下载依赖包也不是很全,再加上众所周知的网络问题,想要痛快的访问官网下载依赖,有时候的确不容易,于是,换个姿势,使用国内的淘宝依赖源,如图
docker流水线部署前端项目的坑

但是,依然失败。

代码问题

在确认各种设置都正确之后,跟前端的同事进行沟通,确认代码是否存在问题,当然,前端的同事说没问题,于是,这个问题令人很奔溃,我试着把报错的日志直接复制下来,进行搜索,有时候这种方式还是不错的,能够搜索出一些解决方法。但是,这次就比较不爽了,搜索出的内容,基本上跟问题本身毫无关系,至于哪一个浏览器,大家也懂得。终于,我只能放出大招,进行google搜索(只能浏览网页),没办法,google的确很强。终于,在google中找出了想要的答案
docker流水线部署前端项目的坑

前三条搜索出来的内容,基本就解决了我的问题。出错的原因最终确定:是因为linux/windows进行npm run build时,对代码的大小写不敏感造成的。简而言之,就是代码中有些字符串命名是大写,但是放到不同地方却写成了小写,linux/windows严格匹配大小写,所以会报错,以下是github上解决问题的方法:
Github上的问题解决1
Github上的问题解决2

找到这个原因之后,我联系了前端的同事,他是用mac进行开发的,之前也没遇到过这个问题,因为mac系统貌似默认是对大小写不敏感的,在我的解释下,他果断的下了检查大小写的webpack插件,果然,有几处的字符串是混乱了大小写。最后,代码修改为一致的格式,提交代码,重新运行流水线,顺利通过!

结语:这个问题真的很坑,因为我不了解前端的代码,所以有时候解决问题思路可能就出了问题,恰好,这个问题,前端的同事也没遇到过,这就很尴尬了,不过好在顺利解决了。第一次写博客,废话多了点,哈哈,争取以后只上干货。