使用 DevCloud 流水线自动化部署 Web 应用

我们在本机开发完网站的代码之后，执行 npm run build，这时将在 dist 目录得到网站的所有静态资源文件，可以先在本地用看下效果。

为了将其部署到服务器，并通过 Nginx 服务器访问，我们需要将这些文件上传到服务器的 nginx 目录，一个一个文件传肯定不现实，需要将其压缩打包，然后上传到服务器，最后解压到 nginx 的 html 目录就算部署完成。

Step 1: 压缩打包 tar

Step 2: 解压部署 deploy

2.1 压缩打包

npm run build 构建出来的静态资源都存放在 dist 目录下，只需要执行以下命令即可生成 tar 压缩包：

tar czvf devui.tar.gz ./dist 

2.2 解压部署

登录服务器，使用 rz 命令将上一步生成的 tar 包上传到 Linux 服务器，然后使用 tar 命令解压到 nginx 的 html 目录即可完成部署。

tar zxvf devui.tar.gz 

如果每次开发完都需要手动执行以上步骤，将会非常麻烦，并且很容易出错。

为什么不将其自动化呢？

3 使用 DevCloud 流水线实现自动部署

为了实现 Web 应用的自动化部署，我们主要需要使用 DevCloud 的 流水线/编译构建/发布/部署4 个服务。

主要分成以下 4 个步骤：

1. 创建 DevCloud 项目
2. 创建流水线
3. 创建构建任务
4. 创建部署任务

3.1 创建 DevCloud 项目

由于 DevCloud 所有服务都是通过项目承载的，因此需要先创建下项目，这里创建一个看板项目。

先进入，按以下步骤即可创建一个看板项目：

1. 点击右上角的创建项目
2. 选择看板项目
3. 输入项目名称
4. 确定

项目创建成功之后直接进入该项目首页，点击头部菜单 构建&发布 下的 流水线 按钮即可进行流水线首页。

3.2 创建流水线

在流水线首页的右上角有一个创建流水线的按钮，点击即可进入流水线的创建流程。

创建一条流水线主要分成以下步骤：

• 输入流水线名称
• 选择模板，这里我们选择空模板
• 选择代码源，直接只用 Github 代码仓库即可
• 自定义工作流

选择代码源

为了选择 Github 代码仓库的源，我们需要新增一个服务扩展点，获得 Github 的授权，这样 DevCloud 流水线这边才可以拉取 Github 的代码，进行构建、部署等步骤。

新增扩展点的步骤也很简单：

• 输入扩展点名称
• 进行 OAuth 授权

有了扩展点，就可以选择你的 Github 仓库作为代码源啦。

选完代码源就可以创建你的流水线啦。

可以新创建的流水线包含 3 个阶段，第一个阶段关联了一个 Github 的代码仓，第二个阶段是一个空的构建阶段，里面什么任务也没有，第三个阶段是一个不可编辑的发布仓库阶段。

这个流水线目前什么都做不了，我们需要往里面添加任务才能完成网站的自动化部署。

3.3 创建构建任务

回顾下之前的手工部署步骤：

1. 构建源代码
2. 压缩源代码
3. 上传软件包到服务器
4. 解压软件包到 Nginx 目录

因此我们首先需要在流水线中添加一个构建任务：

1. 在构建阶段添加一个构建类型的任务
2. 创建一个构建任务
3. 在流水线选择上一步创建好的流水线

3.3.1 在构建阶段添加一个构建类型的任务

在构建阶段添加一个任务，然后在侧滑中选择构建类型，这时该类型下是没有构建任务的，因此没法选择，需要先创建构建任务。

3.3.2 创建一个构建任务

在选择需要调度的任务中点击创建按钮，进入新建构建任务的页面，按照指引创建一个构建任务：

1. 输入构建任务名称
2. 选择我们之前创建的 Endpoint 实例，以及该示例下的 Github 仓库
3. 不使用模板，直接创建
4. 添加 Npm 构建和上传软件包道发布库这两个构建步骤（关键）
5. 配置构建参数

Npm 构建

该步骤直接使用默认的构建脚本命令，只需要增加打 tar 包的命令即可：

... npm install # 安装依赖库 
npm run build # 普通的 NG CLI 生产包构建命令 
npm run tar # 新增 

tar 命令：

"tar": "node scripts/tar.js", 

tar.js

