Schnellstart: Bereitstellen einer ASP.NET-Web-App

In dieser Schnellstartanleitung wird beschrieben, wie Sie Ihre erste ASP.NET-Web-App erstellen und für Azure App Service bereitstellen. App Service unterstützt verschiedene Versionen von .NET-Apps und bietet einen hochgradig skalierbaren Webhostingdienst mit Self-Patching. ASP.net Web-Apps sind plattformübergreifend und können unter Linux oder Windows gehostet werden. Am Ende verfügen Sie über eine Azure-Ressourcengruppe, die einen App Service-Hostingplan und eine App Service-Instanz mit einer bereitgestellten Webanwendung umfasst.

Voraussetzungen

Sie haben Visual Studio 2022 bereits installiert:

  1. Installieren Sie in Visual Studio die neuesten Updates, indem Sie Hilfe>Nach Updates suchen auswählen.
  2. Fügen Sie die Workload hinzu. Wählen Sie dazu Tools>Tools und Features abrufen aus.
Installieren Sie das aktuelle .NET 6.0 SDK.
Installieren Sie das aktuelle .NET 6.0 SDK.
Installieren Sie das aktuelle .NET 6.0 SDK.

Erstellen einer ASP.NET-Web-App

  1. Öffnen Sie Visual Studio, und wählen Sie Neues Projekt erstellen aus.

  2. Suchen Sie unter Neues Projekt erstellen die Option ASP.NET Core-Web-App, und wählen Sie sie aus. Wählen Sie anschließend Weiter aus.

  3. Geben Sie der Anwendung unter Neues Projekt konfigurieren den Namen MyFirstAzureWebApp, und wählen Sie dann Weiter aus.

    Visual Studio - Configure ASP.NET 6.0 web app.

  4. Wählen Sie .NET Core 6.0 (langfristige Unterstützung) aus.

  5. Stellen Sie sicher, dass der Authentifizierungstyp auf Keine festgelegt ist. Klicken Sie auf Erstellen.

    Visual Studio - Additional info when selecting .NET Core 6.0.

  6. Wählen Sie im Visual Studio-Menü Debuggen>Starten ohne Debugging aus, um die Web-App lokal auszuführen.

    Visual Studio - ASP.NET Core 6.0 running locally.

  1. Erstellen Sie im Terminalfenster einen neuen Ordner mit dem Namen MyFirstAzureWebApp, und öffnen Sie ihn in Visual Studio Code.

    mkdir MyFirstAzureWebApp
    code MyFirstAzureWebApp
    
  2. Öffnen Sie in Visual Studio Code das Terminalfenster, indem Sie Ctrl + ` eingeben.

  3. Erstellen Sie im Visual Studio Code-Terminal mit dem Befehl dotnet new webapp eine neue .NET Web-App.

    dotnet new webapp -f net6.0
    
  4. Führen Sie die Anwendung über das Terminal in Visual Studio Code mit dem Befehl dotnet run lokal aus.

    dotnet run --urls=https://localhost:5001/
    
  5. Öffnen Sie einen Webbrowser, und navigieren Sie zu der App auf https://localhost:5001.

    Die Vorlage für die ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    Visual Studio Code - run .NET 6.0 in browser locally.

  1. Öffnen Sie auf Ihrem Computer in einem Arbeitsverzeichnis ein Terminalfenster. Erstellen Sie mit dem Befehl dotnet new webapp eine neue .NET-Web-App, und ändern Sie dann die Verzeichnisse in der neu erstellten App.

    dotnet new webapp -n MyFirstAzureWebApp --framework net6.0
    cd MyFirstAzureWebApp
    
  2. Führen Sie die Anwendung aus derselben Terminalsitzung mithilfe des Befehls dotnet run lokal aus.

    dotnet run --urls=https://localhost:5001/
    
  3. Öffnen Sie einen Webbrowser, und navigieren Sie zu der App auf https://localhost:5001.

    Die Vorlage für die ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    Visual Studio Code - ASP.NET Core 6.0 in local browser.

Veröffentlichen Ihrer Web-App

Zum Veröffentlichen Ihrer Web-App müssen Sie zuerst eine neue App Service-Instanz erstellen und konfigurieren, auf der Sie Ihre App veröffentlichen können.

Erstellen Sie bei der Einrichtung der App Service-Instanz Folgendes:

  • Eine neue Ressourcengruppe, die alle Azure-Ressourcen für den Dienst enthalten soll.
  • Einen neuen Hostingplan, mit dem der Standort, die Größe und die Funktionen der Webserverfarm zum Hosten Ihrer App angegeben werden.

Führen Sie die folgenden Schritte aus, um Ihre App Service-Ressourcen zu erstellen und Ihr Projekt zu veröffentlichen:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt MyFirstAzureWebApp, und wählen Sie Veröffentlichen aus.

  2. Wählen Sie unter Veröffentlichen die Option Azure aus, und klicken Sie dann auf Weiter.

    Visual Studio - Publish the web app and target Azure.

  3. Wählen Sie als Spezifisches Ziel entweder Azure App Service (Linux) oder Azure App Service (Windows) aus. Klicken Sie anschließend auf Weiter.

    Wichtig

    Wenn Sie ASP.NET Framework 4.8 als Ziel auswählen, verwenden Sie Azure App Service (Windows) .

  4. Ihre Optionen hängen davon ab, ob Sie bereits bei Azure angemeldet sind und ob Sie über ein Visual Studio-Konto verfügen, das mit einem Azure-Konto verknüpft ist. Wählen Sie entweder Konto hinzufügen oder Anmelden aus, um sich bei Ihrem Azure-Abonnement anzumelden. Wenn Sie bereits angemeldet sind, wählen Sie das gewünschte Konto aus.

    Visual Studio - Select sign in to Azure dialog.

  5. Wählen Sie rechts von App Service-Instanzen die Option + aus.

    Visual Studio - New App Service app dialog.

  6. Akzeptieren Sie unter Abonnement das angegebene Abonnement, oder wählen Sie in der Dropdownliste ein neues Abonnement aus.

  7. Wählen Sie unter Ressourcengruppe die Option Neu aus. Geben Sie unter Name der neuen Ressourcengruppe den Namen myResourceGroup ein, und wählen Sie OK aus.

  8. Wählen Sie unter Hostingplan die Option Neu aus.

  9. Geben Sie im Dialogfeld Hostingplan: Neu erstellen die Werte ein, die in der folgenden Tabelle angegeben sind:

    Einstellung Vorgeschlagener Wert BESCHREIBUNG
    Hostingplan MyFirstAzureWebAppPlan Name des App Service-Plans.
    Location Europa, Westen Das Rechenzentrum, in dem die Web-App gehostet wird.
    Größe Free Der Tarif bestimmt die Hostingfeatures.

    Create new Hosting Plan

  10. Geben Sie unter Name einen eindeutigen App-Namen ein, der nur aus den folgenden zulässigen Zeichen besteht: a-z, A-Z, 0-9 und -. Sie können den automatisch generierten eindeutigen Namen übernehmen. Die URL der Web-App lautet http://<app-name>.azurewebsites.net, wobei <app-name> der Name Ihrer App ist.

  11. Wählen Sie Erstellen aus, um die Azure-Ressourcen zu erstellen.

    Visual Studio - Create app resources dialog.

    Nach dem Abschluss des Assistenten werden die Azure-Ressourcen für Sie erstellt, und Sie können Ihr ASP.NET Core-Projekt veröffentlichen.

  12. Vergewissern Sie sich im Dialogfeld Veröffentlichen, dass Ihre App Service-App unter App Service-Instanz ausgewählt ist, und wählen Sie dann Fertig stellen aus. Visual Studio erstellt ein Veröffentlichungsprofil für die ausgewählte App Service-App.

  13. Wählen Sie auf der Seite Veröffentlichen die Option Veröffentlichen aus. Wenn eine Warnmeldung angezeigt wird, klicken Sie auf Weiter.

    Visual Studio erstellt, packt und veröffentlicht die App in Azure und startet sie anschließend im Standardbrowser.

    Die ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    Visual Studio - ASP.NET Core 6.0 web app in Azure.

  1. Öffnen Sie in Visual Studio Code die BefehlspaletteSTRG++UMSCHALT++P.

  2. Suchen Sie „Azure App Service: „In Web-App bereitstellen“ aus.

  3. Gehen Sie bei den Aufforderungen wie folgt vor:

    1. Wählen Sie MyFirstAzureWebApp als Ordner für die Bereitstellung aus.
    2. Wählen Sie nach Aufforderung die Option Konfiguration hinzufügen aus.
    3. Melden Sie sich nach Aufforderung bei Ihrem Azure-Konto an.
    4. Wählen Sie Ihr Abonnement aus.
    5. Wählen Sie Neue Web-App erstellen... Erweitert aus.
    6. Verwenden Sie bei Geben Sie einen global eindeutigen Namen ein einen Namen, der in ganz Azure eindeutig ist (zulässig sind die Zeichen a-z, 0-9 sowie - ). Ein bewährtes Muster ist eine Kombination aus Ihrem Firmennamen und einer App-ID.
    7. Wählen Sie Neue Ressourcengruppe erstellen aus, und geben Sie einen Namen ein, z. B. myResourceGroup.
    8. Wenn Sie zur Auswahl eines Laufzeitstapelsaufgefordert werden:
    • Wählen Sie für .NET 6.0 die Option .NET 6 aus
    • Wählen Sie für .NET Framework 4.8 die Option ASP.NET V4.8 aus
    1. Wählen Sie ein Betriebssystem (Windows oder Linux) aus.
      • Bei .NET Framework 4.8 wird Windows implizit ausgewählt.
    2. Wählen Sie einen Ort in Ihrer Nähe aus.
    3. Wählen Sie Einen neuen App Services-Plan erstellen aus, geben Sie einen Namen an, und wählen Sie dann den TarifF1 Free aus.
    4. Wählen Sie für die Application Insights-Ressource die Option Vorerst überspringen aus.
  4. Wählen Sie im Popupfenster Immer den Arbeitsbereich „MyFirstAzureWebApp“ unter „<App-Name>“ bereitstellen die Option Ja aus, damit Visual Studio Code jedes Mal, wenn Sie sich in diesem Arbeitsbereich befinden, in derselben App Service-App bereitstellt.

  5. Wenn die Veröffentlichung abgeschlossen ist, wählen Sie in der Benachrichtigung Website durchsuchen aus, und wählen Sie bei entsprechender Aufforderung Öffnen.

    Die ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    Visual Studio Code - ASP.NET Core 6.0 web app in Azure.

  1. Melden Sie sich mithilfe des Befehls az login bei Ihrem Azure-Konto an, und folgen Sie der Eingabeaufforderung:

    az login
    
  2. Stellen Sie den Code mit dem Befehl az webapp up in Ihrem lokalen Verzeichnis MyFirstAzureWebApp bereit:

    az webapp up --sku F1 --name <app-name> --os-type <os>
    
    • Wenn der Befehl az nicht erkannt wird, stellen Sie sicher, dass Sie die Azure CLI gemäß der Beschreibung im Abschnitt Voraussetzungen installiert haben.
    • Ersetzen Sie <app-name> durch einen Namen, der innerhalb von Azure eindeutig ist (<app-name> ). Ein bewährtes Muster ist eine Kombination aus Ihrem Firmennamen und einer App-ID.
    • Mit dem Argument --sku F1 wird die Web-App im TarifFree erstellt. Lassen Sie dieses Argument weg, um einen schnelleren Premium-Tarif zu verwenden. Dieser verursacht jedoch stündlich Kosten.
    • Ersetzen Sie <os> entweder durch linux oder durch windows. Sie müssen windows verwenden, wenn Sie ASP.NET Framework 4.8als Ziel verwenden.
    • Optional können Sie das Argument --location <location-name> einfügen, wobei <location-name> eine verfügbare Azure-Region ist. Sie können eine Liste der zulässigen Regionen für Ihr Azure-Konto abrufen, indem Sie den Befehl az account list-locations ausführen.

    Die Ausführung des Befehls kann einige Minuten dauern. Bei der Ausführung werden Meldungen zum Erstellen der Ressourcengruppe, des App Service-Plans und der Hosting-App und zur Konfiguration der Protokollierung angezeigt, und anschließend erfolgt die ZIP-Bereitstellung. Anschließend wird eine Meldung mit der URL der App angezeigt:

    You can launch the app at http://<app-name>.azurewebsites.net
    
  3. Öffnen Sie einen Webbrowser, und navigieren Sie zu der URL.

    Die ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    CLI - ASP.NET Core 6.0 web app in Azure.

Hinweis

Zum Erstellen von Apps auf der Windows-Hostingplattform wird Azure PowerShell empfohlen. Verwenden Sie zum Erstellen von Apps unter Linux ein anderes Tool, etwa die Azure CLI.

  1. Melden Sie sich mithilfe des Befehls Connect-AzAccount bei Ihrem Azure-Konto an, und folgen Sie der Eingabeaufforderung:

    Connect-AzAccount
    
  1. Erstellen Sie mithilfe des Befehls New-AzWebApp eine neue App.

    New-AzWebApp -Name <app-name> -Location westeurope
    
    • Ersetzen Sie <app-name> durch einen Namen, der innerhalb von Azure eindeutig ist (gültige Zeichen: a-z, 0-9 und - ). Ein bewährtes Muster ist eine Kombination aus Ihrem Firmennamen und einer App-ID.
    • Optional können Sie den Parameter -Location <location-name> einfügen, wobei <location-name> eine verfügbare Azure-Region ist. Sie können eine Liste der zulässigen Regionen für Ihr Azure-Konto abrufen, indem Sie den Befehl Get-AzLocation ausführen.

    Die Ausführung des Befehls kann einige Minuten dauern. Während der Ausführung werden eine Ressourcengruppe, ein App Service-Plan und die App Service-Ressource erstellt.

  2. Bereiten Sie im Stammordner der Anwendung die lokale Anwendung MyFirstAzureWebApp mithilfe des Befehls dotnet publish auf die Bereitstellung vor:

    dotnet publish --configuration Release
    
  3. Wechseln Sie zum Releaseverzeichnis, und erstellen Sie aus dem Inhalt eine ZIP-Datei:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. Veröffentlichen Sie die ZIP-Datei mit dem Befehl Publish-AzWebApp in der Azure-App:

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
    

    Hinweis

    -ArchivePath benötigt den vollständigen Pfad der ZIP-Datei.

  5. Öffnen Sie einen Webbrowser, und navigieren Sie zu der URL.

    Die ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    CLI - ASP.NET Core 6.0 web app in Azure.

Aktualisieren der App und erneutes Bereitstellen

Führen Sie die folgenden Schritte aus, um Ihre Web-App zu aktualisieren und erneut bereitzustellen:

  1. Öffnen Sie im Projektmappen-Explorer unter Ihrem Projekt die Datei Index.cshtml.

  2. Ersetzen Sie das erste <div>-Element durch den folgenden Code:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    Speichern Sie die Änderungen.

  3. Klicken Sie zur erneuten Bereitstellung in Azure im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt MyFirstAzureWebApp, und wählen Sie Veröffentlichen aus.

  4. Wählen Sie auf der Zusammenfassungsseite Veröffentlichen die Option Veröffentlichen aus.

    Nach Abschluss der Veröffentlichung wird in Visual Studio ein Browser mit der URL der Web-App gestartet.

    Die aktualisierte ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    Visual Studio - Updated ASP.NET Core 6.0 web app in Azure.

  1. Öffnen Sie Index.cshtml.

  2. Ersetzen Sie das erste <div>-Element durch den folgenden Code:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    Speichern Sie die Änderungen.

  3. Öffnen Sie in Visual Studio Code die BefehlspaletteSTRG++UMSCHALT++P.

  4. Suchen Sie „Azure App Service: „In Web-App bereitstellen“ aus.

  5. Wählen Sie Bereitstellen, wenn Sie dazu aufgefordert werden.

  6. Wenn die Veröffentlichung abgeschlossen ist, wählen Sie in der Benachrichtigung Website durchsuchen aus, und wählen Sie bei entsprechender Aufforderung Öffnen.

    Die aktualisierte ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    Visual Studio Code - Updated ASP.NET Core 6.0 web app in Azure.

Öffnen Sie im lokalen Verzeichnis die Datei Index.cshtml. Ersetzen Sie das erste <div>-Element:

<div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

Speichern Sie Ihre Änderungen, und stellen Sie die App dann mit dem Befehl az webapp up erneut bereit:

ASP.NET Core 6.0 ist plattformübergreifend. Ersetzen Sie basierend auf Ihrer vorherigen Bereitstellung <os> durch linux oder windows.

az webapp up --os-type <os>

In diesem Befehl werden lokal zwischengespeicherte Werte aus der Datei .azure/config verwendet (einschließlich App-Name, Ressourcengruppe und App Service-Plan).

Wechseln Sie nach Abschluss der Bereitstellung wieder zu dem Browserfenster, das im Schritt Navigieren zur App geöffnet wurde, und wählen Sie die Option „Aktualisieren“ aus.

Die aktualisierte ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

CLI - Updated ASP.NET Core 6.0 web app in Azure.

  1. Öffnen Sie im lokalen Verzeichnis die Datei Index.cshtml. Ersetzen Sie das erste <div>-Element:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    
  2. Bereiten Sie im Stammordner der Anwendung die lokale Anwendung MyFirstAzureWebApp mithilfe des Befehls dotnet publish auf die Bereitstellung vor:

    dotnet publish --configuration Release
    
  3. Wechseln Sie zum Releaseverzeichnis, und erstellen Sie aus dem Inhalt eine ZIP-Datei:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. Veröffentlichen Sie die ZIP-Datei mit dem Befehl Publish-AzWebApp in der Azure-App:

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
    

    Hinweis

    -ArchivePath benötigt den vollständigen Pfad der ZIP-Datei.

  5. Wechseln Sie nach Abschluss der Bereitstellung wieder zu dem Browserfenster, das im Schritt Navigieren zur App geöffnet wurde, und wählen Sie die Option „Aktualisieren“ aus.

    Die aktualisierte ASP.NET Core 6.0-Web-App wird auf der Seite angezeigt.

    CLI - Updated ASP.NET Core 6.0 web app in Azure.

Verwalten der Azure-App

Wechseln Sie zum Verwalten Ihrer Web-App zum Azure-Portal, und suchen Sie nach App Services. Wählen Sie diese Option anschließend aus.

Azure portal - Select App Services option.

Wählen Sie auf der Seite App Services den Namen Ihrer Web-App aus.

Azure portal - App Services page with an example web app selected.

Die Seite Übersicht für Ihre Web-App enthält Optionen für die grundlegende Verwaltung, z. B. Durchsuchen, Beenden, Starten, Neustarten und Löschen. Im linken Menü können Sie auf weitere Seiten für die Konfiguration Ihrer App zugreifen.

Azure portal - App Service overview page.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, können Sie sie löschen, indem Sie die Ressourcengruppe löschen.

  1. Wählen Sie auf der Seite „Übersicht“ Ihrer Web-App im Azure-Portal den Link myResourceGroup unter Ressourcengruppe aus.
  2. Vergewissern Sie sich, dass es sich bei den auf der Seite „Ressourcengruppe“ aufgeführten Ressourcen wirklich um die Ressourcen handelt, die gelöscht werden sollen.
  3. Klicken Sie auf Löschen, geben Sie myResourceGroup in das Textfeld ein, und klicken Sie anschließend erneut auf Löschen.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, können Sie sie löschen, indem Sie die Ressourcengruppe löschen.

  1. Wählen Sie auf der Seite „Übersicht“ Ihrer Web-App im Azure-Portal den Link myResourceGroup unter Ressourcengruppe aus.
  2. Vergewissern Sie sich, dass es sich bei den auf der Seite „Ressourcengruppe“ aufgeführten Ressourcen wirklich um die Ressourcen handelt, die gelöscht werden sollen.
  3. Klicken Sie auf Löschen, geben Sie myResourceGroup in das Textfeld ein, und klicken Sie anschließend erneut auf Löschen.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen:

az group delete --name myResourceGroup

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen voraussichtlich nicht mehr benötigen, löschen Sie die Ressourcengruppen mit folgendem PowerShell-Befehl:

Remove-AzResourceGroup -Name myResourceGroup

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.

Nächste Schritte

In dieser Schnellstartanleitung haben Sie eine ASP.NET-Web-App auf Azure App Service bereitgestellt.

Fahren Sie mit dem nächsten Artikel fort, um sich darüber zu informieren, wie Sie eine .NET Core-App erstellen und dafür eine Verbindung mit einer SQL-Datenbank herstellen: