您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端必知的GitHub Action一键部署

时间:2023-02-06 12:16:57  来源:  作者:HerryLo

最近由于自己的个人应用增加,每次都需要在服务器手动发布,觉得特别麻烦,所以想通过代码控制自动发布,直接选择了Github Action

 

GitHub Action持续集成服务,目前已经免费开放使用,由于大部分人的个人项目都是放在github上,那么使用它来发布、测试、部署,是非常方便的。

 

Github Action配置

 

下面的内容默认你已经会创建Github Action,官方提供了很多Github Action 配置模版,可以根据自己的需求随意选择,不是太了解的可以先参考阮一峰 GitHub Actions入门教程,了解一下Github Action。

 

我们来看看Github Action配置文件的基本构成,配置文件格式是.yml,示例如下:

 

# mAIn.yml
# 一个 workflow,名字为Github Action Example
name: Github Action Example

# 触发 workflow 的事件
on:
  push:
    # 分支随意
    branches:
      - master

# 一个workflow由执行的一项或多项job
jobs:
    # 一个job任务,任务名为build
    build:
        # runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
        runs-on: ubuntu-latest
        # steps是每个Job的运行步骤,可以包含一个或多个步骤
        steps:
            # action命令,切换分支获取源码
            - name: Checkout
                # 使用action库  actions/checkout获取源码
                uses: actions/checkout@master
            # action命令,安装Node10
            - name: use Node.js 10
                # 使用action库  actions/setup-node安装node
                uses: actions/setup-node@v1
                with:
                    node-version: 10
            # action命令,install && test
            - name: npm install and test
                # 运行的命令或者 action
                run: |
                    npm install
                    npm run test
                # 环境变量
                env:
                    CI: true

 

  • Action是工作流中最小的可移植构建块。你可以创建自己的动作,使用从GitHub社区共享的action库,以及自定义公共action库。
  • Step是Job执行的一组任务。Job中的每个步骤都在同一运行程序中执行,从而允许该Job中的操作使用文件系统共享信息,Step可以运行命令或action。
  • Job由Step构成。你可以定义工作流文件中Job的运行方式的依赖关系规则。Job可以同时并行运行,也可以依赖于先前Job的状态依次运行。
  • Workflow由一个或多个Job组成,可以通过事件进行计划或激活。你可以在存储库中设置一个可配置的自动化过程,以在GitHub上构建,测试,打包,发布或部署任何项目。

 

Github: Github Action插件查询库,可以查询你需要的action库,这些都是共享的,如果满足不了需求也可以自己定义。

 

Github Action发布阿里云ECS

 

下面就是我发布到阿里云ECS的 Github Action配置文件

 

我的Github Action服务配置

 

# main.yml
name: deploy to aliyun
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 切换分支
      - name: Checkout
        uses: actions/checkout@master
      # 下载 git submodule
      - uses: srt32/git-actions@v0.0.3
        with:
          args: git submodule update --init --recursive
      # 使用 node:10
      - name: use Node.js 10
        uses: actions/setup-node@v1
        with:
          node-version: 10
      # npm install
      - name: npm install and build
        run: |
          npm install
          npm run build
        env:
          CI: true
      # Deploy
      - name: Deploy
        uses: easingthemes/ssh-deploy@v2.0.7
        env:
          SSH_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}
          ARGS: "-avz --delete"
          SOURCE: "[Current File Dir]"
          REMOTE_HOST: "[Domain]"
          REMOTE_USER: "[UserName]"
          TARGET: "[Server Dir]"

 

以上是我的配置文件,action插件请根据自己的需求合理选择。我是要博客网站,发布到阿里云服务上,所以采用以上配置,而最后的action Deploy中action插件的选择,也是根据需求,在Github: action插件库中选择的。

 

补充注意⚠️:如果你是要发布到阿里云服务器,同时也使用以上配置action文件,请记住:ACCESS_TOKEN 是服务器ssh密钥对的私钥部分应将服务器公钥部分添加到接收部署的服务器上的authorized_keys文件中。正常情况下,ACCESS_TOKEN 是 服务器 ~/.ssh目录下的id_rsa 文件中 的内容。仔细看一下
https://github.com/marketplac... 文档中的字段配置描述)

 

最新更新20220424

由于githubs action 安全升级的原因,我发现有了这个报错:

Starting the git Action
fatal: unsafe repository ('/github/workspace' is owned by someone else)
To add an exception for this directory, call:

	git config --global --add safe.directory /github/workspace

 

按照提示修改配置,也在网上查找了很多办法,都不太行,最后决定将 srt32/git-actions@v0.0.3 移除了

- - uses: srt32/git-actions@v0.0.3
-        with:
-         args: git submodule update --init --recursive

 

更多

使用GitHub Actions发布Hexo网站到GitHub Pages

GitHub Actions发布博客到阿里云OSS

GitHub Actions自动构建镜像并推送到阿里云容器镜像服务

 

参考

Core concepts for GitHub Actions

阮一峰: GitHub Actions 入门教程



Tags:GitHub Action   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
使用 GitHub Actions 重构和优化发布流程的实用技巧
译者 | 刘汪洋审校 | 重楼概括:这篇文章分享了作者在使用 GitHub Actions 作为 CI/CD 工具时遇到的一些问题和解决方案,包括如何避免重复代码、如何管理环境变量、如何使用缓...【详细内容】
2023-09-08  Search: GitHub Action  点击:(280)  评论:(0)  加入收藏
前端必知的GitHub Action一键部署
最近由于自己的个人应用增加,每次都需要在服务器手动发布,觉得特别麻烦,所以想通过代码控制自动发布,直接选择了GitHub Action。 GitHub Action持续集成服务,目前已经免费开放使...【详细内容】
2023-02-06  Search: GitHub Action  点击:(202)  评论:(0)  加入收藏
直接白嫖 Github Action 的 2C7G 服务器
GitHub Actions[1] 是 GitHub 的持续集成服务[2],于2018年10月推出[3]。它的功能非常强大,每一个 action 都用来执行一种操作,比如抓取代码、运行测试、登录远程服务器,发布到第...【详细内容】
2020-09-02  Search: GitHub Action  点击:(677)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(13)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(16)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(20)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(27)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(35)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(26)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(74)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(83)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(42)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(74)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条