定制你私有的前端部署到ECS服务器(Github CI/CD)-阿里云开发者社区

开发者社区> 开发与运维> 正文

定制你私有的前端部署到ECS服务器(Github CI/CD)

简介: 还在手动拷贝文件到服务器;还在不停git pull;还在天天登录你的服务器去部署静态资源;太low了,试试Github CI/CD自动部署吧

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

从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

一张构建效果图

image

文章首发:定制你私有的前端构建部署(Github CI/CD)
参考文章:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章