麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

「GIS工具」使用Github Actions自动化部署你的GIS应用

最近老大终于开窍,让我把一个老项目用React和Leaflet重构一下,然后写一个Demo给他看。刚刚高兴完,IT那边的老哥直接发给我一个FTP的用户名和密码,说是写完了直接放这个上面就可以了。我问新上的 Jenkins 设施能不能给我一个用用,老大说:你就一个前端页面直接放上去得了。

为什么GIS要做自动化部署

现代的GIS应用不像以前,仅仅是前端也不是一个jQuery简简单单就可以搞定的,我们通过需要借助一些工程化工具来完成我们最终的打包上线操作。比如我们常见的:

npm run build

一个简单的命令,可能会包含scss编译、静态文件+Hash、代码混淆压缩等等,实际项目更加复杂,我们还需要验证代码质量(Lint及测试)等,这项目工作如果在本地做耗时费力,并且不同小伙伴的系统环境还会出现不一致的情况,所以CI/CD这类概念也逐渐引入了GIS开发中来,比较常见的是很多团队会部署一个 Jenkins,来完成整个项目的发版。

关于Github Actions

Github Ac­tions 是 GitHub 推出的持续集成 (Con­tin­u­ous in­te­gra­tion,简称 CI) 服务,它提供了配置非常不错的虚拟服务器环境,基于它可以进行构建、测试、打包、部署项目。

GitHub Actions 有一些自己的术语。

  1. workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。
  2. job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。
  3. step(步骤):每个 job 由多个 step 构成,一步步完成。
  4. action (动作):每个 step 可以依次执行一个或多个命令(action)。

是不是有点复杂,概念的东西有点麻烦,我们下面用Demo来演示。

使用Actions来部署GIS应用

以最近的项目为例,简化一下,我们的项目部署要经历如下步骤:

  1. 代码风格统一
  2. ESLint 检查
  3. 跑单元测试
  4. 编译打包
  5. 部署

先在我们的项目的根目录下建立.github/workflow/main.yaml文件,如图:

在main.yaml中添加如下代码:


name: CI/CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: ESLint
      run: npm run lint

    - name: Run the tests
      run: npm test

    - name: Build
      run: npm run build    

    - name: Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.1.0
      with:
        server: ${{ secrets.ftp_server }}
        username: ${{ secrets.ftp_user }}
        password: ${{ secrets.ftp_password }}
        port: ${{ secrets.ftp_port }}
        local-dir: ./dist/
        server-dir: public_html/www/

上面是一个比较简明的Github Actions的自动部署脚本,下面稍微解释一下流程:

  1. on push/pull_requests 表示在代码Push或者Pull_request的时候触发CI流程。
  2. run-on -- CI运行在什么版本系统上,本文用的是ubuntu
  3. 定论nodejs版本
  4. Checkout repository -- 拉代码
  5. actions/setup-node@v1 -- 装node
  6. npm install -- 装依赖
  7. npm run lint -- 跑ESLint
  8. npm run test -- 跑测试
  9. npm run build -- 打包编译
  10. Sync files -- 将代码同步到FTP

运行效果就是,当你Push了代码之后,github上会看到的Actions的选项。

当你的Lint或者Test报错的时候,这个CI的代码就不会提交到远程服务器上。

一些限制

Github Actions虽然好用,但也有几个限制。

  1. 限制运行时长,超了要花钱,免费用户每月2000分钟
  2. 公有、私有仓库均可使用
  3. 需要有外网访问权限(很多GIS公司没有)

结语

你就一个前端页面直接放上去得了?当然不是,可能你的项目还小用不到,但这些工程化的实践还是有必要的。

Github Actions作为小型的CI,在一些情况下还是很有用的,比如我这种情况~

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
微信打赏
支付宝打赏
手机阅读
麻辣GIS微信打赏
请小编吃包辣条
麻辣GIS支付宝打赏
请小编吃支雪糕

留言板(小编看到第一时间回复)