前言

大家在工作中想必都是通过自动化部署来进行前端项目的部署的,也就是我们在开发完某个需求时,我们只需要将代码推送到某个分支,然后就能自动完成部署,我们一般不用关心项目是如何build以及如何deploy的,这就极大得提高了我们的开发效率。

在没有自动化部署的情况下,前端项目的部署流程一般是这样的:(手动部署)

  • 开发完成后本地进行build
  • 将build后的文件交给运维(前端人员有权限的可省略)
  • 将打包文件上传到服务器的指定目录

前端项目每次上线都得走一遍这个流程,对于程序员来讲这怎么能忍,宁愿将时间浪费在B乎上也不可能浪费在这些毫无技术的工作流程上,并且人工操作,难免会出错。

所以今天给大家分享一下如何实现自动化部署自己的前端项目。

如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新文章~

自动化部署脚本

先来分享一种简单的自动化部署方案 - 自动化部署脚本

我们每次部署项目时,会有几个步骤是固定的,既然它是固定的,那么我们就可以通过写脚本来帮助我们完成,这样不仅能够提高我们的开发效率,还能避免人为操作时可能出现的纰漏。

新建仓库

我们可以在GitHub上新建一个项目并尝试把它部署到GitHub Pages上。

新建项目

这里我们新建一个Vue3 + TS 项目

添加脚本

我们直接在项目根目录下新建一个脚本文件deploy.sh

#!/usr/bin/env sh

set -x  # 这里是为了看错误日志

# 打包项目
npm run build # 进入打包后的文件夹
cd dist git init
git add -A
git commit -m 'auto deploy' # 将打包后的文件推送到指定分支 git push -f https://github.com/bettersong/nanjiu.git main:static-pages

执行脚本

现在我们可以执行sh deploy.sh,然后就会执行我们脚本文件中的内容,先是打包,然后将打包产物推送到远程指定分支(static-pages)。我们可以到github仓库中查看打包产物。

部署完我们怎么访问这个页面呢?

在仓库的Setting -> Pages中可以查看到该页面的访问地址

最后我们访问这个地址https://bettersong.github.io/nanjiu/就能看到我们部署的页面了。

这种方案最后再与GitHooks结合,可以在某个分支提交时自动完成打包部署,这里就不再介绍了。下面我们再来看另一种更加优雅的方案。

CICD

CICD翻译过来就是持续构建、持续交付。

CI 持续集成(Continuous Integration)

持续集成:频繁的将代码合并到主分支中,强调通过集成测试反馈给开发一个结果,不管失败还是成功。

持续集成分成三个阶段:

  • 持续集成准备阶段:根据软件开发的需要,准备CI的一些前置工作

    • 集成CI工具的代码仓库(Gitlab、Github、Jenkins等)
    • 单元测试或者集成测试的脚本
    • 触发CI的配置文件,实现各种功能的Jobs
  • 持续集成进行阶段
    • 推送代码出发CI系统
    • 通过CI系统监听代码的测试、构建,反馈集成结果
    • 通过版本管理系统实现版本的管理
  • 接续集成完成阶段:反馈集成结果

CD 持续交付(Continuous Delivery)

持续交付:主要面向测试人员和产品,可以保证一键部署,常常要交付的内容包括

  • 源代码:缺点,代码依赖的环境不容易控制
  • 打包的二进制文件或者系统包:存在兼容性问题和环境差异出现的部署失败
  • 虚拟机镜像交付:系统隔离最好,但占用系统资源严重
  • Docker交付:容器交付,成本最低,兼容性最好

持续部署:此时要提供一个稳定的版本,包括所需的环境和依赖,主要面向用户提供服务,发生错误要能快速回滚。

CICD是目前大多数互联网公司选择的一种部署方案,因为它能够灵活配置项目部署过程中的各个阶段。下面再来介绍下如何使用GitHub的CICD来部署前端项目。

GitHub Action

GitHub Actions 是一个持续集成 (Continuous integration)和持续交付 (Continuous delivery)的平台,它可以做到自动化构建、测试、部署。你可以创建工作流,构建和测试每一个 pull request 或者部署合并后的代码到生产环境。

Workflows(工作流)

工作流是一个可配置的自动化的程序。创建一个工作流,你需要定义一个 YAML 文件,当你的仓库触发某个事件的时候,工作流就会运行,当然也可以手动触发,或者定义一个时间表。一个仓库可以创建多个工作流,每一个工作流都可以执行不同的步骤。

