多年来,开发 Web 应用程序变得越来越容易。使用 Flutter,它变得非常简单和有趣。但老实说,部署它有时会很痛苦。大多数服务还没有为托管在 Web 上的 Flutter 项目做好准备。当然,some are 但它需要一些修补。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Zma6h_d0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/0%2AZuxm0Houm1FyBdTE)

我不介意修修补补,我的意思是......为什么不呢?

在本教程中,我将与您分享如何使用 Azure DevOps Pipelines 在 Flutter Web 部署中实现 CI/CD。最重要的是,我们将使用 Netlify!为什么我听起来很兴奋?因为老实说,Netlify 非常易于使用。现在,事不宜迟,让我们开始吧。

安装依赖

在开始之前,我们需要预先安装所需的依赖项。

1\。安装 Flutter 插件

好吧,您可以使用Flutter 插件进行 DevOps开发人员已经为我们制作了该工具。感谢Aloïs完成繁重的工作!我们可以将此工具用于我们的目的。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--DTSII1kW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/1%2AngPggahl55mBGRJ-FGlSRg.png)

单击该按钮后,您将显示在此屏幕上:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--JHn1791N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A52i3t0Qhvy239I_MS3GPpA.png)

现在你要做的是:

1. 选择您要安装的组织。

2. 点击安装。

2\。安装 Nelitify 插件

为 DevOps](https://marketplace.visualstudio.com/items?itemName=aliencube.netlify-cli-extensions)安装[Netlify 插件。感谢Aliencube完成繁重的工作!我们可以将此工具用于我们的目的。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--g1JmjzbI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2Ajv3I_5-xsOTw5rvU9OwA8A.png)

单击该按钮后,您将显示在此屏幕上:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xIov4TRt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AMuPn6jiFUqW8KnVkxl4Xww.jpeg)

现在你要做的是:

1. 选择您要安装的组织。

2. 点击安装。

创建您的 Netlify 站点

本节将讨论如何使用 Netlify CLI 创建一个空的 Netlify 站点。我们将使用 npm 为我们安装它。就我而言,我使用 Ubuntu 18.04 作为 npm 安装的主机操作系统。

1\。安装 Netlify CLI

要安装 Netlify CLI,您只需要运行:

npm install netlify-cli -g

进入全屏模式 退出全屏模式

安装完成后,运行以下命令检查是否安装正确:

netlify

进入全屏模式 退出全屏模式

2\。从 CLI 登录到 Netlify

在开始使用 CLI 之前,Netlify 需要您进行身份验证。

netlify login

进入全屏模式 退出全屏模式

然后将打开一个浏览器窗口:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--nhR9_AHX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2A4FnW4DUyG4w5_kPC.png)

3\。创建空白站点

完成登录后,使用以下命令创建一个空白站点:

netlify sites:create --name _<site name>_

进入全屏模式 退出全屏模式

4\。检索您的站点 ID 和个人访问令牌

要远程运行持续开发,您需要站点 ID 和个人访问令牌来帮助您

[](https://res.cloudinary.com/practicaldev/image/fetch/s--yb_YcsKn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/1%2APxWjk8axlVeVwmUt33_gQw.png)

通过以下方式检索您的站点 ID:

1.进入网站设置。

2. 复制 API ID 值。

下一步是检索个人访问令牌。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fxhW65Uk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2Atbk9PgZpJudHMFp6kUvdvg.png)

转到用户设置。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--DMy-ma1Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/1%2AAKe8XmKjoeIzeCfples1MA.png)

要获得访问令牌,您必须创建一个新令牌:

1. 转到应用程序选项卡。

2. 单击新访问令牌。

复制并保存下一个屏幕上显示的访问令牌,并保存它,因为您以后需要它。

创建 CI/CD 管道

这部分是我最喜欢的,因为它使用 Azure DevOps。老实说,我喜欢使用 UI(例如经典编辑器)的管道构建体验。但是,如何使用 Azure DevOps 构建 Flutter 项目?

1\。创建 CI 管道

如果您使用的是 Azure DevOps,我们无法像使用 Github、Gitlab 或 Bitbucket 那样从 Netlify 端附加 CI/CD 管道。所以,我们必须放下并弄脏自己(在一点点帮助下)。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WFef_dfP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/1%2AtlnoTcTVMomfdREqv4-3gg.png)

首先,创建您的管道:

