资讯专栏INFORMATION COLUMN

Github CICD自动化部署

社区管理员 / 823人阅读

一、什么是CICD

翻译过来就是持续构建、持续部署,在软件工程中,一个项目的迭代往往是很频繁的,每次都要重新部署,就成了一件很繁琐的事情,那么如何保证项目能够持续的构建和部署呢?

我们先来看一个软件的开发流水线一般为:

  • 需求设计:软件需求分析和设计

  • 开发阶段:进入编码、程序开发、简单的本地单元测试、代码Review等

  • 全面测试:功能测试、性能测试、单元测试、界面测试、安全测试等

  • 发布:将代码部署,交给用户使用

1、CI 持续集成(Continuous Integration)

持续集成:频繁的将代码合并到主分支中,强调通过集成测试反馈给开发一个结果,不管失败还是成功。

持续集成并不能消除Bug,只能帮助开发更容易发现Bug。

持续集成分成三个阶段:

  • 持续集成准备阶段:根据软件开发的需要,准备CI的一些前置工作

    • 集成CI工具的代码仓库(Gitlab、Github、Jenkins等)

    • 单元测试或者集成测试的脚本

    • 触发CI的配置文件,实现各种功能的Jobs

  • 持续集成进行阶段

    • 推送代码出发CI系统

    • 通过CI系统监听代码的测试、构建,反馈集成结果

    • 通过版本管理系统实现版本的管理

  • 接续集成完成阶段:反馈集成结果

2、CD 持续交付(Continuous Delivery)

持续交付:主要面向测试人员和产品,可以保证一键部署,常常要交付的内容包括

  • 源代码:缺点,代码依赖的环境不容易控制

  • 打包的二进制文件或者系统包:存在兼容性问题和环境差异出现的部署失败

  • 虚拟机镜像交付:系统隔离最好,但占用系统资源严重

  • Docker交付:容器交付,成本最低,兼容性最好

持续部署:此时要提供一个稳定的版本,包括所需的环境和依赖,主要面向用户提供服务,发生错误要能快速回滚。

下图为一个完整的CI/CD过程:

提供CI能力的工具包括:Gitlab、Github、Jenkins等,下面我们来看下如何通过Gihub的CI/CD来部署前端项目。

二、Github Action

1、Github Actions位置:

主仓库导航中的操作选项卡

2、Github Actions执行任务图:

image.png

3、配置文件说明

1、在项目根目录下新建.github/workflows,在workflows下新建yml文件,命名可以任意,如下是一份yml配置文件

</>复制代码

  1. 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 复制代码

4、针对特殊字段说明

workflow:一个yml文件配置一个工作流

job:一个workflow由一个或多个job组成

step:一个job由多个step组成,依次完成

action:每个step都要执行action,每个action都是多带带的脚本

uses:官方仓库:github.com/actions

env: 环境变量配置:

  • 自定义环境变量

</>复制代码

  1. 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 }}变量配置在:

image.png

环境变量说明
CI始终设置为 true
GITHUB_ACTION当前运行的操作的名称,或步骤的 id。 例如,对于操作 __repo-owner_name-of-action-repo
GITHUB_JOB当前作业的 job_id

5、CICD实例

  • 下面我们来实际操作一下,首先要新建一个项目,这里我们使用Create-React-App创建一个应用,推送Github仓库

  • package.json中增加一行配置

</>复制代码

  1. {   "homepage""https://[your github name].github.io/[your project name]" } 复制代码

image.png image.png

  • 在项目下新建.github/workflows/main.yml文件,可以复制上面的文件,并添加下面Deploy的Job配置

</>复制代码

  1. 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

image.png

以上配置文件依次处理包括:

  • 当推送代码到Github仓库的main分支,就会触发Action,然后就会执行配置中的脚本

  • 开始执行Check任务,依次进行代码检出、ESLint检测、StyleLint检测

  • 执行完毕后执行Deploy任务,依次执行检出代码、打包代码、部署分支

然后就可以访问我们部署的静态站点了,地址:richlpf.github.io/antd-templa…

image.png


作者:前端中后台
链接:https://juejin.cn/post/7145335762890784799
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127967.html

相关文章

  • jenkins+maven+docker+github动化部署SpringBoot实例

    实践性尝试,这里只在一台虚拟机下操作。 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...

    lk20150415 评论0 收藏0
  • 【容器云 UK8S】最佳实践:基于Jenkins的CI/CD实践

    摘要:扩展性好当集群的资源严重不足而导致排队等待时,可以很容易的添加一个到集群中,从而实现扩展。用法,选择尽可能使用这个节点镜像,填写,这个容器镜像是我们的运行环境。更新文件,这里我们只是将中的镜像更换成最新构建出的镜像。基于Jenkins的CI/CD实践[TOC]一、概要提到K8S环境下的CI/CD,可以使用的工具有很多,比如Jenkins、Gitlab CI、新兴的drone等,考虑到大多公司...

    Tecode 评论0 收藏0
  • Rancher 2.1全面发布,优化Kubernetes集群运维

    摘要:新近发布,中国区团队特为中国用户准备了千元大奖,邀您参与用户体验计划找,提团队珍视用户的每一个意见与反馈。新版本发布后还将经历版本完善与优化的阶段。 showImg(https://segmentfault.com/img/remote/1460000016731917?w=1600&h=900); GitLab支持、CICD优化、项目配额管理、驱散容器功能等等,Rancher 2.1...

    zhouzhou 评论0 收藏0
  • k8s与CICD--利用helm部署应用到kubernetes

    摘要:本节主要介绍利用部署应用到中。利用部署一个应用,需要原生资源文件如或等。最后一般都会引用通知插件,将构建结果通知部署人员。说到部署策略,不得不说,实现的功能很多,但是足够的复杂,目前来看,国内只有小红书用起来了。 前言 本小节应该是这个系列剩下的两个小节之一了。剩下一个是之前承诺好的drone-wechart插件。本节主要介绍利用helm部署应用到kubernetes中。至于helm,...

    joyqi 评论0 收藏0

发表评论

0条评论

社区管理员

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<