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

1、前言

做为一名前端菜鸡，服务器小白，刚开始在Linux服务器上部署网站时，前端代码我通常都是打包后手动FTP传上去，后端代码直接在vscode中使用SSH链接服务器，直接同步代码更改。

但小黑做为一个生命不息折腾不止的程序猿，确定要探索更好玩更高效的方法，因此此次，咱就上手折腾了下自动化部署方案

2、准备工做

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

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

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

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

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

二、添加部署秘钥

要把文件部署到远程服务器，首先要解决登陆校验的问题。

比较常见的就是密码登陆、SSH密钥登陆或者VNC登陆。小黑推荐使用SSH密钥登陆，既方便有安全。

2.一、生成SSH密钥对

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

2.二、GitHub填写自动化配置项

SSH密钥对生成后，其实准备工做就已经完成的差很少了，最后一步就是将YAML文件中所须要的配置项，配置到Github上

首先打开对应的仓库，点击Setting > Secrets > New sceret,而后将咱们复制的密钥文件内容、服务器host和登陆用户名都添加到配置以下图对应的配置中，这样的话即便像小黑同样把项目开源，隐私信息也不会泄露啦。

配置完上面这些，咱们的准备工做就大功告成了，接下来就能够编写工做流文件啦

3、配置过程

一、编写工做流文件

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

1.一、文件基础配置

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

on里的内容比较重要，指定自动触发工做流文件的事件，也能够将工做流设置为只在某些分支、路径或标记上运行。好比小黑就是在当master分支上进行push时才会触发,而后忽略掉README.md和LICENSE文件的变动

jobs里就是接下来所要运行的全部工做流程，小黑就设置了build-production这一个job,根据须要也能够设置多个

还有就是runs-on，小黑第一次还觉得是要填写本身云服务器的操做系统，就填了个centos,一跑就报错，后来看了文档才明白，这是配置用来运行job的GitHub托管的新虚拟机，和你所使用的操做系统及服务器系统无关，和小黑同样配置为ubuntu-latest就行

strategy中的node-version能够不配置,为了和本地node版本统一，小黑配置了一下

steps里就是所须要运行的每个具体的步骤啦,下面就让小黑一一道来

name: Blog CI/CD

on:

push:

branches:

- master # 只在master上push触发部署

paths-ignore: # 下列文件的变动不触发部署，能够自行添加

- README.md

- LICENSE

jobs:

build-production:

runs-on: ubuntu-latest # 使用ubuntu系统镜像运行自动化脚本(舒适提示：和你所使用的操做系统及服务器系统无关，我本地用的windows10,云服务器用的centos)

strategy: (可选)

matrix:

node-version: [12.x] # 配置所需node版本

steps: # 自动化步骤

……

1.二、下载代码

这一步就是检出你的仓库并下载里面的代码到runner中,actions/checkout@v2是官方本身造的轮子，直接拿来用就行

- uses: actions/checkout@v2 # 第一步，检出仓库副本

1.三、配置node版本(可选)

这一步就是安装node,轮子也是官方的，版本能够选填，使用npm进行打包(不须要打包的项目能够省略1.3——1.5了)

- name: Use Node.js ${{ matrix.node-version }}

uses: actions/setup-node@v1

with:

node-version: ${{ matrix.node-version }} #规定node.js版本(可不配置)

1.四、安装依赖

这一步就不用解释了吧

- name: Install dependencies # 第二步，安装依赖

run: npm install

1.五、打包代码

这里小黑用了--if-present标志来避免脚本未定义时出现非零退出的状况，亲测在目前项目中写不写都行，没必要纠结

- name: Build # 第三步，打包代码

run: npm run build --if-present

在部署服务器时小黑踩到了很大的坑，就是明明打包完成了，但就是不结束任务，进入下一步

都带薪如厕回来了居然尚未完成Build任务,这样小黑都没有烦躁也是多亏了和产品相爱相杀的磨练

换成yarn打包？失败+1

修改node版本？失败+2

……？？？？？？？失败+N

是可忍叔不可忍,叔可忍他婶子也不可忍了!

这是要逼小黑使出大杀招了！

面对疾风吧！

…%…（￥@*（￥@$(*$)

看我一顿操做猛如虎~

最后，在祭出三根宝贵的头发以后，终于让小黑找到了问题所在

我变秃了，也变强了！ ——— 小黑

特么的居然是打包后Node.js进程没有终止，平时直接手动Ctrl + C就顺便关了，根本没注意到这个问题！

暴风哭泣~

这时问题又来了，做为国服最菜前端，这webpack咱也只会个皮毛，观察模式也并无开启呀，百度谷歌一顿搜，文档咱也看了又看，分析来分析去，也不晓得是哪一个在占用Node.js进程，索性快刀斩乱麻，一行process.exit(0);直接乱杀！

push一下试试，果真Build任务成功完成，我特么真是个天才，奖励本身美味饲料一斤！

1.六、推送部署到服务器

打包成功，接下来就是激动人心的部署到服务器环节了，咱们这里依然使用别人造好的轮子

DEPLOY_KEY、SERVER_IP、USERNAME就是咱们刚开始在Github里配置好SSH私钥、主机名、登陆名，这里就再也不赘述

