专栏首页趣谈前端5分钟教你快速掌握Github Action持续集成

5分钟教你快速掌握Github Action持续集成

前言

前段时间发布了一个滑动验证组件包 react-slider-vertify , 里面用到了 Github Action 作为自动化打包发布工具, 我们只需要简单的配置就能轻松的在执行 git push 的时候自动打包项目并将其一键发布到 npm 中.

接下来我就带大家一起了解一下 Github Action , 并从零教大家使用 Github Action 高效的管理和发布自己的开源项目.

Github Action 简介

Github Action 是 Github 推出的持续集成工具, 每次提交代码到 Github 的仓库后,Github 都会自动创建一个虚拟机(例如 Mac / Windows / Linux),来执行一段或多段指令,例如:

npm install
npm run build

我们集成 Github Action 的做法,就是在我们仓库的根目录下,创建一个 .github 文件夹,里面放一个 *.yaml文件, 这个 Yaml 文件就是我们配置 Github Action 所用的文件。

有关 yaml 更多的知识可以参考: https://www.codeproject.com/Articles/1214409/Learn-YAML-in-five-minutes

Github Action 的使用限制

  • 每个 Workflow 中的 job 最多可以执行 6 个小时
  • 每个 Workflow 最多可以执行 72 小时
  • 每个 Workflow 中的 job 最多可以排队 24 小时
  • 在一个存储库所有 Action 中,一个小时最多可以执行 1000 个 API 请求
  • 并发工作数:Linux:20,Mac:5

Workflow 是由一个或多个 job 组成的可配置的自动化过程。我们通过创建 YAML 文件来创建 Workflow 配置。

从零搭建 github 持续集成项目(npm包持续集成)

在了解了基本的知识之后, 我将通过一个实际的项目来带大家快速上手 Github Action . 最终实现的目标: 当我们将代码推送到 github上后, 通过 Github Action 自动打包项目, 并一键发布到 npm 上.

image.png

获取 npm token

要想让 Github Action 能有权利发布指定的 npm 包, 需要获取 npm通行证. 这个通行证就是 npm token, 所以我们需要登入 npm 官网, 生成一个 token :

image.png

设置 github secret

我们在拿到 npm token 后, 打开对应项目的 github 仓库, 切换到 settings 面板, 找到 secrets 子菜单, 创建一个新的 secret, 将 npm token 复制到内容区, 并命名(这个名字会在yaml文件中用到).

image.png

创建 Github Action

image.png

我们切换到 actions 面板可以看到很多 workflows 模版, 我们选择如下模版:

image.png

当然如果属性 yaml 配置的也可以自己创建一个 workflow 供他人使用.

我们点击安装按钮之后会跳转到编辑界面, 我们可以直接点击右上放的提交按钮:

image.png

此时就创建了一个 workflow .

配置 workflows

这里我列一下 react-slider-vertify 的 workflow.

name: Node.js Package

on:
 pull_request:
   branches:
     - main
 push:
   branches:
     - main

jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
     - run: yarn
     - run: yarn build

 publish-npm:
   needs: build
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
         registry-url: https://registry.npmjs.com/
     - run: npm publish --access public
       env:
         NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

其中有几个术语和大家介绍一下:

  • name Workflow 的名称,Github 在存储库的 Action 页面上显示 Workflow 的名称
  • on 触发 Workflow 执行的 event 名称, 比如 on: push(单个事件), on: [push, workflow_dispatch] - 多个事件
  • jobs 一个 Workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务
  • steps 每个 job 由多个 step 构成,它会从上至下依次执行
  • env 环境变量, secrets.NPM_TOKEN就是我们之前定义的secret

提交测试

我们修改一下项目的代码, 然后执行:

git add .
git commit -m ':new: your first commit'
git push

提交成功之后我们打开项目的 github action 面板:

image.png

可以看到代码线上构建的流程和状态, 是不是和我们在开发企业项目的自动化流程很像呢?

