git前端工程实现ci_gitlab中vue前端项目CI/CD部署笔记
持续集成
略
Gitlab的持续集成
我们可以将整个运行机制,看作一个赏金猎人接任务,执行任务,并完成任务的过程。
GitLab-CI
简单来说,这就是一个任务发布平台。运行在gitlab服务器,监听代码状态变化,并发布对应的任务。
GitLab-Runner
而每个runner就是一位赏金猎人,是任务的执行者。
.gitlab-ci.yml
任务的发布者,规定什么时候触发任务,任务的具体内容。
配置流程
经过前面的解释,整个思路就很清晰了。我们需要做的有三件事。编写.gitlab-ci.yml文件,设置对应的任务
部署Runner,激活赏金猎人
配置ci,邀请赏金猎人加入系统
部署Runner
这一步需要一个服务器,能run起来赏金猎人。
安装
请务必安装最新版,不然会出现很多未知的问题下载二进制文件# Linux x86-64
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
# Linux x86
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386
# Linux arm
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm
# Linux arm64
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm64授予执行权限sudo chmod +x /usr/local/bin/gitlab-runnerCreate a GitLab CI user:sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bashInstall and run as service:sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
sudo gitlab-runner start
加入任务系统
注册sudo gitlab-runner register
然后就是一些简单的配置,配置完成后就将该Runner注册到任务发布平台了,然后就可以接任务了。详细见参考文献【1】
编写.gitlab-ci.yml任务
本机部署版本
.gitlab-ci.ymlstages:
- deploy
cache:
paths:
- node_modules/
- public/
deployJob:
stage: deploy
script:
- npm install
- npm run build
- rm -rf /home/data/three_miju_shopper_manager_system_front/*
- cp -rf ./dist/* /home/data/three_miju_shopper_manager_system_front/
- sh ./bot.sh ${CI_COMMIT_REF_SLUG} ${CI_COMMIT_SHA:0:8} ${CI_COMMIT_MESSAGE}
tags:
- shared_test_machine_runner
only:
- dev
这个版本具有企业微信群机器人推送功能,需要配置./bot.sh#!/usr/bin/env bash
curl '群机器人地址' \
-H 'Content-Type: application/json' \
-d '
{
"msgtype": "markdown",
"markdown": {
"content": "商户端代码已更新,分支:'$1' 提交:'$2'
更新:'$3'
已发布,[点击测试](http://test.shop.gileey.cn)"
}
}'
远程推送版本stages:
- deploy
cache:
paths:
- node_modules/
- public/
deployJob:
stage: deploy
script:
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -avzu --progress ./dist/* root@thinkmoon.cn:/www/wwwroot/3ju.psyannabel.cn/
tags:
- shared_test_machine_runner
only:
- dev
该版本在gitlab-runner机器上执行编译等工作,编译完成后使用rsync同步到云服务器,需要配置私钥变量$SSH_PRIVATE_KEY
遇到的问题
导入自定义组件时一直报错:This dependency was not found:
出现背景:由于以前命名组件是"clickImg",后改成"ClickImg",由于linux的区分大小写,所以会一直没找到。
解决方案:换个名字???
参考文献
git前端工程实现ci_gitlab中vue前端项目CI/CD部署笔记相关推荐
- 五步git操作搞定Github中fork的项目与原作者同步
<p>以EasyPR项目为例 <br> 作者原项目地址是: https://github.com/liuruoze/EasyPR.git 我frok后的项目地址是:https: ...
- 前端工程师必须知道的vue前端面试题目汇总
①:说说Vue和Angular.ReactJS的相同点和不同点 ②:简单描述一下Vue中的MVVM模型 ③:v-if和v-show指令有什么区别? ④:如何阻止Vue中的绑定事件不发生冒泡 ⑤:父.子 ...
- 前端学习(1272):Vue前端路由
- 为前端工程之崛起而编程!
作者 | 蚂蚁保险体验技术团队 责编 | 胡巍巍 程序员转行学什么语言? https://edu.csdn.net/topic/ai30?utm_source=csdn_bw 本文经授权转载知乎&qu ...
- 基于 GitLab CI 的前端工程CI/CD实践
CI/CD 是 Gitlab 提供的一整套持续集成.持续交付解决方案. 概念:「持续集成(Continuous Integration)」.「持续交付(Continuous Delivery)」和「持 ...
- Vue前端组件库介绍
kb-vue-components 组件库平台介绍 这里汇集大家常用的Vue组件, 并提供相应组件的使用教程. 方便你找到适合自己的组件,并快速上手使用. 开源项目地址: kb-vue-compone ...
- vue前端开发demo示例
vue前端开发demo示例 目录 vue前端开发demo示例 系统结构 js部分 界面部分 界面 系统结构 js部分 代码如下(示例): import request from '@/utils/re ...
- 零基础带你飞web前端教程带你探究web前端趋势
web前端教程带你探究web前端趋势,IT行业发展迅速,瞬息万变,很多想要学习Web前端进入IT行业的人都会担忧Web前端行业发展趋势如何.下面,老师就带大家了解一下2021年Web前端行业发展趋势如 ...
- winform 项目 发布后比本地运行慢_前端团队基于 GitLab CI/CD 的自动化构建、发布实践,快来学习吧...
在公司搭建内部 GitLab 平台后,前端活动项目从 SVN 迁移到 GitLab.本文介绍如何基于 GitLab CI/CD 实现自动化构建及发布. 在从 SVN 迁移到 GitLab 和接入 Gi ...
最新文章
- java中方法的参数传递
- 常用的开源视音频解码软件库
- TOMOYO Linux(undone)
- 码上用它开始Flutter混合开发——FlutterBoost
- IOS 内存优化和调试技巧
- vue 表格中有列需要异步加载_vue.js表格分页,ajax异步加载数据
- 《极客与团队》一说到底真正重要的还是代码本身
- 在Entity Framework中使用事务
- pl/mysql安装_MySQL安装
- 基础平台系列-1-第三方服务
- 棋牌搭建,APP新手搭建教程
- 初学者园地之一:保险丝
- mysql reads sql data_在其声明中使用DETERMINISTIC,NO SQL或READS SQL DATA并启用二进制日志记录...
- 二进制漏洞挖掘之angr‘s Reaching Definition Analysis(一)
- fiddler抓包小红书app(简易版)
- Open For Bussiness (HelloWorld)
- 基于S3C2440的电子鹰眼监控系统设计
- 反向传播计算前级delta时,后级delta去掉常数偏置参数delta0的原因
- 每次启动电脑,基本都出现这个错误,很长时间的启动过程。
- 如何开通聚合商家收款码?