0%

使用 GitHub Actions 部署 vue 项目到 GitHub

这两天在尝试使用 GitHub Actions 自动将同学们合并的代码部署到 GitHub Pages 上,踩了不少坑,分享一下。

什么是 GitHub Actions

这是GitHub正式推出不到一年的新功能,用于持续集成(CI)。例如运行测试,部署到服务器中等操作。这是一个你可以完全自定义,也可以借助前人的成果的工作流程。

关于使用

具体的使用方法可以点击这里查看GitHub的官方文档,清晰明了也简单。我的测试项目放在我的GitHub仓库中。这里简单介绍几个参数:

name

GitHub Actions 的配置文件叫做 workflow 文件,存放在代码仓库的.github/workflows目录。name就是workflow的名称,如果不配置就默认文件名

on

这里指定触发workflow的条件,pull request,push之类,如果有多个的话使用[ ]括起来。不只有代码库中会发生的事,甚至可以有外部事件,还可以有定时运行,具体见文档

jobs..name

这是主体,表示要执行的一项或多项任务。

1
2
3
4
5
jobs
firstJob:
name:first job
secondJob:
name:second job

这里的name是任务的说明,会在actions的详情中显示。你还可以使用needs参数来指定依赖关系,例如

1
2
3
4
5
6
jobs:
job1:
job2:
needs: job1
job3:
needs: [job1, job2]

在这里,job2必须等待job1完成,job3需要等待其他两个都完成。

jobs..runs-on

runs-on参数运行需要的虚拟机环境,目前有三个可用:

  • ubuntu-latest
  • windows-latest
  • macOS-latest

在设置的时候一定要注意自己引用的actions有没有规定的环境。

jobs..steps

steps字段指定的是运行步骤,可以有多个。

1
2
3
jobs.<job_id>.steps.name:步骤名称
jobs.<job_id>.steps.run:该步骤运行的命令或者引用的action
jobs.<job_id>.steps.env:该步骤所需的环境变量

上面就是简单的参数,如果想要详细了解还是要看官方给的文档。

踩坑

  • 大部分脚本需要你生成一个token来进行验证,这里建议将token加入到仓库的secrets中再进行调用,能很好的避免产生安全性问题。这也是官方文档所建议的。

  • 对同样想这么做的人说:在merge之前想进行打包发布是不现实的。你只能在merge之后才能进行打包发布,所以我建议将actions的对象设置为push即可,因为pull request 是永远会失败的。

  • 善于利用轮子,官方市场有不少好用的轮子可以拿来借用。

    最后

    这次使用actions给我的感觉是十分震撼的。以前一直只是听说过。是从winget的提交软件包的流程才第一次接触到他,算是很晚的了。当时由于格式错误提交了好多遍,也点进去看了详细情况,感觉十分神奇。这次体验之后算是揭开了一点神秘面纱,大致对他有了了解。

工作流程在变得越来越简便,借助前人的成果,现在只需要短短的十几行代码就能做到自动部署一个项目,令人震惊的现在的开发流程已经能够如此的舒适,令人着迷。

-------------本文结束感谢您的阅读-------------