Bereitstellen einer Blazor-Anwendung in Azure

Foto von Arif Wahid auf Unsplash

Einführung

In diesem Artikel erfahren Sie, wie Sie eine von ASP.NET Core gehostete Blazor-Anwendung in Azure bereitstellen. Wir werden Visual Studio 2017 verwenden, um die App zu veröffentlichen. Wir werden einen SQL-Datenbankserver in Azure erstellen, um DB-Vorgänge abzuwickeln.

Voraussetzungen

  • Installieren Sie von hier aus das SDK für .NET Core 2.1 oder höher
  • Installieren Sie Visual Studio 2017 v15.7 oder höher von hier aus
  • Installieren Sie die ASP.NET Core Blazor Language Services-Erweiterung von hier
  • Ein Azure-Abonnementkonto. Hier können Sie ein kostenloses Azure-Konto erstellen

Weitere Informationen finden Sie in meinem vorherigen Artikel Kaskadieren von DropDownList in Blazor Verwenden von EF Core zum Erstellen der Anwendung, die in diesem Lernprogramm bereitgestellt wird.

Erstellen Sie eine Ressourcengruppe im Azure-Portal

Wir erstellen eine Ressourcengruppe im Azure-Portal, in der alle Ressourcen in Azure enthalten sind.

Melden Sie sich beim Azure-Portal an, klicken Sie im linken Menü auf Ressourcengruppen und dann auf Hinzufügen. Es öffnet sich ein Fenster mit der Bezeichnung "Ressourcengruppe" (siehe Abbildung unten):

In diesem Fenster müssen folgende Angaben gemacht werden:

  • Name der Ressourcengruppe: Geben Sie Ihrer Ressourcengruppe einen eindeutigen Namen. Hier verwenden wir den Namen BlazorDDLGroup.
  • Abonnement: Wählen Sie Ihren Abonnementtyp aus der Dropdown-Liste. Hier wählen wir das Abonnement "kostenlose Testversion".
  • Speicherort für Ressourcengruppen: Wählen Sie aus der Dropdown-Liste einen Speicherort für Ihre Ressourcengruppe aus.

Erstellen von SQL DB und DB-Server in Azure

Wir werden die SQL-Datenbank und einen Datenbankserver auf dem Azure-Portal erstellen, um unsere DB-Vorgänge abzuwickeln.

Klicken Sie im linken Menü Ihres Azure-Portals auf SQL-Datenbanken und dann auf Hinzufügen. Es wird ein "SQL-Datenbank" -Fenster geöffnet, wie in der folgenden Abbildung gezeigt:

Hier müssen Sie folgende Angaben machen:

  • Datenbankname: Geben Sie einen Namen für Ihre Datenbank ein. Hier verwenden wir DDLDemodb als unseren DB-Namen.
  • Abonnement: Wählen Sie Ihren Abonnementtyp aus der Dropdown-Liste. Hier wählen wir das Abonnement "kostenlose Testversion".
  • Ressourcengruppe: Wählen Sie den Namen der Ressourcengruppe aus, den Sie im vorherigen Schritt erstellt haben.
  • Quelle auswählen: Dieses Dropdown-Menü enthält eine Liste von Datenbanken mit vordefinierten Daten, die von Azure bereitgestellt werden. Da wir unsere benutzerdefinierte Datenbank erstellen, wählen Sie in dieser Dropdown-Liste die Option Leere Datenbank aus.
  • Preisstufe: Wählen Sie eine Preisstufe für Ihre Datenbank aus.

Vor dem Erstellen der Datenbank müssen Sie einen Datenbankserver für die SQL-Datenbank erstellen. Klicken Sie auf "Server Erforderliche Einstellungen konfigurieren" und dann auf "Neuen Server erstellen". Es wird ein Fenster "Neuer Server" geöffnet, wie in der folgenden Abbildung dargestellt:

Hier müssen wir folgende Angaben machen:

  • Servername: Geben Sie einen Namen für Ihren DB-Server an. Hier verwenden wir ddldemoserver. Der DB-Server wird erstellt, indem .database.windows.net an den vom Benutzer angegebenen Servernamen angehängt wird. Daher lautet der Servername in diesem Fall ddldbserver.database.windows.net.
  • Server-Administratoranmeldung: Geben Sie einen Administratoranmeldenamen für Ihren DB-Server ein.
  • Passwort: Geben Sie das Login-Passwort ein, das dem Administrator-Login für Ihren DB-Server entspricht.
  • Standort: Wählen Sie aus der Dropdown-Liste einen Standort für Ihren Server aus.

Aktivieren Sie das Kontrollkästchen "Zulassen, dass Azure-Dienste auf den Server zugreifen" und klicken Sie auf "Auswählen", um Ihren DB-Server zu erstellen.

Hinweis: Das Wort "admin" ist auf den Administrator-Benutzernamen des Datenbankservers beschränkt. Verwenden Sie einen anderen Benutzernamen als "admin".

Sobald der DB-Server erstellt wurde, werden Sie zurück zum Fenster „SQL-Datenbank“ geleitet. Sie müssen auf die Schaltfläche "Erstellen" klicken, um Ihre Datenbank zu erstellen.

Hier ist der gesamte Prozess in einem GIF erklärt.

DB-Tabellen erstellen

Die Datenbank DDLDemodb enthält nicht die Tabellen, die wir in unserer Anwendung verwenden. Wir stellen mithilfe von SQL Server Management Studio (SSMS) eine Verbindung zur Azure-Datenbank her, um unsere DB-Objekte zu erstellen.

Öffnen Sie SSMS auf Ihrem Computer und geben Sie den Servernamen ddldbserver.database.windows.net ein. Geben Sie die Administrator-Benutzer-ID und das Kennwort ein, die Sie im vorherigen Abschnitt konfiguriert haben. Klicken Sie dann auf "Verbinden".

Sie erhalten ein Popup-Fenster zum Konfigurieren der Firewall-Regel für den Zugriff auf die Azure-Datenbank. Melden Sie sich mit Ihren Azure-Konto-Anmeldeinformationen an und fügen Sie die IP-Adresse Ihres Computers unter Firewall-Regel hinzu. Klicken Sie auf OK, um eine Verbindung zum Azure-Datenbankserver herzustellen. Beziehen Sie sich auf das Bild unten:

Sobald die Verbindung erfolgreich hergestellt wurde, wird die DDLDemodb-Datenbank auf dem Server angezeigt. Siehe meinen vorherigen Artikel Cascading DropDownList in Blazor Using EF Core. Führen Sie die SQL-Befehle aus, um Beispieldaten in die in unserer Anwendung verwendeten Länder- und Städtetabellen zu erstellen und einzufügen.

Festlegen der DB-Verbindungszeichenfolge

Nach dem Erstellen der Datenbankobjekte müssen wir die Verbindungszeichenfolge der lokalen Datenbank in unserer Anwendung durch die Verbindungszeichenfolge der Azure-Datenbank ersetzen.

Öffnen Sie das Azure-Portal und klicken Sie im linken Menü auf SQL-Datenbanken. Es wird ein Fenster geöffnet, in dem die Liste aller Datenbanken angezeigt wird, die Sie im Azure-Portal erstellt haben. Klicken Sie auf DDLDemodb-Datenbank und wählen Sie im Menü Verbindungszeichenfolgen aus. Wählen Sie die Registerkarte ADO.NET und kopieren Sie die Verbindungszeichenfolge. Beziehen Sie sich auf das Bild unten:

Sie müssen die Administrator-Benutzer-ID und das Kennwort für den zuvor konfigurierten Datenbankserver in diese Verbindungszeichenfolge eingeben.

Öffnen Sie die BlazorDDL-Anwendung mit Visual Studio, navigieren Sie zu BlazorDDL.Shared / Models / myTestDBContext.cs und ersetzen Sie die lokale Verbindungszeichenfolge durch diese neue Verbindungszeichenfolge.

Starten Sie Ihre Anwendung in Visual Studio, um zu überprüfen, ob die neue Verbindungszeichenfolge richtig konfiguriert ist und Sie auf die Azure-Datenbank zugreifen können.

