乐趣区

关于github:如何优雅实现自动化部署

jiezi

前言

前几天实现了用 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 查看咱们的工作流。

至此，咱们曾经实现了我的项目的自动化部署。

退出移动版