GitHub Actions自动化部署前端项目指南

简介: 前言在项目开发过程中,随着需求的不断变化以及后期不断修复bug,伴随着的便是我们不停的打包部署。打包部署这期间的操作虽然不复杂,但是非常繁琐。目前市面上可以使用jenkens等工具实现持续集成(CI/CD),但是如果我们服务器资源少,且只需要简单的自动化部署,那么有更优雅的方式实现自动化部署:GitHub Actions。本篇文章以前端项目为例,下文所有操作基于前端项目。

1.什么是GitHub Actions?


GitHub Actions是GitHub推出的一款持续集成(CI/CD)服务,它给我们提供了虚拟的服务器资源,让我们可以基于它完成自动化测试、集成、部署等操作。


传统的前端项目开发流程:


  1. 前端人员完成所有开发
  2. 推送代码
  3. 打包生成静态资源文件
  4. 推送至服务端
  5. ...依次循环


可以看到传统的前端项目开发流程其实并不复杂,但是很繁琐,开发人员需要不断地重复2~4步骤,若是遇到加急bug,那么这些不太复杂的操作就会浪费不少时间。


大家可以简单的把Actions理解为脚本,一个Action就是一个自动化部署脚本,GitHub官方为了方便大家操作,允许发布自己的Action到Actions市场去,这样一些常用的部署脚本就不需要自己写了,只需要使用别人造好的轮子即可。


2.概念介绍


在使用GitHub Actions之前,它的几个基本概念必须要了解一下:


Workflows(工作流程)


持续集成的运行过程称为一次工作流程,也就是我们项目开始自动化部署到部署结束的这一段过程可以称为工作流程,一个工作流程中由一个或者多个任务(job)组成。


  • Jobs(任务)


一个工作流程中包含多个任务,简单来说就是一次自动部署的过程中,需要完成一个或多个任务,这些任务里面又包含了多个步骤(step)。


  • Action(动作)


每个步骤(step)可以包含一个或多个动作,比如我们在一个步骤中执行打包命令这个Action。


上面4点是GitHub Actions中几个大的概念,也很好理解,大家可以把它想象为一条完整的流水线,流水线包含的几个操作要点如下:

workflow->job->step->action


3.语法简介


上面的概念介绍只是从宏观层面解读的,具体如何实现还需要我们了解具体的额语法,就好比一个工人修房子,具体步骤是知道了,那么具体工具还需要确定,这些工具就是我们需要了解的GitHub Actions语法。


3.1 name


定义workflow的名称,如果没有定义,则会默认使用执行脚本文件名作为workflow名称,实例代码如下:

name: GitHub Actions Demo


3.2 on

触发workflow的条件或者事件,比如push的时候就像执行workflow,实例代码如下:

# 单个事件
on: push
# 多个事件列表
on: [push, pull_request]
# 当main分支发生push操作时执行workflow
on:
  push:
    branches:
      - main

3.3 jobs


jobs是一个workflow的核心任务,我们大部分的操作在jobs中完成,我们的任务(job)放在jobs这个集合下,每一个job有以下几个核心的字段组成:


(1)jobs.<job_id>

jobs中每一项任务都有任务id,实例代码如下:

jobs:
  my_first_job:   // 任务id
    name: My first job
  my_second_job:
    name: My second job


(2)jobs.<job_id>.name

每一项任务具有任务名称,好比我们做每一项工作时都有一个工作名称,实例代码如下:

jobs:
  my_first_job:  
    name: My first job  // 任务任务名称
  my_second_job:
    name: My second job


(3)jobs.<job_id>.needs

needs字段用来指定当前任务的一些依赖关系,比如一个任务依赖于另外两个任务,实例代码如下:

jobs:
  job1:
  job2:
    needs: job1
  job3:
    needs: [job1, job2]


上面代码展示了三个任务之间的依赖关系,所以执行顺序应该是job1、job2、job3.


3)jobs.<job_id>.runs-on

该字段用来指定命令的运行虚拟机环境,可以理解为我们的任务要在哪个环境中执行,实例代码如下:

runs-on: ubuntu-18.04


GitHub Actions给我们提提供的运行环境主要有以下几种:


  • ubuntu-latestubuntu-18.04ubuntu-16.04
  • windows-latestwindows-2019windows-2016
  • macOS-latestmacOS-10.14


(4)jobs.<job_id>.steps


step是job中的重点,一个job可以包含多个步骤,比如一个项目就是一个任务,我们需要分为多个步骤来完成这个项目,实例代码如下:

每个步骤包含下面三个字段:

jobs.<job_id>.steps.name:步骤名称。
jobs.<job_id>.steps.run:该步骤运行的命令或者 action。
jobs.<job_id>.steps.env:该步骤所需的环境变量。


