前言-学以致用
之前始终忙于开发，总是零散的去看一些货色，想想学货色了么？额... 如同学了，又如同没有学，不晓得你们有没有这种感觉，所以新年初始，换一种学习办法，本着学以致用去残缺的学一些货色，正好之前想接触CI,CD 这里的常识，所以就从最常见的github开始吧，毕竟收费又罕用。
初始化我的项目
创立github代码仓库，clone 我的项目到本地，进入目录初始化我的项目
npx create-react-app而后依照命令提醒输出实现初始化,推送我的项目到github。
配置github actions
指标是实现推送代码到master分支, 主动开始构建我的项目，部署到Gthub Pages。
依照文档先跑起来第一个流程，让本人看到成果，在去学习语法内容，这样更能激发趣味，省得间接看文档看睡着了...
- 在目录外层减少 .gihub/workflows文件夹，创立第一个first-demo.yml文件，拷贝示例内容.
name: GitHub Actions Demoon: [push]jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo " The job was automatically triggered by a ${{ github.event_name }} event." - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!" - run: echo " The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}." - name: Check out repository code uses: actions/checkout@v2 - run: echo " The ${{ github.repository }} repository has been cloned to the runner." - run: echo "️ The workflow is now ready to test your code on the runner." - name: List files in the repository run: | ls ${{ github.workspace }} - run: echo " This job's status is ${{ job.status }}."- 提交代码，点击gihub仓库上方的Actions按钮，查看成果，第一个工作流程就实现了。
开始编写本人的yml文件,实现主动构建
疾速过一遍文档，学习一下语法，实现本人想要的工作流程。从demo能够看到次要有流程有这么几步
- name 工作流程的名称。 GitHub 在仓库的操作页面上显示工作流程的名称。
- on 触发流程的事件，具体能够触发的事件有这些,咱们所要实现的是提交代码，所以用 push.
- jobs 要按程序运行作业.
指标明确后，开始编写yml
# 显示得workflow名称 name: First GitHub Actions Demo on: # 推送到master分支开始打包 push: branches: - master jobs: # 开始打包 Build: runs-on: ubuntu-latest steps: - name: checkout code # 迁出触发的流程的版本 能让上面的工作流程拜访 uses: actions/checkout@v2 # setup-node 能够提供node环境，指定node版本以及 npm /yarn缓存 - name: actions/setup-node@v2 uses: actions/setup-node@v2 with: node: 16.14 # 初始用的npm 打包工夫太长了，就想着用yarn 后果没认真看文档，yarn 不必装置 ubuntu 下面有的 # - name: install yarn # uses: npm install yarn # - run: yarn install # - run: yarn build # 简写为 - run: yarn install && yarn build好了提交代码看Actions（这是下面没有优化时的流程）。
到此曾经实现了提交代码主动打包的过程了，然而一看打包工夫好家伙一分半，这要是理论开发大量依赖退出，那不得半个小时么？关上流程一看大部分工夫都是在下载依赖，所以是不是能够增加缓存呢？一搜寻果然有cache,麻溜的依照文档增加进入，
一看工夫46s,哈哈果然无效。到此yml内容为
name: First GitHub Actions Demoon: push: branches: - masterjobs: Build: runs-on: ubuntu-latest steps: - name: checkout code uses: actions/checkout@v2 - name: actions/setup-node@v2 uses: actions/setup-node@v2 with: node: 16.14 # 配置依赖缓存 - name: yarn cache id: yarn-cahce-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - uses: actions/cache@v2 id: yarn-cache with: path: ${{ steps.yarn-cahce-dir-path.outputs.dir }} key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} restore-keys: | ${{ runner.os }}-yarn- - run: yarn install && yarn build部署页面到Github Pages
- 首先须要设定一个分支，当做站点的根目录，具体设置文档，设置实现后会通知你网站拜访地址（ps: 肯定要把仓库设置为Public,不然无奈进行设置）。
- 依照文档编辑.yml,减少公布流程
# 下面的步骤拿过去 # 新增 deploy - name: deploy uses: JamesIves/github-pages-deploy-action@v4.2.3 with: branch: gh-pages # 部署的分支名 有肯定要独立一个分支，第一次设置为master 好家伙构建实现后，间接把我的我的项目文件革除了，只剩下打包的文件了。 folder: build # build后文件目录成果
到这里根本的指标曾经实现了，然而当我看公司外部的流程时，install, build, deploy流程是离开的，这样有利于减少一些校验，lint规定等流程，所以我在思考怎么拆分流程呢，第一次我简略的拆分
name: First GitHub Actions Demoon: push: branches: - master - devjobs: Build: runs-on: ubuntu-latest steps: uses: actions/checkout@v2 uses: actions/setup-node@v2 with: node: 16.14 - name: yarn cache id: yarn-cahce-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - uses: actions/cache@v2 id: yarn-cache with: path: ${{ steps.yarn-cahce-dir-path.outputs.dir }} key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} restore-keys: | ${{ runner.os }}-yarn- - run: yarn install - run: yarn build Deploy: - name: depploy uses: JamesIves/github-pages-deploy-action@v4.2.3 width: branch: gh-pages folder: build clean: true clean-exclude: | special-file.txt some/*.txt ssh-key: ${{ secrets.PAGE_ACCESS_TOKEN }} 我想着这样应该就能够了，一提交代码间接GG,第一是没有Deploy没有期待build实现，第二是两个job之间的文件不可能间接用，又翻了下文档才发现官网给了这两个 actions/upload-artifact@v2 actions/download-artifact@v2 能够在不同job之间专用文件，所以又改了改,build阶段上传打包好的文件，deploy阶段下载打包好的文件进行部署（留神deploy也要应用checkout@v2）。
最终后果
name: First GitHub Actions Demoon: push: branches: - master - devjobs: Build: runs-on: ubuntu-latest steps: # 步骤名称 - name: checkout code uses: actions/checkout@v2 - name: actions/setup-node@v2 uses: actions/setup-node@v2 with: node-version: '16.14' cache: 'yarn' cache-dependency-path: '**/yarn.lock' # 缓存 有须要能够开启 同时 setu node 也能够进行缓存 # - name: yarn cache # id: yarn-cahce-dir-path # run: echo "::set-output name=dir::$(yarn cache dir)" # - uses: actions/cache@v2 # id: yarn-cache # with: # path: ${{ steps.yarn-cahce-dir-path.outputs.dir }} # key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} # restore-keys: | # ${{ runner.os }}-yarn- - run: yarn install && yarn build # 上传打包好的文件，所以下一步能够应用 - name: upload files uses: actions/upload-artifact@v2 with: name: build-pages path: build retention-days: 1 Deploy: needs: Build # 确保build 阶段实现 runs-on: ubuntu-latest steps: - name: checkout code uses: actions/checkout@v2 - name: download build files uses: actions/download-artifact@v2 with: name: build-pages path: build - name: deploy uses: JamesIves/github-pages-deploy-action@v4.2.3 with: branch: gh-pages folder: build token: "${{ secrets.DEPLOY_TOKEN }}" 提交代码，查看运行后果，实现拆分。
到这里能够欢快的拜访你的网站了。
结尾
写作思路是依照过后实现的思路一步一步的去实现这个流程来的，所以有些性能可能还没想到，同时如果流程有什么能够优化的中央，欢送各位大佬指教。当然，残缺的流程还欠缺很多，目前只是先实现简略的打包构建流程，接下来还须要去学习gitlab 的CI、CD,实现后会在水一篇文章。在之后才会去看一些部署我的项目相干的内容。比方Docker,Nginx等，心愿能在闲暇之余学会整个流程。加油！