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

在使用Rancher流水线部署基于Node.js的前端项目时,遇到了本地构建成功但流水线容器构建失败的问题。经过排查,发现是网络问题导致npm依赖下载不全,切换到国内镜像源未解决问题。进一步分析发现,代码中存在大小写不敏感的错误,这在Linux环境下构建时导致了报错。通过修复代码中的大小写问题并重新运行流水线,最终成功部署。

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

问题描述

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

问题截图

build过程的log记录

解决过程

网络问题

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

但是,依然失败。

代码问题

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

前三条搜索出来的内容,基本就解决了我的问题。出错

### 使用 Docker 实现前端项目 CI/CD 流水线部署 #### 准备环境 为了实现基于 Docker前端项目 CI/CD 流水线部署,需确保具备如下条件: - **GitLab 仓库**:代码已推送到 GitLab 仓库[^1]。 - **部署服务器**:存在一台可通过 SSH 访问的服务器,用于实际部署前端项目[^4]。 #### 安装必要工具和服务 安装并配置必要的工具和服务对于建立有效的 CI/CD 流程至关重要。这包括但不限于: - **GitLab Runner**:负责执行由 GitLab CI 所定义的任务。 - **DockerDocker Compose**:用来创建和管理容器化的应用程序及其依赖关系。 这些组件共同作用于整个 CI/CD 过程之中。 #### 编写 .gitlab-ci.yml 文件 `.gitlab-ci.yml` 是 GitLab CI 中的核心配置文件之一,它描述了每次提交触发后的具体动作序列。下面是一个简单的 `.gitlab-ci.yml` 示例,适用于大多数前端项目的构建过程: ```yaml image: node:latest stages: - build - test - deploy variables: DOCKER_DRIVER: overlay2 cache: paths: - node_modules/ build_app: stage: build script: - npm install - npm run build artifacts: paths: - dist/ test_app: stage: test script: - npm test deploy_to_production: only: - master stage: deploy script: - echo "Deploying to production..." -p $CI_JOB_TOKEN $CI_REGISTRY - docker build -t myapp . - docker push myapp ``` 此脚本涵盖了从构建、测试到最后一步向生产环境中推送新版本的所有阶段。 #### 创建 Dockerfile 为了让应用能够被正确地打包成 Docker 镜像,在根目录下还需要提供一个 `Dockerfile` 来指导 Docker 如何组装最终的产品包。这里给出一段针对 Vue.js 或 React 类型单页应用(SPA)的基础模板作为参考: ```dockerfile FROM nginx:alpine COPY ./dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 这段指令会将之前通过 NPM 构建出来的静态资源复制到 NGINX 默认的服务路径内,并暴露 HTTP 端口供外部访问。 #### 自动化部署流程优化建议 考虑到可能遇到的各种挑战,比如长时间等待等问题,推荐采取一些措施来提升整体性能与稳定性: - 设置合理的超时时间以应对潜在的时间消耗较大的任务; - 利用缓存机制减少重复下载相同依赖项所带来的延迟; - 对敏感信息如密码等采用安全方式传递而非硬编码在任何公开可见的地方; - 如果有必要的话还可以考虑引入更专业的监控平台来进行全方位跟踪分析[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值