2023-09-13
前端工程化
00
请注意,本文编写于 118 天前,最后修改于 35 天前,其中某些信息可能已经过时。

目录

服务器准备工作
通过nvm安装node
科学上网
ssh免密登陆
GithubActions功能简介
完整案例

CI(Continuous Integration)持续集成和CD(Continuous Delivery)持续交付,CD还有一种称谓:持续部署。

它的理念:让开发人员更加专注于业务代码的开发,通过自动化流程完成代码单元测试、集成测试、合并、打包、部署等流程。

合理全面的CI/CD,自动化研发流程,提高研发效率,增加系统稳定性

我了解的关于前端CICD流程方案有3种

  1. pm2 它不仅可以执行本地命令,还可以连接服务器、执行命令、监控项目等
  2. Github Actions
  3. Travis CI

CICD流程的搭建需要先了解linux shell脚本、npm、机票、ssh免密登陆相关知识。

其实Github Actions配置很简单,关键配置前的准备工作

  1. 服务器要实现准备好node环境git环境
  2. 本地生成公私钥并开启ssh代理
  3. github配置公钥,这样可以免密拉取代码
  4. 服务器也要生成公私钥,并在github 配置公钥,这样在服务器上可以执行git相关命令时免密操作。在讲解Github ActionsCICD方案

本文将依次讲解上述内容,然后再带你配置Github Actions,打通CICD流程

服务器准备工作

由于我选择的腾讯云ubuntu系统默认已经安装了git环境,我就不折腾了。

但是node版本太旧了,我决定使用nvm安装到16版本

通过nvm安装node

nvm 的安装 官方文档
第一步 让我下载脚本并执行即完成安装curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
第二步 配置环境变量

  • vi ~/.bashrc 增加以下内容
bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

使配置生效souce .bashrc
然后执行 nvm install 16 && nvm use 16 image.png

考虑我的服务器配置很低(硬盘空间少),且后面再服务器打包,我采用pnpm包管理器 安装很简单,一个命令搞定npm install -g pnpm

但是没有那么顺利 curl 下载文件需要机票, 我想到了 clash这个代理工具和 speed17.com这个机场

科学上网

第一步先要下载clash这个代理工具, 按照这篇教程 在github找到对应的版本通过wget命令下载

bash
wget -O clash.gz https://github.com/Dreamacro/clash/releases/download/v1.18.0/clash-linux-amd64-v1.18.0.gz

下载这个文件同样需要机票😂 ,我是在本地电脑下载,然后通过scp命令上传到服务器

第二步下载clash的配置文件,也就是机票,我以前买过了,按照放心云的教程 点击linux文档,我下载了clash.yaml, 与之前的clash放在同一个目录,

然后执行 ./clash -f clash.yaml & 后台启动服务

如果想关闭 可以通过 lsof -i查询到进程id, 然后kill -9杀死集成,它的默认端口是7890

image.png

image.png

第三步是命令行开启代理 export ALL_PROXY=socks5://127.0.0.1:7890
可以通过curl -vv https://www.google.com 验证机票是否有效

注意该export命令只在当前窗口有效,如果你要永久有效可以写入.bashrc文件

机票有了, 第一步的nvm安装才能顺利进行。

补充: clash官方文档

ssh免密登陆

关于免密登陆参考我的这篇文章, 这里就不重复写了

我这里已经配置好了

image.png

本地拉去代码服务器拉去代码都正常

image.png

补充个小知识点,由于我骚操作 修改了home目录权限,导致ssh免密登陆失效,参考 ssh免密登陆失败原因 解决了

这里先说一下我的思路,先梳理总总总结 GithubActions 最常用和基本功能,然后写一个相对完善的CICD案例。

