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

Question

前端时间写 用 React + Github Graphql API 自定义你的博客 , 见识了 Github Action 的强大，所以就尝试打造自己的前端构建部署工作流程；也许你看到过很多大厂的前端自动构建部署，但鲜有尝试，今天就可以自己动手啦，撸起来吧。

 

从 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。这里主要说部署；其实部署也很简单，看图：

嗯，部署也讲完了。详细实现过程看参见我自定义的 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 Actions for web apps
• creating-a-javascript-action
• github example