使用GitHub Actions实现自动化部署 _生活百科

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

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

前端项目每次上线都得走一遍这个流程，对于程序员来讲这怎么能忍，宁愿将时间浪费在B乎上也不可能浪费在这些毫无技术的工作流程上，并且人工操作，难免会出错。
所以今天给大家分享一下如何实现自动化部署自己的前端项目。
如果这篇文章有帮助到你，?关注+点赞?鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～
自动化部署脚本先来分享一种简单的自动化部署方案 - 自动化部署脚本
我们每次部署项目时，会有几个步骤是固定的，既然它是固定的，那么我们就可以通过写脚本来帮助我们完成，这样不仅能够提高我们的开发效率，还能避免人为操作时可能出现的纰漏。
新建仓库我们可以在GitHub上新建一个项目并尝试把它部署到GitHub Pages上。

文章插图
新建项目【使用GitHub Actions实现自动化部署】这里我们新建一个Vue3 + TS 项目

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

#!/usr/bin/env shset -x# 这里是为了看错误日志# 打包项目npm run build# 进入打包后的文件夹cd distgit initgit add -Agit commit -m 'auto deploy'# 将打包后的文件推送到指定分支git push -f https://github.com/bettersong/nanjiu.git main:static-pages

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