GitHub Actions
GitHub Actions 是一个持续集成 (Continuous integration)和持续交付 (Continuous delivery)的平台，它可以做到自动化构建、测试、部署。你可以创建工作流，构建和测试每一个 pull request 或者部署合并后的代码到生产环境。 GitHub Actions 可以在你的代码仓库发生某个事件时运行一个工作流。举个例子，当有人给你的代码仓库新建了一个 issue，你可以跑一个工作流自动的添加合适的标签。 GitHub 提供了 Linux、Windows、和 macOS 虚拟机运行你的工作流，当然你也可以自定义运行环境。
Workflows（工作流）
工作流是一个可配置的自动化的程序。创建一个工作流，你需要定义一个 YAML 文件，当你的仓库触发某个事件的时候，工作流就会运行，当然也可以手动触发，或者定义一个时间表。 一个仓库可以创建多个工作流，每一个都执行不同的步骤，举个例子，一个工作流用于构建和测试 pull request，一个用于部署你的应用，再来一个，当有人新建 issue 的时候自动添加一个标签。 你也可以在一个工作流中引用另外一个工作流，查看 「可复用工作流」
事件（Events）
事件是指仓库触发运行工作流的具体的行为，比如创建一个 pull request，新建一个 issue、或者推送一个 commit。你也可以使用时间表触发一个工作流，或者通过请求一个 REST API，再或者手动触发。「触发工作流的事件」
任务（Jobs）
事件是指仓库触发运行工作流的具体的行为，比如创建一个 pull request，新建一个 issue、或者推送一个 commit。你也可以使用时间表触发一个工作流，或者通过请求一个 REST API，再或者手动触发。
动作（Actions）
动作是 GitHub Actions 平台的一个自定义的应用，它会执行一个复杂但是需要频繁重复的作业。使用动作可以减少重复代码。比如一个 action 可以实现从 GitHub 拉取你的 git 仓库，为你的构建环境创建合适的工具链等。 你可以写自己的动作 ，或者在 GitHub 市场找已经实现好的动作
运行器（Runners）
一个运行器是一个可以运行工作流的服务。每一个运行器一次只运行一个单独的任务。GitHub 提供 Ubuntu Linux，Microsoft Windows 和 macOS 运行器，每一个工作流都运行在一个独立新建的虚拟机中。如果你需要一个不同的操作系统，你可以自定义运行器。请查看「自定义运行器」。
开始：部署自己的前端项目
1、选择 Github 项目仓库
这里我用脚手架创建了一个vue3项目，进入项目仓库，可以看到对应的 Actions 标签，点击进入。
2、新建工作流，配置 Actions
进入 Actions 后可以看到很多推荐的工作流模版，这里可以根据需要自行选择需要的模版，或者跳过模版，自行设置。 这里我选择自行设置！
这里可以选择在线编辑，不过俺觉得网页编辑器不好用所以 点击start commit，自动插入一条commit 记录。 你的工作流文件在仓库中就创建好了，本地仓库执行 git pull 拉取代码 回到我们熟悉的vscode！！！
3、回到本地仓库
1.修改 .github/workflows/main.yml 文件如下
name: GitHub Actions Build and Deploy Demo # 工作流名称
on:
push: # 触发方式
branches:
- master # 触发分支
jobs: # 任务：一组步骤，按顺序执行且彼此独立
build-and-deploy:
runs-on: ubuntu-latest # 运行工作流的服务，这里我选择的是ubuntu
steps: # 步骤
- name: Checkout
uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Cache node modules # 缓存node modules加快构建速度
uses: actions/cache@v2
env:
cache-name: cache-node-modules
with:
# npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.yarn
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn-lock.json') }}
restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}-
${{ runner.os }}-build-
${{ runner.os }}-
- name: Install and Build # 拉取依赖，生成dist目录
run: |
yarn
yarn run build
- name: Deploy # 把dist目录下的文件发送到你的服务器指定目录下
uses: cross-the-world/scp-pipeline@master
env:
WELCOME: "ssh scp ssh pipelines"
LASTSSH: "Doing something after copying"
with:
host: ${{ secrets.TG_HOST }}
user: ${{ secrets.TG_USER }}
pass: ${{ secrets.TG_PASS }}
connect_timeout: 30s
local: './dist/*'
remote: /data/nginx/html
# 发送邮件
- name: Send mail ✉️
uses: dawidd6/action-send-mail@v2
with:
server_address: smtp.163.com
# smtp 服务器端口
server_port: 465
username: ${{secrets.MAIL_USERNAME}}
password: ${{secrets.MAIL_PASSWORD}}
subject: 构建通知
body: Build job of ${{github.repository}} completed ${{job.status}} ${{github.actor}}!
to: 805446529@qq.com
from: taozhi1010@163.com
content_type: text/html
convert_markdown: true
4、Actions secrets 密钥
如果是public repo,为了保护隐私，就需要借助GitHub的Secrets,以变量的方式访问build.yml文件内容； 如下所示：
secrets 使用方式：
- main.yml 中通过环境变量 secrets 获取
- 如 ${{secrets.MAIL_USERNAME}}
如果您的项目为private repo,可以直接将host/port/user/pass等变量值设置为明文；
Done
如上完成了一个相对简单的基于github actions的CI/CD;我们可以通过触发main分支的push事件，来测试打包以后的文件是否部署到服务器指定目录；
查看执行action结果
写在最后
地址已在「Github」，点个Star给我增加动力~
