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

近来手痒，又陷入了自我捣腾的无限循环。

其实事情是这样的，最近阿里云搞活动(嗯，友情打广告)，229买了个3年版低配服务器；前端时间写用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

一张构建效果图