前端CI/CD 最低成本方案 github Actions

想要实现CI/CD这个流程，首先需要准备好阿里云服务器、前端项目。

1. 在我们的前段项目里面增加.github 文件，在这个文件里面建立workflows文件夹，再建立自己的自动化配置文件yml结尾，我这里的文件结构是:

.github/workflows/cicd.yml

2. 配置我们的自动化脚本

name: CI
# 这里表示当主干分支main 进行push操作后触发自动化流程
on:
  push:
    branches: 
      - main
jobs:
  CI:
    runs-on: ubuntu-latest
    steps:
      # 检出当前仓库的源代码
      - name: Checkout repository
        uses: actions/checkout@v2
      # 设置node环境
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          # vite 需要在node>=12 的环境下执行
          # puppeteer 需要在node>=14.1.0 的环境下执行
          node-version: '16.x'
          # 下载pnpm
      # 执行package.json里面的脚本
      - name: Install pnpm
        run:
          npm install -g pnpm
      # 确保 pnpm-lock.yaml 与 package.json 保持同步。
      - name: Install dependencies
        run: pnpm install --no-frozen-lockfile
      - name: Installing Dependencies
        run: pnpm install
      - name: Running Lint
        run: pnpm run build
      # 使用 easingthemes/ssh-deploy 动作
      - name: Deploy to Staging My server
        uses: easingthemes/ssh-deploy@v2.1.6
        env:
          #私钥
          SSH_PRIVATE_KEY: ${{ secrets.ID_RSA_PUB }}
          # `ARGS` 是用于指定传递给 `rsync` 命令的参数的环境变量
          ARGS: '-rltgoDzvO'
          # 上传的文件
          SOURCE: 'dist'
          REMOTE_HOST: ${{ secrets.TASK_IP }} #服务器ip
          REMOTE_USER: 'root' # 服务器名称
          # 需要放到服务器的地址
          TARGET: '/usr/local/react/'
          # 排除/node_modules/文件夹
          EXCLUDE: '/node_modules/'

这个脚本里面的secrets需要到github对应项目里面去设置

然后新增secrets key

把创建好的key放到写入脚本对应位置即可，例如上面的

SSH_PRIVATE_KEY: ${{ secrets.ID_RSA_PUB }}

3.上面的SSH_PRIVATE_KEY需要到 阿里云服务器生成密钥 进入阿里云服务器终端在命令行输入

ssh-keygen -t rsa -C "youmail@gmail.com"

后面就是一顿enter键，生成之后命令行输入cat ~/.ssh/id_rsa，进行查看，并进行复制，放到gihut actions 里面去，就是上面截图的位置

cat ~/.ssh/id_rsa

最后

在对应分支代码进行push操作就能看到自动化运行的情况，如果出现权限不足情况可以参考解决方法