上面代码中run就是我们该步骤需要执行的命令,比如打包命令:npm run build。当然也可以使用人家造好的轮子,直接使用人家的action。


以上只是简单介绍了GitHub Actions中重要的一些概念和语法,以满足我们基本的自动化部署操作,更多详细语法可以移步官网:


GitHub Actions官网


4.部署实例


上面几节主要介绍了GitHub的一些基础知识,了解时候就可以进行实战了,这里使用Vue项目作为演示项目。


4.1 准备工作

  • 前端项目(Vue)
  • GitHub账号
  • 服务器资源(或者使用github pages)


4.2 初始化项目

(1)初始化一个Vue项目


在本地任意地方初始化一个Vue项目,初始化命令如下:

vue create myproject


项目的相关配置任意选择,最后项目运行起来如下:


网络异常,图片无法展示
|


(2)推送至GitHub

在GitHub上新建一个项目,我们就取名为github-actions-demo:

网络异常,图片无法展示
|


然后我们将初始化的Vue项目推送至GitHub,在Vue项目根目录依次执行以下命令:

git remote add origin https://github.com/Hacker233/github-actions-demo.git
git branch -M main
git push -u origin main

上面的git地址记得切换为自己的,此时我们的项目已经推送成功了,接下来我们要实现的就是只要main分支有代码推送,则执行自动化部署。


4.3 服务器配置nginx


为了方便后面测试,我们可以先把网站部署到服务器上去,也就是我们先提前配好nginx,如果你自己有网站且已经部署成功了,则可跳过此节。


如果不知道如何部署到服务器的小伙伴可以参考:


文章:

前端Vue项目打包部署实战教程


视频:

前端Vue项目打包部署实战教程


部署完成后我们就可以通过域名或者服务器IP访问我们的网站了:

2.png

4.4 新建.yml文件

(1)进入GitHub Actions菜单

3.png2)点击set up a workflow yourself

当然你也可以选择一个模板,点击start commit则会自动在我们项目目录下新建.github/workflows/main.yml文件,yml文件内容默认即可,先不用管。5.png

而且此时会发现,我们的提交记录旁边有一个小绿点,其实那就代表着我们的action正在执行,切换到actions菜单,会发现actions已经执行了一次了,且成功了。


6.png

我们更新以下本地的代码,在本地修改yml配置文件。7.png

4.5 修改.yml文件

我们可以简单的看一下默认生成的yml文件,是不是和我们前几节讲的概念和语法一样,

很好理解,我们部署前端项目,通常很简单,只需要简单修改即可。


先给出完整的yml代码:

name: Build app and deploy to Tencent
on:
  #监听push操作
  push:
    branches:
      # mian分支,你也可以改成其他分支
      - main
jobs:
  # 任务ID
  build:
    # 运行环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
    # 使用别人的action
    - uses: actions/checkout@v2
    # 步骤名称
    - name: npm install
      # 步骤执行指令
      run: npm install
    - name: npm run build
      run: npm run build
    # 命名这个任务为发布Deploy
    - name: Deploy
      # 因为构建之后,需要把代码上传到服务器上,所以需要连接到ssh,并且做一个拷贝操作
      uses: cross-the-world/scp-pipeline@master
      env:
        WELCOME: "ssh scp ssh pipelines"
        LASTSSH: "Doing something after copying"
      with:
        host: ${{ secrets.USER_HOST }}
        user: ${{ secrets.USER_NAME }}
        pass: ${{ secrets.USER_PASS }}
        connect_timeout: 10s
        local: './dist/*'
        remote: /home/www/dist

上面的代码是在默认的yml文件上修改的,重点需要关注的是jobs,这里我们只有一个任务,任务id就是build,该任务里面有3个步骤,也就是我们项目部署通常的3个步骤:


  • npm install 安装项目依赖
  • npm run build 打包项目
  • deploy 将打包好的静态资源推送到服务端


在deploy这个步骤中,使用了一个别人写好的action,主要目的就是推送静态资源到服务端,几个重点字段解释


  • host:服务器ip
  • user:服务器登录用户
  • pass:服务器登录密码
  • connect_timeout:登陆超时限制
  • local:本地的静态资源文件,Vue项目打包后会生成dist文件夹
  • remote:服务端静态资源文件存放路径


【注意】更改yml文件后可能会触发actions,如果没有配置密钥,应该是会部署失败的。


4.6 配置部署密钥


在4.5节中的yml文件中的部署步骤中,服务器的ip、用户名和密码我们都没有直接写在文件里面,这也是为了安全考虑,所以从secrets中读取的,那么接下来我们就去secrets中设置


(1)进入secrets

点击setting->选择secrets->点击新建


8.png


(2)设置相关密钥信息

名称可以任意取,但是要和yml中的相对应,设置后的结果如下:9.png

4.7 更改代码并推送

