使用 Azure 应用服务部署 React App
大家好，今天我们将讨论如何将生产就绪的 React 应用程序部署到 Azure 云。对于今天的任务，如果您没有帐户，我们需要创建一个 azure 帐户和一个 azure DevOps 帐户，然后在下面创建一个 azure 帐户。
[
微软天青
编辑描述
门户网站.azure.com
还要在下面创建一个 azure DevOps 帐户并创建一个新项目。
[
Azure DevOps 服务 |微软天青
使用一组现代开发服务更智能地规划、更好地协作并更快地交付。适用于任何平台的 CI/CD 构建……
开发者.azure.com
1.New Project
创建项目后，我们可以看到这样的窗口。现在我们需要设置存储库来保存代码。我们可以在 Repos 部分看到远程 repo 连接的详细信息。
2.Repos for project
我们必须创建包含本地源代码的项目文件夹，并且可以使用从命令行推送现有存储库部分下的可用命令连接远程 Azure 存储库。
一旦我们连接了远程存储库，我们就可以提交源文件，然后使用命令 git push 从项目文件夹中将更改推送到远程存储库，如下所示。
3.Push the changes
现在存储库已准备就绪，我们将为此创建相应的应用服务以进行部署，我们需要登录到 天蓝色门户 .首先，我们将创建一个要在应用服务中使用的资源组。转到资源组，您将获得以下页面。
4.Resource group
现在单击创建部分，输入资源组名称后单击查看并创建
5.Create resource Group
现在我们将创建应用服务，转到主页中的应用服务部分，将有创建选项并单击它。然后你会得到下面的页面。
6. Create app service
在实例详细信息部分下提供合适的名称，因为它是域名的一部分。
现在我们将从 A 创建构建和发布所需的管道 天蓝色 DevOps .选择之前创建的项目后，转到管道部分，如下所示并创建一个新管道。
7.Create Pipeline
如果您熟悉 YAML，则可以选择可用选项，但最简单的方法是使用底部可用的经典编辑器选项。选择存储库，如下所示，还包括相应的分支。
8.Select Repository
然后我们将创建必要的管道阶段，如下所示。
9.Build Pipeline
点击Agent job 1中的“+”，搜索npm，添加两个如上图我们稍后配置。此外，建议使用发布和下载构建工件插件搜索并安装它，并包括发布构建工件和下载构建工件，如图所示。
10.npm install
您可以保留上述命令，并在您的存储库下选择正确的工作文件夹，该文件夹应该包含 package.json。然后我们进行下一步
11.npm build
配置相同的工作目录并给出正确的显示名称，如上所示。现在我们将进入下一步发布构建工件
12.Publish Artifacts
选择工作目录和构建位置作为要发布的路径，在我的情况下，工作目录是“asm”，因此我使用了 asm\build。现在我们将转到下载构建工件部分并更改目标目录，如下所示
13.Download Artifacts
现在选择选项保存和排队，它将触发构建。我们也可以像下面这样为持续集成启用触发器。
14.Continous Integration
现在我们将创建一个用于部署应用程序的发布管道。在管道部分下，我们可以选择版本并单击新建，它将具有以下窗口。然后点击 Artifacts 下的 add an artifact。
15.Release pipeline
选择相关的构建管道和详细信息后，您将获得类似下面的窗口并添加。在最后一步将需要以下源别名。
16.Add Artifacts
现在转到阶段并添加阶段，如下所示，您可以使用任何有意义的名称。
17.Add Stage
然后选择部署应用服务选项并应用，然后单击阶段中的链接。使用之前创建的应用服务的名称
18.Deploy Azure App Service
然后选择部署 Azure App 服务并包含下载工件包/文件夹，如下所示。
19.Deploy Azure App Service Configuration
现在保存并单击创建版本，如下所示。包括可选的详细信息，但不是必需的，然后单击创建。它将在门户中创建的应用服务上创建发布和部署。
20.Create Release
最后一件重要的事情是应该在 azure 门户中配置的启动命令，转到创建应用服务并在设置>配置>常规设置下包含以下命令。
21.Startup Command
该命令将使用我们在发布管道中的源别名而不是 _asm-portal_CI 并使用工件名称，默认为 drop。
pm2 服务 /home/site/wwwroot/_asm-portal-CI/drop — no-daemon
现在，如果您在应用服务部署中心选择浏览选项，您可以查看已部署的应用
22.Browse website
22.Deployed Application
就是这样，我们已经使用 azure app 服务部署了 react 应用程序。如果您有任何疑问，请随时在评论下留下。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/22040/17060708
标签：单击,创建,App,React,azure,所示,应用服务,Azure From： https://www.cnblogs.com/amboke/p/16663989.html