前端自动化构建及部署

前言

自动化这个字眼神圣而又高大上,对后端开发的同学来说也许再熟悉不过了,可对于前端开发来说,确实有些遥不可及,接下来分享下,我在前端项目的自动化实践。

实现方式

  • 一套是工作中经常使用的 Docker + Jenkins。Jenkins 是持续集成的关键。
  • 使用 DaoClound

什么是持续集成?

jenkins 的使用成本还是比较高的,因为需要搭建 Jenkins 的基本环境,但使用率想到高。我主要介绍的是第二套方案,成本低,但能实现自动化的功能。

DaoCloud 的使用

  1. 主机接入与集群管理

    需要将自己的虚拟机接入到 Daocloud,具体看这里

  2. 用 Docker 搭建前端应用

先看看我的项目image

具体实现步骤

这是 wo 博客实现自动化构建的过程

  1. 在项目的根目录加入 dockerfile 文件
    image
    上述内容就实现了将手动的命令,写成脚本让其实现自动执行的功能。dockerfile 是实现项目容器化的必备配置文件。
  2. 镜像的自动化构建(使用 github)

    代码源指定了您项目的代码仓库位置,关联代码源后,您对代码源的操作会自动触发项目的相应动作比如持续集成和镜像构建。
    image
    image

    选择目标项目,填写镜像名称,点击开始创建
    image
    点击前往流程定义按钮
    image
    点击手动构建选择需要构建的分支
    image

    image
    image
    上面一步就表示自动化构建成功了。

  3. 把构建的镜像发布到自己搭建的主机上
    image
    点击目标项目部署最新版按钮
    image
    image
    下面这一步就表示部署成功了
    image
    点击下面的提示的连接访问部署的项目
    image
    打开下面的自动发布按钮,每次项目 push 到目标分支都会进行自动构建和部署

最后

博客实例robinblog

angular 实例 ng-ant-admin

步骤写的比较简单,如果有不懂的可以在我的 blog 给我发消息。

blog 地址http://blog.rnode.me

作者

任裕斌 | robin

发布于

2018-04-23

更新于

2015-01-01

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.