文章分享自微信公众号:
趣谈前端

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:徐小夕
原始发表时间:2021-09-19
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • dotnet 部署 github 的 Action 进行持续集成

    大概只需要 3 分钟就可以在 github 上通过 Action 部署持续集成,本文以 SourceYard 作为例子告诉大家如何配置

    林德熙
  • 【持续集成】Android使用Github Action自动打包并发布Fir.im内测

    GitHub Actions 是 GitHub 官方提供并免费提供给开源仓库使用的持续集成服务,在进入本文主题之前,先讲讲什么是持续集成 (CI/CD) 。

    宋天伦
  • 5 分钟教你快速掌握 GitHub Actions 自动发布 Npm 包和网站

    自从 GitHub 宣布 GitHub Actions 在平台上对所有开发人员和存储库可用以来,GitHub Actions 越来越受欢迎。很多第三方平台在生态...

    wscats
  • 还在手动部署jar包吗?快速掌握Jenkins安装,教你使用Jenkins实现持续交付

    Add post-build step:Send files or execute commands over SSH

    攻城狮Chova
  • 还在手动部署jar包吗?快速掌握Jekins安装,教你使用jekins的实现持续交付

    攻城狮Chova
  • 书单丨5本书感受In Action风格的技术魅力

    本书开始部分概要介绍了 Docker 和Kubernetes 的由来和发展,然后通过在 Kubernetes 中部署一个应用程序,一点点增加功能,逐步加深我们对...

    博文视点Broadview
  • 我写的那六本开源计算机书

    最近不在状态,不太状态,看到最近写的电子书又上GitHub Trending了,就发些以前写的以及还在写的书。 教你设计物联网系统 ? 这是由我的毕业设计延伸出...

    Phodal
  • Github Action 快速上手指南

    Github之前更新了一个Action功能(应该是很久以前了),可以实现很多自动化操作。用来替代用户自己设置的自动化脚本(比如:钩子+Jenkins)。

    蛮三刀酱
  • Github Action 快速上手指南

    Github之前更新了一个Action功能(应该是很久以前了),可以实现很多自动化操作。用来替代用户自己设置的自动化脚本(比如:钩子+Jenkins)。

    Rude3Knife的公众号
  • 基于react/vue生态的前端集成解决方案探索与总结

    接下来我将介绍项目的基本架构和设计思路,并使用shell脚本来实现自动化安装技术集成方案。最后会在文章的末尾附上github地址,感兴趣的朋友可以研究参考,也可...

    徐小夕
  • Github Action 快速上手指南

    Github之前更新了一个Action功能(应该是很久以前了),可以实现很多自动化操作。用来替代用户自己设置的自动化脚本(比如:钩子+Jenkins)。

    蛮三刀酱
  • Android学习之路

    子勰
  • 使用 CODING DevOps 部署 Serverless 应用

    2021年年初,使用 Serverless Framework  在腾讯云上部署了一个个人博客:serverlesslife.cn。

    donghui
  • 【译文】怎样学习R(上)

    有奖转发活动 回复“抽奖”参与《2015年数据分析/数据挖掘工具大调查》有奖活动。 ? 何品言翻译,广东科技学院大学生,喜欢R语言和数据科学。 王陆勤审核,从事...

    小莹莹
  • 敏捷无敌之Gitlab CI实战

    在目前快节奏生活已经成为社会风潮的大背景下,越来越多的互联网公司为了其应用产品能更快的掌控风向脉搏,抢占市场红利,需要更快速的应用产品开发上线,在市场的反馈下,...

    KaliArch
  • 接口测试 入门三讲

    我相信你一定听说过这样一句话:“测试要尽早介入,测试进行得越早,软件开发的成本就越低,就越能更好地保证软件质量。”但是如何尽早地进入测试,作为软件测试工程师的你...

    acc8226
  • 技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?

    测试管理平台是贯穿测试整个生命周期的工具集合,它主要解决的是测试过程中团队协作的问题。在整个测试过程中,需要对测试用例、Bug、代码、持续集成等等进行管理。下面...

    霍格沃兹测试开发
  • 这些常用测试平台,你们公司在用的是哪些呢?

    测试管理平台是贯穿测试整个生命周期的工具集合,它主要解决的是测试过程中团队协作的问题。在整个测试过程中,需要对测试用例、Bug、代码、持续集成等等进行管理。下面...

    霍格沃兹测试开发学社

扫码关注腾讯云开发者

领取腾讯云代金券