将 React 应用部署到 Azure
介绍
根据Azure 的官方文档，“Microsoft Azure 可以让您自由地使用自己喜欢的工具和框架在庞大的全球网络上构建、管理和部署应用程序。”
无论您是在从事业余项目还是创业公司，Azure 都可以满足您的所有需求，包括部署、存储、扩展、安全性等。
本指南将引导您逐步完成将 React 应用部署到 Azure 应用服务的过程，并使用 Azure DevOps 简化 CI/CD。本指南使用通过react-bootstrap制作的 React 应用；您可以在此处阅读有关它的更多信息。
创建应用服务
要部署 React 应用，首先需要在 Azure 上创建应用服务。顾名思义，应用服务是用于构建、部署和扩展 Web 应用的平台。
步骤如下：
- 如果您尚未在Azure上创建帐户，您可以选择免费帐户来遵循本指南。
- 在Azure 仪表板上，选择“应用服务”，然后单击“添加”。
- 您将被要求配置此应用服务。
对于订阅，请选择您的免费订阅。为此应用创建一个新的资源组。本指南使用名为react-example-deploy 的资源组。
为您的应用指定一个唯一的名称；本指南使用rbtutorial。对于发布，选择代码。
选择Node 10.14作为运行时堆栈，并选择Windows作为操作系统。
最后，请选择离您最近的地区或保留默认设置。
- 将应用服务计划保留为默认值，然后点击“审核+创建”。审核完成后，您需要选择“创建”。
几分钟后，您的新应用服务将上线，您将看到这样的消息。
您可以访问{yourAppServiceName}.azurewebsites.net来查看实际效果。您可以根据您选择的运行时堆栈查看来自 Microsoft 的默认页面。您的 React 应用将部署在同一 URL 上。
配置 Azure DevOps
根据 Azure 的官方文档，“Azure DevOps 是微软推出的软件即服务 (SaaS) 平台，为开发和部署软件提供了端到端的 DevOps 工具链”。
在这里，我们将使用 Azure DevOps 来简化我们的应用程序中的持续集成和持续部署。
创建 Azure DevOps 组织
如果您已经创建了 Azure DevOps 组织，请跳过本小节。以下是创建 Azure DevOps 组织需要遵循的步骤：
登录到Azure DevOps。
单击“新建组织”。
- 系统将询问您是否继续。选择“继续”。
- 然后，系统会要求您为组织指定一个唯一名称。输入一个唯一名称并点击继续。本指南使用名为ReactExampleDeploy的组织。
您的组织现已创建，可通过https://dev.azure.com/{yourorganization}访问，其中yourorganization是您的组织的名称。
创建项目
在 Azure DevOps 组织仪表板上，创建一个新项目。为项目指定一个唯一的名称，然后点击“创建项目”。
这样，您的项目就创建完成了。
推动 React 项目
现在，您将通过命令行将 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，您可以运行构建、执行测试并将代码（发布）自动部署到各种开发和生产环境。”
以下是创建构建工件管道的步骤。
- 单击“管道”选项卡，然后单击“创建管道”。
- 当被问到“你的代码在哪里？”时，选择使用经典编辑器选项。
- 选择Azure Repos Git作为源，其他所有内容保留默认设置，然后点击“继续”。
- 当要求提供模板时，选择“空作业”。
- 现在将任务添加到代理作业 1。单击+号。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~