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

前言

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

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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据