定制你私有的前端构建部署(Github CI/CD)

近来手痒,又陷入了自我捣腾的无限循环。
其实事情是这样的,最近阿里云搞活动(嗯,友情打广告),229买了个3年版低配服务器;前端时间写用React + Github Graphql API自定义你的博客, 见识了Github Action的强大,所以就尝试打造自己的前端构建部署工作流程;也许你看到过很多大厂的前端自动构建部署,但鲜有尝试,今天就可以自己动手啦,撸起来吧。
定制你私有的前端构建部署(Github CI/CD)_第1张图片

从workflow看流程

定制后的Github Action workflow大概长这样:

name: Deploy static source to my server

on: 
  push:
    branches:
      -master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: checkout
      uses: actions/checkout@v1
      
    - name: build
      run: npm install && npm run pub

    - name: deploy
      uses: closertb/deploy-static-action@master 
      with:
        name: 'doddle'
        token: ${{ secrets.Deploy_Token }}
        requestUrl: 'http://114.55.38.249:8080/operate/deploy'
        dist: 'dist'
        target: 'adminManage'

大概流程是这样:

  • 监听master分支的push操作;
  • checkout:新建构建分支
  • build:依赖安装,打包构建
  • deploy:将上一步的构建产物,打包部署到你的服务器静态资源文件中
  • over

部署的实现思路

构建很简单,就是打包,这种工具很多,什么script-build, roadhog,或自定义webpack。这里主要说部署;其实部署也很简单,看图:

image
嗯,部署也讲完了。详细实现过程看参见我自定义的action:deploy-static-action
关于上面的几个构建参数:

  • name:一个名字,自己随便啦,根据自己需要
  • token:这个比较重要,服务器的通关口令。这里最好的方式是通过项目的secrets来设置
  • dist:构建打包后的文件夹名,会根据这个文件夹名来获取其中的构建产物, 默认是dist
  • target:静态资源的目标文件夹名, 默认是dist
  • requestUrl:一个部署API

关于上传服务器

deploy-static-action其实只做了部署中的构建产物收集,真正的部署其实是依赖requestUrl来实现的,所以要实现 http://114.55.38.249:8080/operate/deploy 这个服务也很重要,你可以重用我的deploy-static-action,但部署API不能,因为这个API是给我的服务器私有定制的。不过我可以提供示例代码参考:
参考代码, deploy.js

一张构建效果图

定制你私有的前端构建部署(Github CI/CD)_第2张图片

原文见:https://github.com/closertb/closertb.github.io/issues/37

你可能感兴趣的:(前端工程化,node.js,github-actions)