将 React 应用部署到 Azure

介绍

根据Azure 的官方文档，“Microsoft Azure 可以让您自由地使用自己喜欢的工具和框架在庞大的全球网络上构建、管理和部署应用程序。”

无论您是在从事业余项目还是创业公司，Azure 都可以满足您的所有需求，包括部署、存储、扩展、安全性等。

本指南将引导您逐步完成将 React 应用部署到 Azure 应用服务的过程，并使用 Azure DevOps 简化 CI/CD。本指南使用通过react-bootstrap制作的 React 应用；您可以在此处阅读有关它的更多信息。

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

步骤如下：

对于订阅，请选择您的免费订阅。为此应用创建一个新的资源组。本指南使用名为react-example-deploy 的资源组。

为您的应用指定一个唯一的名称；本指南使用rbtutorial。对于发布，选择代码。

选择Node 10.14作为运行时堆栈，并选择Windows作为操作系统。

最后，请选择离您最近的地区或保留默认设置。

几分钟后，您的新应用服务将上线，您将看到这样的消息。

您可以访问{yourAppServiceName}.azurewebsites.net来查看实际效果。您可以根据您选择的运行时堆栈查看来自 Microsoft 的默认页面。您的 React 应用将部署在同一 URL 上。

根据 Azure 的官方文档，“Azure DevOps 是微软推出的软件即服务 (SaaS) 平台，为开发和部署软件提供了端到端的 DevOps 工具链”。

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

如果您已经创建了 Azure DevOps 组织，请跳过本小节。以下是创建 Azure DevOps 组织需要遵循的步骤：

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

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

这样，您的项目就创建完成了。

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

以下是您需要遵循的步骤。

      git init
git add .
git commit -m "Initial Commit"
    

在项目仪表板上，转到Repos 。复制Push an already repository from command line下的代码，然后在命令行中运行该代码。系统可能会要求您登录 Azure 帐户才能继续操作。

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

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

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

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文