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

发布时间: 2021-07-13 所属分类: 文章标签:

当前位置：

麻辣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 Actions 是 GitHub 推出的持续集成 (Continuous integration，简称 CI) 服务，它提供了配置非常不错的虚拟服务器环境，基于它可以进行构建、测试、打包、部署项目。

GitHub Actions 有一些自己的术语。

workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow。
job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
step（步骤）：每个 job 由多个 step 构成，一步步完成。
action （动作）：每个 step 可以依次执行一个或多个命令（action）。

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

使用Actions来部署GIS应用

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

代码风格统一
ESLint 检查
跑单元测试
编译打包
部署

先在我们的项目的根目录下建立.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的自动部署脚本，下面稍微解释一下流程：