const fs = require('fs'); 
const tar = require('tar'); 
fs.stat('./result', (error, stats) => { 
    if (error) { 
        fs.mkdirSync('./result'); // 不存在 result 目录则创建一个空的 
    } 
    tar.c({ gzip: true }, ['dist']) // 将 dist 目录下的文件全部打包 
    .pipe(fs.createWriteStream('./result/devui.tar.gz')); // 将生成的 tar 包（devui.tar.gz）放到 result 目录下 
}); 

上传软件包到发布库

上一个 Npm 构建步骤已经将压缩包创建好了，这个任务的目的是将这个 tar 包上传到发布库，也就是之前流水线中的第 3 个阶段，方便部署时下载 tar 包到目标服务器。

该步骤主要需要填写构建包路径：

./result/devui.tar.gz 

发布版本号和包名不要写死，从部署参数里拿，格式如下：

${releaseVersion} 

其中 releaseVersion 就是下一步需要配置的构建参数。

配置构建参数

codeBranch 是默认的参数，我们需要增加 releaseVersion 和 serviceName 两个构建参数，一个用于每次构建时的版本号，另一个就是服务名。

3.3.3 在流水线选择上一步创建好的流水线

回到流水线，就可以选择上一步创建好的流水线，保存即可。

至此构建的步骤已经搞定了，我们可以跑一下试试。

跑完流水线我们就能在发布仓库看到我们的 tar 构建包。

有了构建包我们就可以拿它去服务器部署啦，当然我们肯定不会选择手工的方式部署，而是在流水线中创建一个部署任务，让所有过程自动化进行。

3.4 创建部署任务

在流水线中添加部署任务和添加构建任务差不多，只需要以下 3 步即可：

1. 添加一个新的阶段
2. 在该阶段中添加一个部署类型的任务
3. 创建一个部署任务（关键）
4. 在步骤 2 中选择步骤 3 中创建的部署任务

创建一个部署任务

和创建构建任务类似：

1. 输入部署任务名称
2. 选择空白模板，直接创建
3. 添加选择部署来源和执行 shell 命令这两个构建步骤（关键）
4. 配置部署参数

选择部署来源

关键是需要选择 主机组，填写 软件包 和 部署目录。

软件包就是之前发布仓库的软件包，直接从 /devui/${releaseVersion} 取即可，其中 ${releaseVersion} 是部署参数，和之前的构建参数类似。

部署目录是要将 tar 压缩包上传到目标机器中的目录，我们传到 /devui 目录中。

主机组需要新建，选择主机组旁边的 新建 按钮，进入创建主机组页面，只需要以下步骤即可创建一个主机组：

1. 填写主机组名称
2. 添加主机（之前申请的 ECS 弹性云主机）

添加主机需要填写的信息：

1. 主机名
2. 主机 IP 地址
3. 用户名（root）
4. 密码
5. 端口号（22）

执行 shell 命令

执行 shell 命令是当你已经把 tar 软件包上传到目标服务器之后，希望执行的 shell 命令，我们当然是希望将 tar 包解压出来喽。

执行以下 shell 即可：

rm -rf /usr/local/nginx/html/* # 删除之前部署过的静态资源 
tar zxvf /devui/${serviceName}.tar.gz -C /usr/local/nginx/html # 解压 tar 包到 nginx 的 html 目录 
mv /usr/local/nginx/html/dist/* /usr/local/nginx/html/ 

配置部署参数

这里的部署参数和构建参数的配置方式是一样的，不再赘述。

添加好部署任务我们就可以跑下流水线，看下效果。

流水线跑完之后，四个阶段都会显示绿色。

部署完之后访问咱们的主机 IP 地址即可看到网站效果。

3.5 定时任务

搭建完流水线，我们可以配置一个定时任务，每天或每周自动用指定分支跑流水线，完全不用人工干预。

为了保障版本质量，我们也可以在配置灰度部署策略，添加拨测任务，保障每一次部署现网都不出问题。

限于篇幅就不一一介绍了，感兴趣的小伙伴可以关注官方文档，里面详细地介绍了从需求规划到研发、测试、运维整套 DevOps 流程的玩法。

4 小结

本文详细地介绍如何将一个网站的 Github 仓库源码自动化部署到服务器。

先介绍申请服务器和搭建服务器环境，重点介绍在 Linux 服务器搭建 Nginx 服务的步骤；

然后简单介绍了手动部署流程；

最后详细介绍了如何利用 DevCloud 流水线工具，实现自动化部署。