前言

“如果你有开发环境、测试环境、预发布环境、正式环境， 那么如何去部署你的项目将会是一件很头大的事情。”

市面上已经有很多成熟的自动化构建部署方案，区别就是设置门槛和便捷性问题。在这里抛砖引入，介绍一个即使新手，也能在半天完成的自动化方案。

核心

——“使用华为devcloud流水线，搭建一套前端项目自动化构建部署工具”

配置流程

1、注册华为devcloud账号

2、登录后，找到：产品--开发者--流水线(华为提供免费使用的基础版和升级版(12元))

3、创建管理项目， 这里主要是配置管理你的项目，相当于全家桶般项目管理工具

4、点击项目进入项目管理界面

顶部“构建&发布--流水线”

这里就是正式进入自动化构建部署配置

流水线顾名思义就是把多个相对独立的环节组合在一起，然后顺序完成，最后交付给我们完整的结果。

5、点击右上角“新建流水线”

——输入自定义名称和描述

6、点击“下一步”，选择项目代码源

我使用的是码云：

“新增服务扩展点”：相当于创建一个账号，授权登录一样

accessToken就是码云里面的私人令牌

选择扩展点后，会自动读取你仓库项目，对应你需要的项目和分支即可，

如果需要推送代码后自动触发流水线工作， 可以选择触发事件

7、“下一步”——选择模板：选择不适用模板，点击确定就创建好了基于某个项目某个分支的流水线

8、流水线已经创建好，完成整个流水线任务的步骤还需要创建相对独立的构建任务和部署任务

这里开始创建构建任务：点击“构建&发布”选择“编译构建”

进入构建任务界面

点击“新建任务”，进入构建任务配置
a.自定义名字

b.默认关联已创建好的项目

"下一步"：选择代码源

“下一步”：选择构建模板

前端项目主要使用npm或者yarn

但是这里选择yarn后，node版本最高只支持10+版本，不适用

所以选择npm，node最高支持12+

点击确定后, 进入配置构建步骤:

已经帮你写好了构建脚本,可以删除不需要的

其实这里的代码只是正常的本地打包步骤，并不能满足自动化部署使用

我们需要在项目中安装tar包，同时在项目根目录下新建tar配置文件

作用是将我们打包好的文件(dist)，将dist文件夹下所有文件压缩成

xxx.tar.gz包

前端项目tar配置文件:

可以根据你自己的项目修改

在package.json中增加tar构建命令

然后修改npm构建命令

构建完成后, 我们需要添加一个步骤，将打包好的文件上传到发布库

点击“npm构建”下面的“+”，增加步骤

主要配置3个地方：

构建包路径：就是刚才tar配置文件中， 压缩包的存放路径

版本号：可以在参数设置中配置，最终以"${}"方式读取

包名: 可以在参数设置分钟配配置，最终以“${}”方式读取

配置好后，点击“新建”，就创建好了一个构建任务

可以执行一次，看看是否正常构建

构架成功后， 会在发布仓生成我们打包好的文件：

这里的路径就是刚才配置的：包名/版本号/压缩包名

构建任务完成, 就离成功不远了

9、新建“部署任务”：

就是将我们打包好的文件上传到我们服务器

“新建任务”：

a自定义名称 b默认关联项目 c自定义描述

"下一步": 选择空包模板即可

"下一步"：进入部署配置页面

a. 添加"选择部署来源": 就是我们要上传的项目包

这里的主机组：就是一个建一个能登陆服务器的账号，并且有权限操作

如果版本号是动态改变的，可以在“参数设置”中配置，同样以“${}”读取

软件包路径，可以在发布仓中看到

b. 添加“执行shell命令”：就是把项目包上传到服务器后，要执行什么操作。

这里的命令作用就是：

进入服务器项目目录--删除项目文件--解压项目包--删除项目包

shell命令：

cd /home/web ——服务器执行进入指定文件目录

rm -rf likeabc ——删除之前项目文件夹

tar xvf likeanc-test.tar.gz ——解压项目包，具体使用zxvf还是xvf，需要根据你的服务器配置决定，一个不能用，就换另一个。

rm -rf likeabc-test.tar.gz ——删除压缩包

“保存执行”,验证是否成功

10、我们已经建立好了构建任务和部署任务，并独立运行成功，现在可以将这些任务合并到流水线上，完成我们最终需要的一键自动化构建和部署

a. 在流水线上添加一个构建任务

b. 点击发布仓库右边的“+”，新增一个部署流程

c. 最后就形成了一个完整的流水线

至此，我们就已经建好了一个完整的可运行的一键自动化构建部署前端项目的工具了。

整体难点：

1. 构建任务配置中的npm配置和项目文件使用tar压缩的配置。

2. 上传到发布库的包路径设置，构建失败主要问题就是出在这里，一定要确保包路径跟你tar压缩包存放路径一致。

3. 部署中的执行shell命令， 很多人不会写，毕竟我们不是后台开发或者运维，能对服务器命令得心应手。

按以上步骤配置， 细心点，你也能配置出属于你的自动化工具

我是mofle，我在微信公众号：无JS不前端

等你