在Azure上部署Blazor应用程序


介绍

在本文中,我们将学习如何在Azure上部署ASP.NET核心托管的Blazor应用程序。我们将使用Visual Studio 2017发布该应用程序,并在Azure上创建一个SQL数据库服务器来处理数据库操作。

先决条件

  • 安装。核心2.1或更高版本here
  • 从安装Visual Studio 2017 v15.7或更高版本here
  • 从安装ASP.NET核心布拉佐语言服务扩展here
  • Azure订阅帐户。您可以创建一个免费的Azure帐户here

请参考我以前的文章Cascading DropDownList in Blazor Using EF Core创建我们将在本教程中部署的应用程序。

在蓝色门户上创建资源组

我们将在Azure门户上创建一个资源组,以包含我们在Azure上的所有资源。

登录Azure门户,点击Resource groups然后单击添加。它将打开一个“资源组”窗口,如下图所示:

在此窗口中,我们需要填写以下详细信息:

  • 资源组名称:为您的资源组指定一个唯一的名称。这里我们将使用这个名字BlazorDDLGroup
  • 订阅:从下拉列表中选择您的订阅类型。我们在这里选择“免费试用”套餐。
  • 资源组位置:从下拉列表中选择资源组的位置。

在天蓝色上创建数据库和数据库服务器

我们将在Azure门户上创建一个SQL数据库和一个数据库服务器来处理我们的数据库操作。

点击SQL databases然后单击添加。它将打开一个“数据库”窗口,如下图所示:

您需要在这里填写以下详细信息:

  • 数据库名称:输入数据库的名称。这里我们将使用DDLDemodb作为我们的数据库名称。
  • 订阅:从下拉列表中选择您的订阅类型。我们在这里选择“免费试用”套餐。
  • 资源组:选择我们在上一步中创建的资源组名称。
  • 选择来源:该下拉列表包含由Azure提供的预定义数据的数据库列表。由于我们正在创建自定义数据库,因此我们将选择Blank database从这个下拉列表中。
  • 定价层:为您的数据库选择一个定价层。

在创建数据库之前,我们需要为SQL数据库创建一个数据库服务器。单击“服务器配置所需设置”,然后单击Create a new server。它将打开一个“新服务器”窗口,如下图所示:

这里我们需要提供以下细节:

  • 服务器名称:为数据库服务器提供一个名称。这里我们将使用ddldemoserver。数据库服务器将通过添加.database.windows.net到用户提供的服务器名称。因此,服务器名称将是ddldbserver.database.windows.net在这种情况下。
  • 服务器管理员登录:为数据库服务器设置一个管理员登录名。
  • 密码:为数据库服务器设置对应于管理员登录的登录密码。
  • 位置:从下拉列表中选择服务器的位置。

选中“允许Azure服务访问服务器”复选框,然后单击Select创建您的数据库服务器。

“admin”一词仅限于数据库服务器的管理员用户名。使用除“管理员”以外的任何其他用户名

创建数据库服务器后,您将被重定向回“数据库”窗口。您需要点击“创建”按钮来创建您的数据库。

这是gif中解释的整个过程。

创建数据库表

数据库DDLDemodb不包含我们在应用程序中使用的表。我们将使用SQL Server管理工作室(SSMS)连接到Azure数据库,以创建我们的数据库对象。

在您的机器中打开SSMS,并将服务器名称设置为ddldbserver.database.windows.net。提供您在上一节中配置的管理员用户id和密码,然后单击“连接”

您将看到一个弹出窗口,用于配置防火墙规则以访问Azure数据库。使用您的Azure帐户凭据登录,并在下面添加您的机器IP地址Firewall rule。单击确定连接到Azure数据库服务器。请参考下图:

连接成功后,您可以看到DDLDemodb服务器上的数据库。参考我以前的文章Cascading DropDownList in Blazor Using EF Core并运行SQL命令在我们的应用程序中使用的国家和城市表中创建和插入样本数据。

设置数据库连接字符串

创建数据库对象后,我们需要用Azure数据库的连接字符串替换应用程序中本地数据库的连接字符串。

打开Azure门户,然后单击SQL databases在左边的菜单上。它将打开一个窗口,显示您在Azure门户上创建的所有数据库的列表。点击DDLDemodb数据库并选择Connection strings从菜单上。选择ADO.NET选项卡并复制连接字符串。请参考下图:

您需要将之前配置的数据库服务器的管理员用户id和密码放入此连接字符串中。

打开你的BlazorDDL应用程序,导航到BlazorDDL.Shared/Models/myTestDBContext.cs,并用这个新的连接字符串替换本地连接字符串。

从Visual Studio启动您的应用程序,以验证新的连接字符串配置是否正确,以及您是否能够访问Azure数据库。

如果应用程序不工作,并且您无法连接到数据库,请检查您的连接字符串是否正确。一旦应用程序在您的本地机器上按预期工作,那么转到下一部分,在Azure上发布它。

将Blazor应用程序发布到Azure

要在Azure上发布Blazor应用程序,请右键单击解决方案的服务器项目,然后单击发布。在这种情况下,它将是BlazorDDL.Server >> Publish

它会打开Pick a publish target窗户。挑选App Service从左边的菜单。选择Create New单选按钮,然后单击“创建配置文件”按钮。请参考下图:

如果您没有登录,下一个窗口将要求您登录Azure帐户。登录成功后Create App Service窗户会打开。请参考下图:

根据您的Azure帐户的配置,此窗口的字段中有默认值。但是,您可以根据自己的需求更改这些值。

您可以填写以下细节:

  • 应用程序名称:为您的应用程序提供一个应用程序名称。应用程序名称取决于可用性。如果您提供的应用程序名称已被使用,那么您需要提供一个新的应用程序名称。该网站的公共网址将是应用程序名称,后跟.azurewebsites.net。这里我们使用的名称为BlazorDDLDemo,因此我们网站的网址将是BlazorDDLDemo.azurewebsites.net
  • 订阅:从下拉列表中选择您的订阅类型。
  • 资源组:选择您的资源组名称,即BlazorDDLGroup,在这种情况下。
  • 托管计划:您可以使用现有计划,也可以通过单击“新建...”来选择新计划链接。
  • 应用洞察:您可以从下拉列表中选择一个值。它将为你的网站提供分析。

单击“创建”按钮,在Azure上启动应用程序部署。根据您的互联网连接速度,需要几分钟才能完成。

部署成功后,单击“发布”按钮将应用程序发布到Azure。一旦应用程序成功发布,网站将自动在您机器的默认浏览器中启动。您也可以使用网址访问网站,BlazorDDLDemo.azurewebsites.net

您可以在浏览器中看到该应用程序,如下图所示:

结论

在本文中,我们学习了如何在Azure上部署和发布Blazor应用程序。我们在Azure上创建了一个数据库和数据库服务器,并在我们的应用程序中用来处理数据库操作。

你也可以读我的其他文章here