主要须要留意的就是FOLDER、和SERVER_DESTINATION，也就是咱们的推送文件夹及目标文件夹，这里必定要将路径写正确。

源码地址： rsync-deploy

- name: Deploy to Server # 第四步，rsync推送文件

uses: AEnterprise/rsync-deploy@v1.0 # 使用别人包装好的步骤镜像

env:

DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私钥

ARGS: -avz --delete --exclude='*.pyc' # rsync参数，排除.pyc文件

SERVER_PORT: '22' # SSH端口

FOLDER: ./build/* # 要推送的文件夹，路径相对于代码仓库的根目录

SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服务器的host名（IP或者域名domain.com）

USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服务器登陆名

SERVER_DESTINATION: /www/wwwroot/lmsworld.cn/ # 部署到目标文件夹

我这里是直接将build文件夹内文件替换到网站根目录的，会存在非同名文件没法替换的状况，原本打算先删除网站根目录文件夹再替换的，但考虑到会有打包失败或者部署失败的可能性，删除后网站会没法访问，遂暂时不用此方法，后续有时间再继续改进，写在此处仍是但愿大佬们多多指点迷津~

1.七、重启服务(视状况而定)

若是是仅仅是部署了前端代码的话，那有可能就不用重启服务了，若是要后端代码的话，就要从新启动服务了

能够在YAML配置文件里另加一个后端部署的job，使用need控制下工做流，而后就在script里依次写下服务器上运行的命令行便可，小黑是用node写的后台，仅供参考

- name: Restart server # 第五步，重启服务

uses: appleboy/ssh-action@master

with:

host: ${{ secrets.SSH_HOST }} # 下面三个配置与上一步相似

username: ${{ secrets.SSH_USERNAME }}

key: ${{ secrets.DEPLOY_KEY }}

# 重启的脚本，根据自身状况作相应改动，通常要作的是migrate数据库以及重启服务器

script: |

cd /www/server/web-server/

pm2 reload app.js

1.八、完整配置文件

贴一下完整的配置文件，根据本身的项目状况修改下配置就行，不能用的话能够给小黑留言

name: Blog CI/CD

on:

push:

branches:

- master # 只在master上push触发部署

paths-ignore: # 下列文件的变动不触发部署，能够自行添加

- README.md

- LICENSE

jobs:

build-production:

runs-on: ubuntu-latest # 使用ubuntu系统镜像运行自动化脚本(舒适提示：和你所使用的操做系统及服务器系统无关，我本地用的windows10,云服务器用的centos)

strategy:

matrix:

node-version: [12.x] # 配置所需node版本

steps: # 自动化步骤

- uses: actions/checkout@v2 # 第一步，检出仓库副本

- name: Use Node.js ${{ matrix.node-version }} #规定node.js版本(可不配置)

uses: actions/setup-node@v1

with:

node-version: ${{ matrix.node-version }}

- name: Install dependencies # 第二步，安装依赖

run: npm install

- name: Build # 第三步，打包代码

run: npm run build --if-present

- name: Deploy to Server # 第四步，rsync推送文件

uses: AEnterprise/rsync-deploy@v1.0 # 使用别人包装好的步骤镜像

env:

DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私钥

ARGS: -avz --delete --exclude='*.pyc' # rsync参数，排除.pyc文件

SERVER_PORT: '22' # SSH端口

FOLDER: ./build/* # 要推送的文件夹，路径相对于代码仓库的根目录

SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服务器的host名（IP或者域名domain.com）

USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服务器登陆名

SERVER_DESTINATION: /www/wwwroot/lmsworld.cn/ # 部署到目标文件夹

# - name: Restart server # 第五步，重启服务

# uses: appleboy/ssh-action@master

# with:

# host: ${{ secrets.SSH_HOST }} # 下面三个配置与上一步相似

# username: ${{ secrets.SSH_USERNAME }}

# key: ${{ secrets.DEPLOY_KEY }}

# # 重启的脚本，根据自身状况作相应改动，通常要作的是migrate数据库以及重启服务器

# script: |

# cd /www/server/web-server/

# pm2 reload app.js

二、最终效果

小黑火烧眉毛的将配置文件修改后push到仓库，此次工做流跑的行云流水，啥错都没报，简直完美！

在这个面板里你能够看到具体每一步任务的耗时与输出信息，报错信息也可在这里查询哦

最后若是你是部署到腾讯云、阿里云等云服务平台的话，通常会收到一条安全警告通知，好比小黑用的就是腾讯云

存在来自ip:40.122.43.158的异常登陆，这ip是谁的，让小黑查一下

Microsoft数据中心？应该就是github服务器的ip了，问题不大，这里就先无论他了，后续我们再找方法解决它

4、待优化部分

小黑最近工做太忙，只是先简单实现了自动化部署功能，可是还没来得及进行优化，先留个坑，后续再更

一、缓存依赖加快工做流

GitHub文档-缓存的依赖关系

二、COS 优化部署

GitHub Actions + COS 优化部署

5、参考

因为小黑见识浅薄、水平有限，所写内容确定有不少不足之处，还请各位大佬不吝赐教，十分感激！

如下文档、博客给了小黑极大的帮助，在此表示炒鸡感谢！

一、 GitHub Actions文档

二、How to deploy a create-react-app with github-actions

三、使用 GitHub Actions 实现博客自动化部署