1. 单击左侧窗格中的 Pipelines。

2. 打开 Pipelines 目录。

3. 单击新管道。

现在,Azure DevOps 的美妙之处在于它们拥有所有这些的 UI,因此您根本不需要使用 YAML。虽然您可以从 UI 生成 YAML 代码。使用经典编辑器,您无需记住两个 YAML 语法,并且可以使用视觉效果轻松进行部署步骤。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--12q5BcNT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AQedkUDLpwccXAdxvYegBYg.png)

您始终可以在其他服务中使用 YAML 进行配置,但让我们面对现实吧,使用 UI 会好得多。要使用 UI 启用管道配置,请在创建管道时单击下面的小使用经典编辑器链接:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--csF9fym2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AkkHm8ht19fXaH29NTHqcyw.png)

选择经典编辑器后,配置您的项目:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--YzzMXcAT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/1%2AeKEEhy8lVmAWILNp5D8kcg.png)

需要这些配置来说明您将在管道中使用哪个项目,首先:

1. 选择 Azure Repos Git,从 Azure DevOps 中选择存储库。

2. 选择你的团队项目。

3. 选择您想要 CI 的存储库。

4. 选择存储库分支。

5. 单击继续。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sj9ZpKef--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AXy65VtOhVJU4j-Td-3Pk7w.png)

选择 Empty job 按钮为我们的 Flutter 部署配置创建一个全新的状态。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--T_-DyGpx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/1%2ATS7XNzRgBE7XTmMSC879Jw.png)

代理工作 1 出现后,您需要:

1. 点击 + 按钮在管道中添加新任务。

2. 搜索 Flutter 安装。

3. 点击Flutter 安装。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--014RjK-i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/1%2AXGnxKbjSWXkEBuElDjgNAg.png)

添加 Flutter install 后,我们可以添加 Flutter 测试任务,以便在构建和部署之前在我们的管道中启用测试。但是因为我准备了一个小应用程序并且我专注于部署,所以我不会将测试添加到任务列表中。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fSZvf2lV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A1wCLnwZr7P-flEIcxA3W8g.png)

接下来,将两个 Flutter Command 任务添加到管道中。仅供参考,任务是故意可视化我们的 CI/CD 管道如何连接的阶段形式。

面对现实吧,使用 UI 要好得多。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--i4V7hKWh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AEFSPGRwA00ZhLFDP72DNrQ.png)

第一个 Flutter 命令 任务将是启用 Web 配置(即允许构建 Web 项目)。

1. 点击Flutter Command 任务。

2. 将显示名称更改为 Flutter Enable Web(可选)。

3. 添加 Flutter 参数以启用 Web 配置:

config --enable-web

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fotmUMwY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AoeQhNtLL0XWYoPA0Uzh51Q.png)

要构建 Web 项目,我们必须使用 Flutter Command 任务手动运行它。

1. 点击Flutter Command 任务。

2. 将显示名称更改为 Flutter Run Build Web(可选)。

3. 添加 Flutter 参数以构建 Web 项目:

build web

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--trh-wddr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/1%2AxsFcjMbriYuUmwspfakwLw.png)

向 Copy files 添加新任务:

1. 点击 + 按钮添加新任务。

2. 搜索复制文件。

3. 添加复制文件任务。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--slbctUok--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AJcHH8-BvCC1_pmuI7oDiNQ.png)

构建项目后,需要将构建文件复制到 artifacts 目录:

1. 单击复制文件任务。

2. 将源文件夹更改为 $(Build.SourcesDirectory)/build/web。

3. 将目标文件夹更改为 $(Build.ArtifactStagingDirectory)。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--q64bCgI8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2Ai2HONWrqH04lMo1WEatx0w.png)

向 Publish build artifacts 添加新任务:

1. 点击 + 按钮添加新任务。

2. 搜索发布构建工件。

3. 添加发布构建工件 任务。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--nhueSAYP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AK1sbK9jzcue5qpJNITm3iw.png)

添加 Publish build artifacts 任务后,您可以在发布后更改工件的名称,在这种情况下,我将其更改为 ci-artifact。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MtDyuMHb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AWSvqzb2DlskuGHlrnIE8qw.png)

完成后,保存 CI 管道。

TL;DR 如果您想使用 YAML,您可以在此处复制并粘贴此 YAML 文件:

