近来手痒，又陷入了自我捣腾的无限循环。
其实事情是这样的，最近阿里云搞活动（嗯，友情打广告），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
一张构建效果图
文章首发：定制你私有的前端构建部署（Github CI/CD）
参考文章：
- [Github Actions for web apps
](https://lukeboyle.com/blog-posts/2019/08/github-actions-for-web-apps/) - creating-a-javascript-action
- github example
