基于 Vue+ Webpack 配合 GitLab CI/CD 自动化部署的实践经验分享

最新推荐文章于 2025-05-15 23:07:00 发布

big_baymax

最新推荐文章于 2025-05-15 23:07:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： ci 自动化运维 vue 前端

本文链接：https://blog.youkuaiyun.com/xiao_bin_shen/article/details/126183571

本文介绍了GitLab CI/CD的基本概念和工作流程，并详细阐述了如何配置GitLab Runner及编写.gitlab-ci.yml文件来实现Vue项目的自动化部署。通过示例代码展示了Vue项目的构建、测试和部署过程，旨在帮助开发者提高效率，减少手动部署的工作量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

总有前辈们辛苦的去探索新轮子，造福我们这些晚辈哈！

最近研究了一个自动化部署的东西，大大造福开发的工程师们，再也不用一直重复的去做繁琐的部署工作了，一步到位，后面就可以好好开发了，把时间放在该花的地方。

软件开发的持续方法基于自动执行脚本，以最大程度地减少在开发应用程序时引入错误的机会。从开发新代码到部署新代码，他们几乎不需要人工干预，甚至根本不需要干预。

一、GitLab CI/CD 是什么？

GitLab CI/CD 是一个内置在 GitLab 中的工具，用于通过持续方法进行软件开发：

Continuous Integration（CI）：持续集成
Continuous Delivery（CD）：持续交付
Continuous Deployment（CD）：持续部署

GitLab CI/CD 由一个名为 .gitlab-ci.yml 的文件进行配置，改文件位于仓库的根目录下。文件中指定的脚本由 GitLab Runner 执行。

基本 CI/CD 工作流程

一旦你将提交推送到远程仓库的分支上，那么你为该项目设置的 CI/CD 管道将会被触发。GitLab CI/CD 通过这样做：

运行自动化脚本（串行或并行）代码Review并获得批准
构建并测试你的应用
就像在你本机中看到的那样，使用 Review Apps 预览每个合并请求的更改
代码 Review 并获得批准
合并 feature 分支到默认分支，同时自动将此次更改部署到生产环境
如果出现问题，可以轻松回滚

二、如何配置

1.配置gitlab runner

gitlab后台找到这个，进行配置，这里有更加详细的教程：进入

2.配置.gitlab-ci.yml

简单的示例：

#流水线的stages的顺序可以自己定义
#相同阶段的任务将会并发的执行，上一个阶段的任务完整的结束之后，下一个阶段的任务才会开始执行 
stages:
  - check_code 
  - build
  - deploy 
job1:
  stage: check_code
  script:
     - echo 'stage1 job ，读取变量为:' $param1
 
 
job2:
  stage: build
  script:
     - echo 'stage2 job  ，读取变量为:' $param2
 
job3:
  stage: deploy
  script:
     - echo 'stage3 job  ，读取变量为:' $param3

对于Vue的项目你可以这样写

image: aa-us3

variables:
  GIT_DEPTH: 10

stages:
  - install
  - build
  - deploy

cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/

build_release:
  stage: build
  script:
    - sed -i 's/{{account_url}}/\/\/api.cn\//g' .env #接口地址
    - sed -i 's/{{env}}/studio/g' .env #环境变量
    - npm install --registry=https://registry.npmmirror.com
    - npm run build
    - cd ./anchor_unity_webrtc/
    - ls -l | grep "^d" | awk '{print $9}' | awk '{print "cp -r ./" $0 " us3://xx-editor/"}' | xargs -L 1 us3cli
    - ls -l | grep "^-" | awk '{print $9}' | awk '{print "cp ./" $0 " us3://xx-editor/"}' | xargs -L 1 us3cli
    - ucdn_refresh -type=dir -list=http://xx-editor.cn/
  tags:
    - nodojs_deploy
  only:
    - /^tag_release.*$/

build_master:
  stage: build
  script:
    - sed -i 's/{{account_url}}/\/\/192.168.11.209:4006\//g' .env
    - sed -i 's/{{env}}/webapp/g' .env
    - rm ./public/robots.txt
    - npm install --registry=https://registry.npmmirror.com --force
    - npm run build
    - rsync -az --delete --password-file=<(echo "123456") ./xx/ rsync@192.168.11.243::dev_xx_editor/
  tags:
    - nodojs_deploy
  only:
    - /^master.*$/

然后在项目的根目录下写上配置文件:

内容如下：

VUE_APP_ENV='{{env}}'
VUE_APP_ACCOUNT_URL='{{account_url}}'

这样子就配置好了一个简单的基于Vue的自动化部署了，有没有收到启发了，其实还可以增加多个打包模式，增加多个打包环境的任务，达到应付多种场景的需求

总结

对于前端的同学来说，去探索实现这个还是有点难度的，一般情况下也没太大需要。不过如果你项目达到一定程度，当你无法分身的时候，就试试这个轮子吧！好用到你想不到，以后不用让他人催着你部署了，全自动，就是这么简单。