pool:
  name: Azure Pipelines
steps:
- task: aloisdeniel.flutter.flutter-install.FlutterInstall@0
  displayName: 'Flutter Install'

- task: aloisdeniel.flutter.flutter-command.FlutterCommand@0
  displayName: 'Flutter Enable Web'
  inputs:
    arguments: 'config --enable-web'

- task: aloisdeniel.flutter.flutter-command.FlutterCommand@0
  displayName: 'Flutter Run Build Web'
  inputs:
    arguments: 'build web'

- task: CopyFiles@2
  displayName: 'Copy Files'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/build/web'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: ci-artifact'
  inputs:
    ArtifactName: 'ci-artifact'

进入全屏模式 退出全屏模式

2\。创建 CD 管道

持续部署部分将用于将我们的构建直接推送到 Netlify。这部分类似于大多数 JAMStack 应用程序,例如 React、Vue、Next 和 Flutter Web。Clyde D'Souza的一篇文章影响了这一特定部分。但当然,我稍微修改了一下,因为我们使用的项目是 Flutter 项目。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--eo0dRvTp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AOygcnF5mrnsRGgLFKBMisg.png)

打开发布管道,单击屏幕左侧的发布选项卡:

1. 单击选项卡左侧的管道。

2. 打开发布。

3. 单击新建。

4. 单击新发布管道。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Rnv9uXUg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A9jXOfo-ozzfogunzdGCO_A.png)

创建一个空作业。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--oErekeq9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AH8SF23SAP0kioaI358_YTA.png)

将 CD 管道与 CI 管道连接:

1.添加工件。

2. 选择您的项目。

3. 选择你的 CI 管道

4. 添加管道。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MfLApIUr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A4TAHp-48BRxcxNa7805bPQ.png)

在成功构建后启用持续部署触发器:

1、点击闪电标志,打开触发页面。

2. 单击启用按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4BlKpW1o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/1%2AZnM9xtSoIvqoer3DITJUmw.png)

将新任务添加到新 CD 管道:

1. 打开您的 Tasks 标签。

2. 单击 + 按钮。

3. 搜索提取文件。

4. 将任务添加到管道。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--uYjTegNe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AYuz4WMvTXt9tQm_4pj3MZQ.png)

根据构建 ID 提取工件。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--pNS6gAL4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2Aw341jpMUhSmQmu0DVNk3SA.png)

将新任务添加到新 CD 管道:

1. 点击 + 按钮。

2. 搜索 Netlify。

3. 将 Install Netlify CLI 任务添加到管道中。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GRPT_Ecj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AZ9Vq4cGKp6rd1U0YeKSbZQ.png)

将新任务添加到新 CD 管道:

1. 点击 + 按钮。

2. 搜索 Netlify。

3. 将 Deploy Website 任务添加到管道中。

要将我们的 CD 管道连接到我们的 Netlify 站点,我们需要拥有访问令牌和站点 ID。我们利用管道变量使其更易于访问并为令牌提供保密性。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--CUynfmXa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AtEpST9H8SwhfhWj8z-NsyQ.png)

单击 + 添加 按钮两次。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--BA7cghUU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/800/1%2AHKk674mSac5xSASz-rfr2A.png)

您将看到 4 个输入框。将变量的名称放在左侧框中,将值放在右侧。为方便起见,将访问令牌变量命名为 PAT,并将另一个变量分别命名为 SiteID。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--R29VBeoj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A6Qamra986ORQOxI7nLyg8w.png)

更改部署配置:

1. 单击部署到 Netlify。

2. 插入您的访问令牌。

3. 插入站点 ID。

4. 选择构建源目录。

您的 CD 管道应该已完成,保存管道并尝试自己运行它!您可以在此处查看我部署的虚拟站点。

总结

在本教程中,你学习了如何使用 CI/CD 和 Azure DevOps 来 Flutter Web 部署。然后,我们在 Netlify 上部署了该站点。

回顾一下我们所做的:

• 安装了 Flutter 和 Netlify 依赖项。

• 在 Netlify 上创建了一个空白站点。

• 从 Netlify 检索到授权令牌和站点 ID。

• 准备 CI/CD 管道。

现在,当您想要自动化部署时,您可以使用一个开放的剧本。在下一个教程中,我们将研究如何利用Github Actions 为 Flutter Web 和 Netlify 创建 CI/CD 管道。