翻译过来就是持续构建、持续部署,在软件工程中,一个项目的迭代往往是很频繁的,每次都要重新部署,就成了一件很繁琐的事情,那么如何保证项目能够持续的构建和部署呢?
我们先来看一个软件的开发流水线一般为:
需求设计:软件需求分析和设计
开发阶段:进入编码、程序开发、简单的本地单元测试、代码Review等
全面测试:功能测试、性能测试、单元测试、界面测试、安全测试等
发布:将代码部署,交给用户使用
持续集成:频繁的将代码合并到主分支中,强调通过集成测试反馈给开发一个结果,不管失败还是成功。
持续集成并不能消除Bug,只能帮助开发更容易发现Bug。
持续集成分成三个阶段:
持续集成准备阶段:根据软件开发的需要,准备CI的一些前置工作
集成CI工具的代码仓库(Gitlab、Github、Jenkins等)
单元测试或者集成测试的脚本
触发CI的配置文件,实现各种功能的Jobs
持续集成进行阶段
推送代码出发CI系统
通过CI系统监听代码的测试、构建,反馈集成结果
通过版本管理系统实现版本的管理
接续集成完成阶段:反馈集成结果
持续交付:主要面向测试人员和产品,可以保证一键部署,常常要交付的内容包括
源代码:缺点,代码依赖的环境不容易控制
打包的二进制文件或者系统包:存在兼容性问题和环境差异出现的部署失败
虚拟机镜像交付:系统隔离最好,但占用系统资源严重
Docker交付:容器交付,成本最低,兼容性最好
持续部署:此时要提供一个稳定的版本,包括所需的环境和依赖,主要面向用户提供服务,发生错误要能快速回滚。
下图为一个完整的CI/CD过程:
提供CI能力的工具包括:Gitlab、Github、Jenkins等,下面我们来看下如何通过Gihub的CI/CD来部署前端项目。
1、在项目根目录下新建.github/workflows
,在workflows下新建yml文件,命名可以任意,如下是一份yml配置文件
</>复制代码
name: GitHub Actions Demo # ci文件的名字 on: [push] # 触发CI的条件 jobs: # CI/CD通过执行一个个的Job来完成每个阶段的工作,这里配置每个Jobs Check: # Job的名称 runs-on: ubuntu-latest # Runner,github托管的虚拟机环境,用来执行下面的Job命令 steps: # 执行步骤 - name: Check # 子步骤名称 if: runner.os != 'Windows' # 执行条件 uses: actions/checkout@v2 # 使用的action,检出分支,可以使用docker hub中的镜像:docker://alpine:3.8 - name: ESLintCode # ESLint 检测代码质量 uses: actions/setup-node@v2 # 使用node环境 - run: yarn # 执行命令安装依赖,也可以执行shell脚本./.github/scripts/build.sh - run: yarn global add eslint && eslint ./src/*/**.js # 安装全局ESLint并检测代码 - name: StyleLintCode # 检测代码样式 uses: actions/setup-node@v2 # 使用node环境 - run: yarn # 执行命令安装依赖 - run: yarn global add stylelist && stylelint ./src/*/**.less # 执行检测命令 Build: # Job名称 needs: Check # 决定执行的顺序,通过needs,在Check任务执行完成后执行当前任务,指出数组,可以写入多个 # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - name: Check uses: actions/checkout@v2 # Runs a single command using the runners shell - name: Build uses: actions/setup-node@v2 env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: main - run: yarn - run: yarn build:pre 复制代码
workflow:一个yml文件配置一个工作流
job:一个workflow由一个或多个job组成
step:一个job由多个step组成,依次完成
action:每个step都要执行action,每个action都是多带带的脚本
uses:官方仓库:github.com/actions
env: 环境变量配置:
自定义环境变量
</>复制代码
name: Greeting on variable day on: workflow_dispatch env: # 注意使用的作用域范围 DAY_OF_WEEK: Monday jobs: greeting_job: runs-on: ubuntu-latest env: Greeting: Hello steps: - name: "Say Hello Mona it's Monday" run: echo "$Greeting $First_Name. Today is $DAY_OF_WEEK!" env: First_Name: Mona 复制代码
上面的$${{ secrets.ACCESS_TOKEN }}
变量配置在:
系统环境变量:具体可以查看文档
环境变量 | 说明 |
---|---|
CI | 始终设置为 true |
GITHUB_ACTION | 当前运行的操作的名称,或步骤的 id 。 例如,对于操作 __repo-owner_name-of-action-repo 。 |
GITHUB_JOB | 当前作业的 job_id |
下面我们来实际操作一下,首先要新建一个项目,这里我们使用Create-React-App创建一个应用,推送Github仓库
在package.json
中增加一行配置
</>复制代码
{ "homepage": "https://[your github name].github.io/[your project name]" } 复制代码
在项目下新建.github/workflows/main.yml
文件,可以复制上面的文件,并添加下面Deploy的Job配置
</>复制代码
name: CI env: CI: false on: push: branches: [ main ] permissions: contents: write # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" Check: runs-on: ubuntu-latest steps: - name: checkout uses: actions/checkout@v2 - name: ESLintCode uses: actions/setup-node@v2 - run: yarn - run: npm install -g eslint && eslint ./src/*/**.js - name: StyleLintCode uses: actions/setup-node@v2 - run: npm install -g stylelint stylelint-less - run: mkdir .tmp-css-check && touch .tmp-css-check/.stylelintrc.json && echo '{"plugins":["stylelint-less"],"rules":{}}' >> .tmp-css-check/.stylelintrc.json && stylelint "src/**/*.less" --config .tmp-css-check/.stylelintrc.json --aei Deploy: needs: Check # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - name: checkout uses: actions/checkout@v2 # Runs a single command using the runners shell - name: build uses: actions/setup-node@v2 env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: main - run: yarn - run: yarn build:prod - name: deploy uses: JamesIves/github-pages-deploy-action@v4.3.3 with: branch: gh-pages folder: build 复制代码
在Github中配置访问Page
以上配置文件依次处理包括:
当推送代码到Github仓库的main分支,就会触发Action,然后就会执行配置中的脚本
开始执行Check任务,依次进行代码检出、ESLint检测、StyleLint检测
执行完毕后执行Deploy任务,依次执行检出代码、打包代码、部署分支
然后就可以访问我们部署的静态站点了,地址:richlpf.github.io/antd-templa…
作者:前端中后台
链接:https://juejin.cn/post/7145335762890784799
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/127967.html
实践性尝试,这里只在一台虚拟机下操作。 1.vmware 下centos 安装 设置centos 桥接模式 参考:https://www.cnblogs.com/loven... 2.centos 软件安装 1) docker 安装 yum install -y docker 2)JDK 安装 参考:https://blog.csdn.net/evan_chen_1/article/de...
摘要:扩展性好当集群的资源严重不足而导致排队等待时,可以很容易的添加一个到集群中,从而实现扩展。用法,选择尽可能使用这个节点镜像,填写,这个容器镜像是我们的运行环境。更新文件,这里我们只是将中的镜像更换成最新构建出的镜像。基于Jenkins的CI/CD实践[TOC]一、概要提到K8S环境下的CI/CD,可以使用的工具有很多,比如Jenkins、Gitlab CI、新兴的drone等,考虑到大多公司...
摘要:新近发布,中国区团队特为中国用户准备了千元大奖,邀您参与用户体验计划找,提团队珍视用户的每一个意见与反馈。新版本发布后还将经历版本完善与优化的阶段。 showImg(https://segmentfault.com/img/remote/1460000016731917?w=1600&h=900); GitLab支持、CICD优化、项目配额管理、驱散容器功能等等,Rancher 2.1...
摘要:本节主要介绍利用部署应用到中。利用部署一个应用,需要原生资源文件如或等。最后一般都会引用通知插件,将构建结果通知部署人员。说到部署策略,不得不说,实现的功能很多,但是足够的复杂,目前来看,国内只有小红书用起来了。 前言 本小节应该是这个系列剩下的两个小节之一了。剩下一个是之前承诺好的drone-wechart插件。本节主要介绍利用helm部署应用到kubernetes中。至于helm,...
阅读 293·2024-11-07 18:25
阅读 130385·2024-02-01 10:43
阅读 870·2024-01-31 14:58
阅读 829·2024-01-31 14:54
阅读 82777·2024-01-29 17:11
阅读 3066·2024-01-25 14:55
阅读 1987·2023-06-02 13:36
阅读 3040·2023-05-23 10:26