使用宝塔部署node项目_抛弃jenkins，使用node从零搭建自动化部署管理平台

一、背景

H5页面由于其具有发布灵活、跨平台、易于传播等突出特点，所以H5页面是引流拉新、宣传推广的重要渠道和方式，备受各公司的青睐。

小编的日常工作就是做各种面向用户的H5促销活动的开发，在整个开发周期中，结合我司的一些情况，我总结了H5活动页面的以下特点：

1. 面向用户，流量大；

2. 各端展示方案不同，需要兼容各端(比如活动规则、展示模块，ios和android不一样)；

3. 需求变更频繁；

4. 合作方较多(需要跟各个业务线合作联调)；

5. 排期紧张；

所以开发测试期间，部署效率就显得特别重要了。

由于我司的CDN发布平台，需要手动创建模板、粘贴代码，部署效率比较低下；并且活动页面代码分散，无法统一管理和实现工程化，所以决定实现一套自动化部署系统，目前已经投入使用半年时间了，极大地提高了我们的工作效率。我称这个自动化部署系统为【H5 活动管理平台】。

二、H5 活动管理平台自动化部署实现方案

介绍该平台实现方案之前，先放张效果图，好有一个直观的认识。

H5活动管理平台界面

该平台实现主要依赖于本地开发工程、gitlab，三者之间通过通信交互，实现的自动化部署。

image

最终达到的效果就是：当本地开发分支merge到测试分支devTest或者master分支时，该平台会自动拉取最新代码，构建目标文件，然后将目标文件部署到对应的服务器目录，另外提供了上下线、版本回滚、定时上下线等常用功能。

整体架构流程图：

H5活动管理平台架构流程图

下面对一些关键技术点进行详细介绍

1. 本地开发工程

我们的本地开发工程，是使用node + webpack + babel等相关技术搭建的多页面开发工程，不同的活动位于不同的目录。因为要做自动化构建部署处理，跟【H5活动管理平台】交互，所以有以下要点需要注意(可根据自己项目情况，自由调整方案)。

1. 本地开发工程作为自动化构建部署的源头，需要提供构建命令行用于构建测试文件和线上文件，便于后面shell命令调用。如在package.json中加入如下命令：

"scripts": {
    
    "local": "cross-env NODE_ENV=local node build.js", // 本地开发命令
    "build": "cross-env NODE_ENV=product node build.js", // 构建上线文件
    "test": "cross-env NODE_ENV=test node build.js" // 构建测试文件
}

2. 提供构建配置文件dev-config.js，用于过滤webpack构建时的入口目录，只构建编译当前正在开发的活动页面，提高构建速度。

//dev-config.js
module.exports = {
    
    devPages: ['test']   //  当前自己正在开发页面目录，不写时会编译所有活动页面
}

3. 提供活动页面目录信息配置config.json，该配置信息用于【H5活动管理平台】的展示，也就是效果图中的信息源。

// config.json
{
    
  "pages": [
        {
    
            "folder": "lion",
            "desc": "前端名狮",
            "author": "诀九",
            "user": "juejiu"
        },
        {
    
            "folder": "test",
            "desc": "活动测试页面",
            "author": "诀九",
            "user": "juejiu"
        }
    ]
}

4. 构建生成的 JS 和 HTML 文件，存放在 dist 目录下的对应活动目录中。构建生成的目录结构如下：

|--dist
   |-- lion
       |-- lion_app.js
       |-- index.html
   |--test
       |-- test_app.js
       |-- index.html

5. 提测时，将开发分支merge到devTest分支，上线时，将开发分支merge到master分支。