Github Action实现CICD(简易版)

前言

CI/CD(Continuous Integration and Continuous Delivery)即指持续集成与持续交付。它是一种软件开发流程和方法论,旨在通过自动化和频繁的代码集成、构建、测试和部署,实现快速、可靠的软件交付。实现的方式有很多比如gitlab、Jenkins、docker、k8s 。本文要手把手带大家实现最简单的方式Github Actions。本文部署的是React的项目,大致思路与是PR触发Github Actions,先安装项目依赖环境,再执行Build,最后使用Rcync同步打包后的文件到服务器指定路径中。

workflows文件创建

在项目根目录下创建./github/workflows/main.yml文件。并将下面的yml内容粘进去。on是监听触发事件,我这里使用的PR触发方式,你可以改成push指定分支触发。jobs是一系列的任务流,可以根据你的需求更改,因为的项目使用了pnpm维护,所以需要执行npm install -g pnpm,没有test程序则可以跳过。

yml 复制代码
name:
  FileMaster frontend 生产环境部署
# 监听 dev 分支上的 push 事件
# on:
#   push:
#     branches:
#       - dev
# 监听 main 分支上的 pull_request 事件
on:
  pull_request:
    types:
      - closed
# 分支合并后后执行一系列的任务
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install node.js
        # 使用action库  actions/setup-node安装node
        uses: actions/setup-node@main
        with:
          node-version: lts/*

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        run: pnpm i

      # 暂时没有编写test程序,可跳过
      # - name: Test
      #   run: pnpm test

      - name: Build
        run: pnpm build

      - name: Deploy to server
        # 使用ssh-deploy@v2.2.5版本更加稳定
        uses: easingthemes/ssh-deploy@main
        env:
          # 私钥
          SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
          # SCP参数
          ARGS: '-avzr --delete'
          # 源目录
          SOURCE: 'dist/'
          # 服务器ip
          REMOTE_HOST: ${{ secrets.REMOTE_TXHOST }}
          # 用户
          REMOTE_USER: 'user'
          # 目标地址
          TARGET: '/www/wwwroot/cd.mileschen.cn'

Deploy to server

Deploy to server这步是使用Rcync工具同步打包后的文件到服务器指定路径去。 相关的参数详细解释:

  • SSH_PRIVATE_KEY:SSH连接的私钥,这里使用secrets的方式传入
  • ARGS:是Rcync工具的参数
  • SOURCE:打包后的目录
  • REMOTE_HOST:服务器IP,这里使用secrets的方式传入
  • TARGET:上传到服务器存放的路径

SSH_PRIVATE_KEY

  1. 先在服务器执行ssh-keygen生成 ssh 公钥、私钥对。
  2. 查看公钥 cat ~/.ssh/id_rsa.pub 内容,将内容添加到云服务器的 ~/.ssh/authorized_keys 文件中,可以使用vim ~/.ssh/authorized_keys 编辑,然后将公钥粘贴进去。
  3. service sshd restart重启SSH服务器。
  4. 查看私钥 cat ~/.ssh/id_rsa 内容,设置到 github secrets 变量 PRIVATE_KEY 中。 一定要注意这里有个换行

REMOTE_HOST

服务器IP,注意这里没有换行

问题总结

rsync exited with code 127

看似是服务器或者git action容器没装rsync。其实不是。出现这种情是IP的问题,上面的IP的填写不要加空行。新建secret时秘钥要加空行,其他参数则不用加。

rsync exited with code 255

原因分析:git action的权限不够,无法ssh登录服务器;authorized_keys文件的作用是配置服务器允许哪些客户端使用密钥进行身份验证。每个公钥都需要在该文件中有相应的条目才能成功进行身份验证。

解决办法:大概率是服务生成秘钥后没有安装公钥,参考上一节的第二、三步,将生成的公钥写入到authorized_keys文件中。

rsync exited with code 23

原因分析:.user.ini文件无权删除,git action需要删除这个问题,但权限不够 解决办法:在服务器删除该文件或修改它的权限为777

成功CICD

Action完成没有出现错误,能够在服务器对应目录下找到同步文件。

总结

Github Actions还有很多有趣的用途等待你去探索,比如push实现灯打开、发送微信、拨打电话等究极操作。


如果对您有帮助,麻烦点赞收藏,让更多踩坑的人看见,有任何疑问和想法,欢迎在评论区与我交流。

相关推荐
mldong3 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排3 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60614 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角5 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!5 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰5 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi7 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen7 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马8 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒8 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端