GithubActions功能简介

  1. 持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions
  2. 这些操作在不同项目很类似,GitHub 注意到了这一点,让actions之间可以相互集成
    • 官方市场 awesome actions 的仓库
    • actions基本使用
    • actions/setup-node@74bc508 # 指向一个 commit
    • actions/setup-node@v1.0 # 指向一个标签
    • actions/setup-node@master # 指向一个分支
  3. 基本概念
    • workflow (工作流程):持续集成一次运行的过程,就是一个 workflow
    • job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。
    • step(步骤):每个 job 由多个 step 构成,一步步完成。
    • action (动作):每个 step 可以依次执行一个或多个命令(action

来看一个案例

yml
name: test # 任务名称, 不写取配置文件名称 # on什么时候触发 # 当往main分支push代码的时候触发。 # paths表示限定为哪里内容改动触发,里面是glob语法 on: push: branches: - main paths: - '.github/workflows/**' - '__test__/**' - 'src/**' jobs: # 定义任务 test: # 定义名为test的任务 runs-on: ubuntu-latest # 改任务的运行环境 steps: # 任务包含一组action,以"-"开头的就是一个任务 - name: Use Node.js # 任务名称 uses: actions/setup-node@v1 # 继承别人写好的action with: # 使用该action所需参数 node-version: 14 - name: lint and test # run 定义要执行的脚本 run: | npm i npm run lint npm run test:remote
  1. workflow 文件
    GitHub Actions 的配置文件叫做 workflow 文件,存放在代码仓库的.github/workflows目录。
    workflow 文件采用 YAML 格式
    关于YAML 格式相比JSON格式来说更简洁(使用锁进表示层级)和强大(可以设置锚点、引入、拍平数据、组合效果),更多关于yaml参考这里

workflow的常用配置字段

  • on 触发的条件,通常是某些条件 如pushpull_request 也支持外部事件和定时任务,更多参考官方文档
  • on.<push|pull_request>.<tags|branches> 限定事件触发的条件,是分支或标签
  • jobs.<job_id> 定义事件默认并行 可通过needs表示依赖关系,如实现串行 来看一个jobs串行示例
yml
jobs: job1: job2: needs: job1 job3: needs: [job1, job2]
  • jobs.<job_id>.runs-on 限定运行环境
  • jobs.<job_id>.steps 定义jobs的运行步骤,来看个示例
yml
jobs: my-job: name: My Job # 事件名称 runs-on: ubuntu-latest # 限定运行环境 steps: # 运行步骤 有 name env run 三个字段 - name: Print a greeting # 步骤名称,打印使用 env: # 定义变量 MY_VAR: Hi there! My name is FIRST_NAME: Mona MIDDLE_NAME: The LAST_NAME: Octocat run: | # 运行脚本 |表示多行文本 echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.

考虑到服务器IP、账号、密码相关私密信息,github提供配置界面,配置以后不显示value,只能覆盖或删除。如下图我的配置

image.png

workflow文件的模版可以在github上生成

你可以把我这段内容放进去,文件名随意,我取名ci.yml

  • ci.yml
yml
name: test ssh command on: push: branches: - main jobs: build: name: Build runs-on: ubuntu-latest steps: - name: executing remote ssh commands using password uses: appleboy/ssh-action@v1.0.0 with: host: ${{ secrets.HOST }} username: ${{ secrets.USERNAME }} password: ${{ secrets.PASSWORD }} port: ${{ secrets.PORT }} script: cd /home/ubuntu/github && echo hello >> b.txt

上述代码 就登录了一下我的服务器,往b.txt文件(没有会创建)追加写入hello字符串
appleboy/ssh-action是别人写好的一个action 通过ssh连接服务器的。

当你pushmain分支时候已经触发workflow任务执行, 我的执行结果如下

image.png

现在我去登录一下我的服务器看看

image.png

scipt脚本是可以定制的,如执行git pullpnpm installnpm run build、发布、发送邮件通知等等,至此恭喜你已完成Github Actions的入门

完整案例

我这边准备了一个小项目 CICD-demo

点击这里可以看一下我实现的效果

我的workflow配置如下

  • ci.yml
yml
name: test ssh command on: push: branches: - main paths: - '.github/workflows/**' - 'tests/**' - 'src/**' - 'config/**' jobs: build: name: Build runs-on: ubuntu-latest steps: - name: executing remote ssh commands using password uses: appleboy/ssh-action@v1.0.0 with: host: ${{ secrets.HOST }} username: ${{ secrets.USERNAME }} password: ${{ secrets.PASSWORD }} port: ${{ secrets.PORT }} script: | cd /home/ubuntu/github/CICD-demo && git pull && pnpm i && npm run build && cp -r ./dist/* /home/ubuntu/myDockerFiles/nginx/html/static/CICD-demo

补充: 关于demo中功能 请看我的另一片文章前端代码规范

本文作者:郭敬文

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!