Wenn die Anwendung nicht funktioniert und Sie keine Verbindung zur Datenbank herstellen können, überprüfen Sie, ob Ihre Verbindungszeichenfolge korrekt ist. Wenn die Anwendung auf Ihrem lokalen Computer wie erwartet funktioniert, fahren Sie mit dem nächsten Abschnitt fort, um sie in Azure zu veröffentlichen.

Veröffentlichen der Blazor-Anwendung in Azure

Um die Blazor-App auf Azure zu veröffentlichen, klicken Sie mit der rechten Maustaste auf das Serverprojekt Ihrer Lösung und klicken Sie auf Veröffentlichen. In diesem Fall ist es BlazorDDL.Server >> Publish.

Daraufhin wird das Fenster Veröffentlichungsziel auswählen geöffnet. Wählen Sie im linken Menü App Service. Aktivieren Sie das Optionsfeld Neu erstellen und klicken Sie auf die Schaltfläche "Profil erstellen". Beziehen Sie sich auf das Bild unten:

Im nächsten Fenster werden Sie aufgefordert, sich bei Ihrem Azure-Konto anzumelden, wenn Sie nicht angemeldet sind. Nach erfolgreicher Anmeldung wird ein Fenster zum Erstellen eines App-Diensts geöffnet. Beziehen Sie sich auf das Bild unten:

In den Feldern dieses Fensters sind Standardwerte gemäß der Konfiguration Ihres Azure-Kontos enthalten. Sie können diese Werte jedoch je nach Ihren Anforderungen ändern.

Sie können die Details wie folgt eingeben:

  • App-Name: Geben Sie einen App-Namen für Ihre Anwendung an. Der Name der App unterliegt der Verfügbarkeit. Wenn der von Ihnen angegebene App-Name bereits verwendet wird, müssen Sie einen neuen App-Namen eingeben. Die öffentliche URL der Website lautet App-Name, gefolgt von .azurewebsites.net. Hier verwenden wir den Namen BlazorDDLDemo, daher lautet die URL für unsere Website BlazorDDLDemo.azurewebsites.net.
  • Abonnement: Wählen Sie Ihren Abonnementtyp aus der Dropdown-Liste.
  • Ressourcengruppe: Wählen Sie den Namen Ihrer Ressourcengruppe aus, in diesem Fall BlazorDDLGroup.
  • Hosting-Plan: Sie können entweder den vorhandenen Plan verwenden oder einen neuen Plan auswählen, indem Sie auf den Link „Neu…“ klicken.
  • Application Insights: Sie können einen Wert aus der Dropdown-Liste auswählen. Es bietet Analysen für Ihre Website.

Klicken Sie auf die Schaltfläche "Erstellen", um die Anwendungsbereitstellung in Azure zu starten. Je nach Geschwindigkeit Ihrer Internetverbindung dauert es einige Minuten, bis der Vorgang abgeschlossen ist.

Klicken Sie nach erfolgreicher Bereitstellung auf die Schaltfläche "Veröffentlichen", um die App in Azure zu veröffentlichen. Sobald die Anwendung erfolgreich veröffentlicht wurde, wird die Website automatisch im Standardbrowser Ihres Computers gestartet. Sie können die Website auch über die URL BlazorDDLDemo.azurewebsites.net aufrufen.

Sie können die Anwendung in Ihrem Browser wie in der folgenden Abbildung sehen:

Fazit

In diesem Artikel haben wir gelernt, wie eine Blazor-Anwendung in Azure bereitgestellt und veröffentlicht wird. Wir haben eine SQL-Datenbank und einen DB-Server in Azure erstellt und diese in unserer Anwendung zur Verarbeitung der DB-Vorgänge verwendet.

Holen Sie sich mein Buch Blazor Quick Start Guide, um mehr über Blazor zu erfahren.

Sie können auch meine anderen Artikel hier lesen.

Siehe auch

  • Bereitstellen einer Blazor-Anwendung auf IIS
  • Blazor - CRUD Mit MongoDB
  • JavaScript Interop In Blazor
  • Grundlegendes zu serverseitigem Blazor
  • Einseitige Anwendung mit serverseitigem Blazor
  • ASP.NET Core - CRUD mit Blazor und Entity Framework Core

Ursprünglich veröffentlicht unter https://ankitsharmablogs.com/