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

  • A+
所属分类:媒体
广告也精彩

最近老大终于开窍,让我把一个老项目用React和Leaflet重构一下,然后写一个Demo给他看。刚刚高兴完,IT那边的老哥直接发给我一个FTP的用户名和密码,说是写完了直接放这个上面就可以了。我问新上的 Jenkins 设施能不能给我一个用用,老大说:你就一个前端页面直接放上去得了「GIS工具」使用GithubActions自动化部署你的GIS应用。为什么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 有一些自己的术语。workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。step(步骤):每个 job 由多个 step 构成,一步步完成。action (动作):每个 step 可以依次执行一个或多个命令(action)。是不是有点复杂,概念的东西有点麻烦,我们下面用Demo来演示。使用Actions来部署GIS应用 以最近的项目为例,简化一下,我们的项目部署要经历如下步骤:代码风格统一ESLint 检查跑单元测试编译打包部署先在我们的项目的根目录下建立.github/workflow/main.yaml如图:在main.yaml中添加如下代码:name: CI/CDon: 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的自动部署脚本,下面稍微解释一下流程:on push/pull_requests 表示在代码Push或者Pull_request的时候触发CI流程。run-on -- CI运行在什么版本系统上,本文用的是ubuntu定论nodejs版本Checkout repository -- 拉代码actions/setup-node@v1 -- 装nodenpm install -- 装依赖npm run lint -- 跑ESLintnpm run test -- 跑测试npm run build -- 打包编译Sync files -- 将代码同步到FTP运行效果就是,当你Push了代码之后,github上会看到的Actions的选项。当你的Lint或者Test报错的时候,这个CI的代码就不会提交到远程服务器上。一些限制 Github Actions虽然好用,但也有几个限制。限制运行时长,超了要花钱,免费用户每月2000分钟公有、私有仓库均可使用需要有外网访问权限(很多GIS公司没有)结语 你就一个前端页面直接放上去得了?当然不是,可能你的项目还小用不到,但这些工程化的实践还是有必要的。Github Actions作为小型的CI,在一些情况下还是很有用的,比如我这种情况~扩展阅读 「GIS文档工具」下载百度文库的文档「GIS小工具」改变你的Chrome定位「GIS技巧」使用IP地址定位用户位置的方法小结「GIS技巧」无需编程批量翻译地名「GIS工具」栅格图片放大的小工具「GIS工具」使用GithubActions自动化部署你的GIS应用关注麻辣GIS「GIS工具」使用GithubActions自动化部署你的GIS应用扫码关注微信公众号获取更多精彩麻辣GIS「GIS工具」使用GithubActions自动化部署你的GIS应用「GIS工具」使用GithubActions自动化部署你的GIS应用免费关注知识星球直接提问!麻辣GIS
点击查看详情

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩
avatar

发表评论

您必须登录才能发表评论!