Events(事件)

事件是指仓库触发运行工作流的具体的行为,比如创建一个 pull request、新建一个 issue、或者推送一个 commit。你也可以使用时间表触发一个工作流,或者通过请求一个 REST API,再或者手动触发。

Jobs(任务)

任务是在同一个运行器上执行的一组步骤。一个步骤要么是一个shell 脚本要么是一个动作。步骤会顺序执行,并彼此独立。因为每一个步骤都在同一个运行器上被执行,所以你可以从一个步骤传递数据到另一个步骤 。

你可以配置一个任务依赖其他任务,默认情况下,任务没有依赖,并行执行。当一个任务需要另外一个任务的时候,它会等到依赖的任务完成再执行。

Actions(动作)

动作是 GitHub Actions 平台的一个自定义的应用,它会执行一个复杂但是需要频繁重复的作业。使用动作可以减少重复代码。比如一个 action 可以实现从 GitHub 拉取你的 git 仓库,为你的构建环境创建合适的工具链等。你可以写自己的动作 ,或者在 GitHub 市场找已经实现好的动作。

Runners(运行器)

一个运行器是一个可以运行工作流的服务。每一个运行器一次只运行一个单独的任务。GitHub 提供 Ubuntu Linux,Microsoft Windows 和 macOS 运行器,每一个工作流都运行在一个独立新建的虚拟机中。如果你需要一个不同的操作系统,你可以自定义运行器。

了解完上面这些有关GitHub Actions的概念,我们开始搭建一条自己的工作流用于项目的部署。

搭建工作流

.github/workflows

我们在之前建好的仓库中点击New workflow来新建一条工作流。

然后会到选择工作流的页面

这里你可以选择一条别人建好的工作流,也可以选择新建自己的工作流。

我们还是选择新建自己的工作流,然后会在我们项目的根目录下新建一个目录.github/workflows,这里会新建一个yml文件,我们这里就叫ci.yml好了

yml

在这个文件中,我们要做的事情还是打包以及部署

name: Build and Deploy
on: # 监听 main 分支上的 push 事件
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 构建环境使用 ubuntu
steps:
- name: Checkout # 将代码拉到虚拟机
uses: actions/checkout@v2.3.1
with:
persist-credentials: false - name: Install and Build # 下载依赖 打包项目
run: |
npm install
npm run build - name: Deploy # 部署
uses: JamesIves/github-pages-deploy-action@v4.3.3
with:
branch: static-pages # 部署后提交到的分支
folder: dist # 这里填打包好的目录名称

我们把这个文件提交上去,它就会在提交代码后自己完成打包及部署的工作。

自动化部署

在代码提交上去后,它会按照我们工作流的步骤进行打包及部署

并且上面可以查看整个工作流的日志,方便排查问题

部署完访问地址还是一样https://bettersong.github.io/nanjiu

到这里我们基于GitHub Actions实现的自动化部署流程就完成了,现在我们在本地修改完代码后就只需要将代码推送到远程,就能够实现自动打包部署了。

最后

喜欢的同学欢迎点个赞呀~

原文首发地址点这里,欢迎大家关注公众号 「前端南玖」,如果你想进前端交流群一起学习,请点这里

我是南玖,我们下期见!!!

