Shane In Tech Life

as above

0%

Azure DevOps自动化部署React应用到Azure App Service

发表于 更新于

前言

Azure DevOps 提供了项目管理和源代码管理的功能，它的自动化构建和发布可以让我们专注于业务逻辑，省去了一些CI/CD的繁杂琐事。

根据 Azure 的官方文档，

Microsoft Azure 具有充分的自由和灵活性，可以随时随地生成、管理和部署应用程序，帮助用户实现目标。使用你首选的语言、框架和基础结构（甚至可使用你自己的数据中心和其他云）解决大大小小的难题。

本文将介绍如何使用Azure DevOps创建React应用的构建和发布管道部署到 Azure App Service，快速上手Azure DevOps自动化部署

创建应用服务

要部署 React 应用，首先需要在 Azure 上创建应用服务。顾名思义，应用程序服务（Azure App Service）是用于构建、部署和扩展 Web 应用程序的平台。

以下是步骤：

  1. 如果尚未在 Azure 上创建帐户，则可以选择免费帐户。

App_Services

  1. 对于订阅，请选择您的免费订阅。为此应用程序创建一个新的 Resource Group。本文使用名为 react-example-deploy 的资源组。选择 Node 10.14 作为 Runtime Stack，选择 Windows 作为 Operating System。最后，请选择离您最近的地区或保持默认。

App_Service_Config

  1. 点击创建几分钟后，您的新应用服务将上线，您将看到这样的消息。你可以访问 {AppServiceName}.azurewebsites.net 来查看它的实际效果。现在是一个磨人页面，之后 React 应用程序将部署在同一个 URL 上。

Deployment_Complete

创建应用服务

在这里，我们将使用 Azure DevOps 在我们的应用程序中简化持续集成和持续部署。

创建 Azure DevOps 组织

如果你已经创建了 Azure DevOps 组织，请随意跳过。以下是创建 Azure DevOps 组织的步骤：

  1. 登录到 Azure DevOps.
  2. 点击 New organization.

New_Organization

  1. 你会被问到是否继续. 选择 继续.

Continue

  1. 然后您将被要求为您的组织提供一个唯一的名称。输入一个唯一的名称并点击继续。本文使用名为 ReactExampleDeploy 的组织。
    反应示例部署

ReactExampleDeploy

您的组织现已创建，可以通过 https://dev.azure.com/{yourorganization} 访问，其中 yourorganization 是您组织的名称。

Creating a Project创建项目

在 Azure DevOps 组织仪表板上，创建一个新项目。为您的项目指定一个唯一名称，然后点击创建项目

New_Project

推动 React 项目

您现在将 React 应用程序从您的本地机器推送到您刚刚通过命令行创建的项目。

  1. 在您的应用程序的根目录中，运行以下命令。
1
2
3
git init
git add .
git commit -m "Initial Commit"

bash

  1. 在您的项目仪表板上，转到 Repos。复制从命令行推送现有存储库下的代码并在命令行中运行相同的代码。可能会要求您登录 Azure 帐户以继续操作。把代码push到仓库。

Pushing Project

运行此命令后，您可以在 Repos → Files 下看到您的 React 项目。Pushed

现在你已将应用推送到 Azure DevOps 项目，下一步是创建用于构建工件的管道和用于部署 React 应用的发布管道。

创建构建工件管道

根据 Azure 的文档，“您可以使用 Azure Pipelines运行构建、执行测试并将代码（发布）自动部署到各种开发和生产环境。”

以下是创建构建工件管道的步骤。

  1. 单击 Pipelines 选项卡然后单击Create Pipeline.

Create a Pipeline

  1. 当被问到“你的代码在哪里？”时，选择使用经典编辑器选项。

Use the classic editor

  1. 选择 Azure Repos Git 作为源，将其他所有内容保留为默认值，然后点击Continue.

Azure Repos Git

  1. 当要求提供模板时，选择Empty job.

Empty_Job

  1. 单击 + 号

React CI

搜索“npm”并添加两次 npm 任务。

npm

你可能会问，为什么要两次？由于此任务用于node包，因此您需要另一个用于构建项目的任务；不存在默认任务，因此您需要为此创建自定义任务。

点击第二个npm任务，配置如下。

  • 将显示名称更改为 npm run build.
  • 将命令更改为自定义.
  • 在命令和参数中添加运行构建

npm run build

  1. 现在，搜索发布构建工件并将其添加到代理作业 1。

Publish build artifacts

单击 Publish build artifacts 然后修改 Path to publish为 build.

Path to publish

  1. 转到触发器选项卡并选择启用持续集成。您可以将其他所有内容保留为默认值。

CI

  1. 最后，单击 Save & queue 并再次点击 Save & queue。

Save & queue

在运行管道模式中，将所有内容保留为默认值，然后点击保存并运行。

Save and run

几分钟后，管道将成功完成运行。您可以在 Pipelines 选项卡下检查以验证它。

创建发布管道

发布管道将部署在上一节中构建的工件。

以下是创建发布管道的步骤：

  1. 转到Pipelines** → Releases 然后单击 New pipeline.

New pipeline release

  1. 选择Azure App Service Deployment 然后点击 Apply.

Azure App Service Deployment

您将被要求为Stage命名。进入 Production 并关闭模态。

Production

  1. 现在点击 Add an artifact.

Add an artifact

对于 Source，选择您在上一节中创建的管道，即 React Deploy Example-CI。将其他所有内容保留为默认值，然后点击添加。

React Deploy Example-CI

  1. 要配置持续部署，请单击 Artifacts 中的闪电图标。

Ligthning

启用第一个禁用选项，在 Build 分支中输入 master，然后关闭模态框。

master

  1. 在 Stages下面 点击 1 job, 1 task .

Stages

会弹出配置 Deploy Azure App Service.

Deploy Azure App Service

根据您的订阅选择 Azure 订阅。您可能需要单击授权并授权订阅。

Azure subscription

App service name

点击 Deploy Azure App Service, 然后在 Package or folder 输入:

1
$(System.DefaultWorkingDirectory)/_React Deploy Example-CI/drop

drop

  1. 最后点击保存

Save

Leave the modal that appears at default and hit OK.

OK

现在，单击 Create release，它将出现在 Save 按钮的右侧。

Create release

创建发布

Create

几分钟后，您的应用程序将部署在 {yourappservicename}.azurewebsites.net。

由于您已经配置了 CI/CD，您可以在本地机器上更新应用程序并将提交推送到 repo，这将触发新版本，并且您的 React 应用程序将被更新。

总结

在本文中，我们讨论了如何使用 CI/CD 将 React 应用程序部署到 Azure App Service 的过程。

下一步，可以去尝试探索 Azure 提供的不同功能。

以下是一些相关文档。