当我们yml文件和密钥都准备完成之后,这个时候便可以任意修改 一点代码然后push到分支上了,push成功之后,actions便会运行,可以点击进去查看详情:

10.png


部署成功:11.png


actions部署完成后,我们就可以访问网站看是否更新了:

12.png

如果actions部署失败,可以根据报错日志自行检查一下,一般报错信息很明确的。


总结


GitHub Actions给我们提供了一站式的自动化部署体验,最重要的还是免费,让我们无需再去学会多的部署工具,如jenkens了,这种方式是多么的优雅。


除此之外,GitHub Actions可以部署我们的任何项目,其中的重点当然是我们的yml脚本了。




相关文章
|
1月前
|
开发工具 git
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
186 69
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
|
4月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
133 3
|
4月前
|
存储 前端开发 JavaScript
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
本文介绍了10个极具价值的GitHub存储库,旨在帮助各级JavaScript开发人员提升技能。这些资源涵盖了从基本概念到高级算法、编码风格指南、面试准备等各个方面,包括经典书籍、实用工具和面试手册。无论您是刚入门的新手还是有经验的开发者,这些存储库都能为您提供丰富的学习资源,助您在JavaScript领域更进一步。探索这些资源,开启您的学习之旅吧!
96 0
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
利用 GitHub Actions 自动化你的软件开发流程
在现代软件开发中,自动化是提升效率与质量的关键。GitHub Actions 作为 GitHub 的强大自动化工具,允许你在仓库中自动执行多种任务,如测试、打包、部署代码及自动合并 Pull Requests。本文介绍了 GitHub Actions 的核心概念、设置方法及其实用示例,帮助你快速上手并优化开发流程。通过 YAML 文件定义的工作流程可显著提高工作效率和代码质量。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是由 GitHub 提供的自动化工具,可让你在仓库中触发和执行自动化工作流程,如自动运行测试和部署应用。其核心概念包括工作流程(定义在 YAML 文件中的一系列自动化步骤)、作业和步骤。本文将指导你如何设置和使用 GitHub Actions,并提供实用的自动化示例,帮助你提高开发效率和代码质量。通过简单的配置文件,你可以实现自动运行测试、部署应用甚至自动合并 Pull Requests。
|
6月前
|
存储 安全 Java
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
在一次意外中,作者因三年前将测试代码遗忘在GitHub上而遭遇了代码被他人fork的问题。为解决这一危机,作者详细介绍了如何通过GitHub的DMCA下架通知流程安全删除敏感代码,包括处理私人信息和商标侵权的具体步骤。本文不仅提供了实用的操作指南,还强调了及时响应的重要性,帮助读者避免类似风险
153 1
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
|
5月前
|
开发者
利用 GitHub Actions 自动化你的软件开发流程
在快速发展的软件开发环境中,自动化对于提升效率与质量至关重要。GitHub Actions 作为一款强大的工具,能帮助开发者实现从自动运行测试到部署应用等工作的自动化。本文详细介绍了 GitHub Actions 的核心概念、设置方法及实际应用示例,如自动测试、部署和合并 Pull Requests,助力提升开发流程的自动化水平。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是 GitHub 提供的自动化工具,可在仓库中触发和执行工作流程,包括自动运行测试、部署应用等。其核心概念包括工作流程(Workflow)、作业(Job)和步骤(Step),均定义在 YAML 文件中。本文将指导你如何设置和使用 GitHub Actions,并提供自动运行测试、部署应用及合并 Pull Requests 的示例,帮助提高开发效率和代码质量。
|
6月前
|
人工智能 Rust JavaScript
Github 2024-08-26 开源项目周报Top15
根据Github Trendings的统计,本周共有15个项目上榜。以下是按开发语言汇总的项目数量:Python项目8个,TypeScript、C++ 和 Rust 项目各2个,Jupyter Notebook、Shell、Swift 和 Dart 项目各1个。其中,RustDesk 是一款用 Rust 编写的开源远程桌面软件,可作为 TeamViewer 的替代品;Whisper 是一个通用的语音识别模型,基于大规模音频数据集训练而成;初学者的生成式人工智能(第2版)则是由微软提供的18门课程,教授构建生成式AI应用所需的知识。
192 1
|
6月前
|
Rust Dart 前端开发
Github 2024-08-19 开源项目周报Top15
根据Github Trendings的统计,本周(2024年8月19日统计)共有15个项目上榜。按开发语言分类,上榜项目数量如下:Python项目最多,有7项;其次是JavaScript和TypeScript,各有3项;Dart有2项;HTML、PowerShell、Clojure和C++各1项。此外,还介绍了多个热门项目,包括Bootstrap 5、RustDesk、ComfyUI、易采集、Penpot等,涵盖了Web开发、远程桌面、自动化测试、设计工具等多个领域。
147 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