使用GitHub Actions实现前端自动化打包、部署

一、前言

作为一名前端菜鸡，服务器小白，刚开始在Linux服务器上部署网站时，前端代码我一般都是打包后手动FTP传上去，后端代码直接在vscode中使用SSH连接服务器，直接同步代码更改。
但小黑作为一个生命不息折腾不止的程序猿，肯定要探索更好玩更高效的方法，所以这次，咱就上手折腾了下自动化部署方案

二、准备工作

1、持续集成服务（CI）方案选择

实现代码提交的自动化工作流，要依靠持续集成（CI）（或者加上持续交付(CD)）服务。现在主流的公用免费的持续集成服务有：

• Travis CI
• Jenkins
• Circle CI
• Azure Pipeline
• GitHub Actions

其中GitHub Actions是GitHub自家的持续集成及自动化工作流服务，简单易用，也是小黑本次使用的服务。它使用起来非常简单，只要在你的仓库根目录建立.github/workflows文件夹，将你的工作流配置(YAML文件)放到这个目录下，就能启用GitHub Actions服务。

小黑的网站是部署到腾讯云服务器上的，所以配置过程中用到了服务器相关配置，如果是想把网站放到GitHub Pages上，那只需要有个Github仓库就可以开始折腾起来了，下文关于远程服务器的配置可以忽略掉。

2、添加部署秘钥

要把文件部署到远程服务器，首先要解决登录校验的问题。
比较常见的就是密码登录、SSH密钥登录或者VNC登录。小黑推荐使用SSH密钥登录，既方便有安全。

2.1、生成SSH密钥对

相信需要远程部署到服务器的小伙伴肯定早就把SSH密钥对配置好了，所以我们可以直接对应的私钥文件内容复制一下，等下在GitHub中进行配置就可以啦！这里小黑就不再赘述啦

2.2、GitHub填写自动化配置项

SSH密钥对生成后，其实准备工作就已经完成的差不多了，最后一步就是将YAML文件中所需要的配置项，配置到Github上
首先打开对应的仓库，点击Setting > Secrets > New sceret,然后将我们复制的密钥文件内容、服务器host和登录用户名都添加到配置如下图对应的配置中，这样的话即使像小黑一样把项目开源，隐私信息也不会泄露啦。

配置完上面这些，我们的准备工作就大功告成了，接下来就可以编写工作流文件啦

三、配置过程

1、编写工作流文件

在仓库根目录中创建.github/workflows文件夹，再创建一个YAML文件，文件名自定，我这里起名叫deploy.yml，所以文件的完整路径应该为.github/workflows/deploy.yml，配置的意义写在注释中啦，当然小黑也会简略的介绍下重点配置项

1.1、文件基础配置

首先就是YAML文件比较基础的配置

on