使用GitHub Actions实现自动化部署的更多相关文章

  1. 使用 JS 开发 Github Actions 实现自动部署前后台项目到自己服务器

    不想看前面这么多废话的可以直接跳到具体实现 Github Actions 是什么? 说到 Github Actions 不得不提一下. 持续集成(continuous integration):高质量 ...

  2. 使用GitHub Actions自动编译部署hexo博客

    前言 使用hexo博客也挺久的,最开始是本地hexo clean && hexo g,最后hexo d推送到服务器.后来是本地hexo clean && hexo g, ...

  3. vuepress-theme-reco + Github Actions 构建静态博客,部署到第三方服务器

    最新博客链接 Github链接 查看此文档前应先了解,vuepress基本操作 参考官方文档进行配置: vuepress-theme-reco VuePress SamKirkland / FTP-D ...

  4. 利用 Github 网络钩子实现自动化部署

    GitHub 的网络钩子(webhook)功能,可以很方便的实现自动化部署.本文记录了使用 Node.js 的开发部署过程,当项目的 master 分支被推时,将在服务器进行自动部署 添加网路钩子 在 ...

  5. Hexo+GitHub Actions 完美打造个人博客

    Hexo简介 Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架.大家可以进入hexo官网进行详细查看, ...

  6. 使用 Github Actions artifact 在 workflow job 之间共享数据

    (AgileConfig)[https://github.com/kklldog/AgileConfig] 在使用 react 编写UI后,变成了一个彻彻底底的前后端分离的项目,上一次解决了把reac ...

  7. Azure Terraform(九)GitHub Actions 实现 Infra 资源的自动化部署

    思路浅析 使用 Terraform Code 部署 Azure 基础设施资源是特别受欢迎的,我曾经有写文章分享过利用 Azure DevOps 自动部署 Terraform Code 所描述的 Azu ...

  8. 编写自己的 GitHub Action,体验自动化部署

    本文将介绍如何使用 GitHub Actions 部署前端静态页面,以及如何自己创建一个 Docker 容器 Action. 简介 Actions GitHub Actions 是 GitHub 官方 ...

  9. 使用 GitHub Actions 实现 Hexo 博客自动部署

    一.Hexo 相关知识点 静态博客简单,但是发布博文时稍显麻烦,一般需要下面两步: hexo clean hexo g -d // 相当于 hexo g + hexo d 如果考虑到同步源文件,还需要 ...

随机推荐

  1. silk-GUI图形界面开发一个词典

    了解使用的库 Silk内置了一些GUI类库供使用者开发MacOS上的图形界面程序,只需引用gui.si即可 准备 首先要知道app需要什么功能,这里我要的是查询单词,可以听语音,还可以存储生词! 那么 ...

  2. 微信小程序/校园社区论坛/微信云开发/云函数

    一.框架来源 1.非常非常感谢B站up主"梦千的曾哥哥"的开源框架. 没有他就没有这个小程序.如果有想做的同学,可以直接移步他的视频那里开始学习.我水平不够,就不教具体怎么配置环境 ...

  3. SpringMVC 01: SpringMVC + 第一个SpringMVC项目

    SpringMVC SpringMVC概述: 是基于MVC开发模式的框架,用来优化控制器 是Spring家族的一员,也具备IOC和AOP 什么是MVC: 它是一种开发模式,是模型视图控制器的简称,所有 ...

  4. openstack中Nova组件简解

    一.Nova组件概述 计算节点通过Nova Computer进行虚拟机创建,通过libvirt调用kvm创建虚拟机,nova之间通信通过rabbitMQ队列进行通信. Nova位于Openstack架 ...

  5. 排序算法整理C++(初赛)

    排序算法整理 常见考点 将一个乱掉的字符串排回有序(以交换为基本操作)的最少操作,就是冒泡排序. 排序算法的稳定性 排序算法的时间复杂度 排序算法的稳定性 稳定性是指排序前两个元素a1 = a2,a1 ...

  6. ASP.NET Core 6框架揭秘实例演示[35]:利用Session保留语境

    客户端和服务器基于HTTP的消息交换就好比两个完全没有记忆能力的人在交流,每次单一的HTTP事务体现为一次"一问一答"的对话.单一的对话毫无意义,在在同一语境下针对某个主题进行的多 ...

  7. Job And Schedule (V8R6C3)

    KingbaseES 数据库提供了 kdb_schedule 扩展,使得用户能通过类似oracle job 的方式进行job调用.kdb_schedule 提供了三个Schema :dbms_job ...

  8. python的环境,你再也不用愁-conda

    Conda Guide Conda简介 conda是一个包,依赖和环境管理工具,适用于多种语言,如: Python, R, Scala, Java, Javascript, C/ C++, FORTR ...

  9. sklearn中MLPClassifier源码解析

    神经网络 .fit() 首先传入类私用方法._fit() 确定hidden_layer_size是可迭代的 调用_validate_hyperparameters验证超参数是否合法 验证输入的x和y是 ...

  10. Java开发学习(三十四)----Maven私服(二)本地仓库访问私服配置与私服资源上传下载

    一.本地仓库访问私服配置 我们通过IDEA将开发的模块上传到私服,中间是要经过本地Maven的 本地Maven需要知道私服的访问地址以及私服访问的用户名和密码 私服中的仓库很多,Maven最终要把资源 ...