如何优雅实现自动化部署

前言

前几天完成了用VuePress进行本地化博客网站搭建,今天介绍如何使用自动化部署项目到Github Pages上。

本文介绍两种自动化部署方法，一种是用sh脚本自动化部署，另外一种使用Github的GitHub Actions实现自动化部署。

sh脚本部署

sh脚本是什么

sh脚本是一种文本文件，其中包含一系列的命令和程序，用于在Unix/Linux系统上自动执行任务和操作。sh是shell的简写，是Unix/Linux上默认的命令行解释器。sh脚本可以用于自动化操作、批量处理数据以及在系统启动时自动运行程序等。

部署工作

我们在 Github 上新建一个仓库，仓库名为：myblog。

接着修改 config.js 文件，添加 base配置， base的值为刚刚创建的仓库名，这个是为了后面访问Github Pages用的。

此时config.js的结构为

module.exports = {
  // ...
  base: '/myblog/',
  // ...
} 

在项目的根目录下创建一个sh脚本，命名为deploy.sh,添加以下内容

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'


# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:by3679512/myblog.git master:gh-pages

cd -

最后执行脚本，在仓库的Settings -> Pages 中可以看到的Github Pages地址

GitHub Actions自动化部署

现在介绍如何使用GitHub Actions自动化部署项目到Github Pages上。

当我们完成项目本地化搭建后，一般都是使用npm run buid或者yarn build命令进行打包

接着将打包文件远程推送到Github Pages上，访问Github Pages地址确认是否部署成功

在我们打包项目和推送静态文件这个过程中，会发现有很多相似的重复性操作，既然是重复性的，我们能不能把操作写成脚本，以后每次操作只要执行脚本就好呢？

GitHub很早注意到这一点，推出了GitHub Actions帮助开发者实现这个想法。

GitHub Actions是什么？

GitHub Actions 是一个持续集成/持续部署（CI/CD）平台，可以在 GitHub 上构建、测试和部署代码。它允许开发者定义自动化的工作流程，以响应不同类型的事件，如提交代码、打标签或发布版本等。GitHub Actions 提供了一组预定义的操作和工具，也可以使用 Docker 或自己的脚本进行自定义操作。

GitHub Actions中的基本概念

• Workflow：工作流程，即定义自动化过程的 YAML 文件

• Event：事件，触发工作流程的事件类型，如 push、pull_request 等

• Job：任务，工作流程中一个单独的执行单元

• Step：步骤，任务中的一个独立操作，可以是一个 shell 命令、一个脚本或一个预定义的操作

• Action：动作，可重用的代码块，可以在多个工作流程和任务中使用

• Runner：运行者，托管工作流程的机器，可以是 GitHub 托管的虚拟机或自己的物理机器

关于YAML可以看阮一峰大大的这篇文章

搭建一个工作流

创建一个 GitHub 仓库命名为 myblog 点击Action进入工作流页面，在这里可以使用别人的工作流，也可以自己创建。

• 前期工作

在部署之前，我们需要在自己的仓库上设置Secrets进行身份验证，而设置Secrets就需要用到Token。

进入 Github 后，点击我们的头像，进入 Settings -> Developer settings -> Personal access tokens ,点击进入生成token

此处的Note为用途，可随意命名，Expiration为期限，可随意选择，但建议设为No expiration,最后勾选repo 点击Generate token生成

复制刚刚生成的Token，注意Token生成只出现一次，刷新页面会找不到，建议保存好

在仓库的 Settings -> Secrets 上，找到New repository secret创建一个secret，命名一定要为ACCESS_TOKEN,然后在Value填写刚刚生成的Token,最后Add secret。

• 创建工作流

在自己项目根目录创建.github/workflows/,并在其中创建文件deploy.yaml,文件命名随个人喜好，只要是yaml类型文件即可。

编写以下脚本

name: Build and Deploy
on: [push] #监听push动作
# 任务
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} #刚刚生成的secret
        TARGET_REPO: by3679512/myblog #仓库地址
        TARGET_BRANCH: gh-pages #目标分支，gh-pages一般用来存放生成的静态文件
        BUILD_SCRIPT: yarn && yarn build
        BUILD_DIR: docs/.vuepress/dist/ #生成的静态文件存放目录

最后将本地仓库推送到远程仓库。

• 验证成果

打开远程仓库的Settings -> Pages，如果看到GitHub Pages已经生成，说明工作流已经成功执行。当每次我们在本地推送一个push动作后，GitHub会自动执行.github/workflows/下的脚本，进行项目自动化部署。当然我们可以点击仓库中Actions查看我们的工作流。

至此，我们已经完成了项目的自动化部署。