自动化运维：如何构建和部署前端应用

在这篇文章中，我将向您展示如何管理依赖项以及使用Gulp构建前端应用程序，并将其安全地部署到服务器。

前端部署不再那么简单了

回想过去，一切都很简单：你只需将HTML上传到服务器，可能还带有一些(严重)压缩的图片，现在，大多数Web应用程序都需要在部署之前构建。该过程通常类似以下步骤：

• 首先，您得获取依赖项(npm、Composer、Yarn、Bower)
• 然后，连接并最小化资产、样式和脚本等。(Gulp、Grunt、Webpack、Babel)

列出的所有工具使项目工作更容易：控制依赖项，提高应用程序性能，从而提供更好的代码、优化和排错。

然而，在开发过程中有个事情可能会失控，那就是：部署！

正如我们以上所说，之前您只要将文件上传到服务器，OK，发布就搞定了！一些开发人员认为，他们如今依然想通过将依赖项(vendor、node_nodules等)和编译后的资产保存在存储仓/仓库中来保持这种简单性。如果您是这些开发人员之一并有这种想法，请千万不要这样做。这些东西是不应该放到您的存储仓/仓库之中！

永远不要将依赖项和编译过的工件放置于存储仓

• 具有依赖项和工件的存储仓正在快速增长。Git不是为处理大文件而设计的，文件越大，性能就越差。
• 如果您将工件存储在存储仓中，则需要记住在每次提交之前编译应用程序，以便可以将更改的工件与对源代码的更改一起提交。这是非常不理智的，因为如果您忘记更新存储仓中的工件，将应用程序部署到生产服务器可能会导致严重问题。
• 用于编译、最小化和连接文件的任务可能会产生不同的结果：就有如团队中开发人员使用不同版本的Node.js。将此类文件提交到存储仓将引发需要手动解决的持续冲突，这将使得分支合并变得非常麻烦。
• 在Node.js版本X中编译的应用程序可能无法在版本Y中正常工作 – 这是另一个人为因素问题，这使得很难100%确定生成的工件与生产服务器上的Node版本兼容。

部署包含更多步骤

好！既然我们知道将工件和依赖项保留在存储仓中不是一个好办法，那么问题是：我们应该如何将应用程序部署到服务器？如果没有持续部署工具，它通常类似以下步骤所示：

1. 应用程序通过SFTP/SCP或Git上传到服务器，并使用脚本构建，该脚本将下载依赖项并直接在服务器上运行任务。
2. 如果SSH访问不可用(例如，服务器是FTP)，则必须在部署之前在兼容的环境中构建应用程序。

永远不要手动部署

前面提到的人为因素增加了发布所耗的时间长度。更糟糕的是，它可能会产生很难发现和诊断的错误。

总而言之，整个部署过程应简化为单个操作:

• 使用一个可以在终端运行命令的修订版参数化脚本
• 使用一个可让您自动执行该过程的工具或应用程序

分割线以下为：使用Buddy自动化运维系统工具进行实际操作演示！

​

如何使用Buddy部署前端应用程序

在本文此部分中，我将向您展示如何在5分钟内创建一个交付流水线，该流水线将自动获取依赖项并运行Gulp任务。

注册并免费使用Buddy

访问Buddy网站​​https://buddy.red​​ 并使用您的GitHub/Bitbucket帐户或工作电子邮件进行注册

如果您使用电子邮件地址进行Buddy帐户注册，请使用您的工作邮箱，例如，带您的企业网址域名邮箱或您所在企业的域名邮箱。Buddy暂不开放一般免费电子邮件地址。

选择您的Git托管与存储仓/仓库

Buddy支持GitHub、Bitbucket、GitLab或者其他任何私有或开源的Git存储仓，您还可以使用具有合并请求和分支权限的Buddy自带全功能Git托管。

创建一个交付流水线

设置您想要部署的<u>分支</u>并配置<u>触发模式</u>: 事件(自动触发)、手动(点击触发)或定时(设定时间间隔触发)。

添加构建操作

为将提取依赖项并生成应用程序的项目类型选择生成操作。在此例中，我将下载Node模块并运行Gulp任务，因此选择Node.js操作：

提供应用程序的构建命令并选择Node版本：

请确保保存更改以将操作添加至流水线：

添加部署操作

应用程序已生成并准备好上传到服务器。Buddy允许您在几乎任何地方、任何方式部署代码：

在此，我们将选择SFTP作为示例。单击该操作后，系统将提示您选择要从何处部署文件。确保选择文件系统，因为它包含上一步中构建的应用程序：

提供您的服务器访问信息于传输目标，您可根据所需提供相关的服务器IP地址、用户名、密码等相关信息，您也可以提供SSH密钥信息对部署目标进行配置。为了更好地保护您的相关服务的敏感信息，您也可以通过​​环境变量​​的方式对敏感数据进行加密保护。

添加通知操作

最后，最好添加一个通知操作，让我们随时了解已完成的部署：

如果使用任务管理器运行测试，还可以添加条件通知，以便在测试失败时向您发送消息:

万事俱备！现在，推送到触发分支，并查看Buddy流水线它将自动构建和部署您的应用程序。