Bereitstellen einer App für App ServiceDeploy an app to App Service

Azure App Service ist die Webhostingplattform von Azure.Azure App Service is Azure's web hosting platform. Das Bereitstellen einer Web-App für Azure App Service kann manuell oder über einen automatisierten Prozess erfolgen.Deploying a web app to Azure App Service can be done manually or by an automated process. In diesem Abschnitt des Leitfadens werden Bereitstellungsmethoden behandelt, die manuell oder per Skript über die Befehlszeile bzw. manuell mit Visual Studio ausgelöst werden können.This section of the guide discusses deployment methods that can be triggered manually or by script using the command line, or triggered manually using Visual Studio.

In diesem Abschnitt führen Sie die folgenden Aufgaben aus:In this section, you'll accomplish the following tasks:

  • Herunterladen und Erstellen der Beispiel-AppDownload and build the sample app.
  • Erstellen einer Azure App Service-Web-App mit der Azure Cloud ShellCreate an Azure App Service Web App using the Azure Cloud Shell.
  • Bereitstellen der Beispiel-App in Azure mit GitDeploy the sample app to Azure using Git.
  • Bereitstellen einer Änderung für die App mit Visual StudioDeploy a change to the app using Visual Studio.
  • Hinzufügen eines Stagingslots zur Web-AppAdd a staging slot to the web app.
  • Bereitstellen eines Updates für den StagingslotDeploy an update to the staging slot.
  • Vertauschen von Staging- und ProduktionsslotsSwap the staging and production slots.

Herunterladen und Testen der AppDownload and test the app

Die in diesem Leitfaden verwendete App ist eine vorgefertigte ASP.NET Core-App, Simple Feed Reader.The app used in this guide is a pre-built ASP.NET Core app, Simple Feed Reader. Es handelt sich um eine Razor Pages-App, die die Microsoft.SyndicationFeed.ReaderWriter-API verwendet, um einen RSS-/Atom-Feed abzurufen und die Nachrichtenelemente in einer Liste anzuzeigen.It's a Razor Pages app that uses the Microsoft.SyndicationFeed.ReaderWriter API to retrieve an RSS/Atom feed and display the news items in a list.

Sie können den Code nach Belieben überprüfen, aber es ist wichtig, zu verstehen, dass diese App keine Besonderheiten aufweist.Feel free to review the code, but it's important to understand that there's nothing special about this app. Es handelt sich lediglich um eine einfache ASP.NET Core-App zur Veranschaulichung.It's just a simple ASP.NET Core app for illustrative purposes.

Laden Sie den Code über eine Befehlsshell herunter, erstellen Sie das Projekt und führen Sie es wie folgt aus.From a command shell, download the code, build the project, and run it as follows.

Hinweis: Linux-/macOS-Benutzer sollten entsprechende Änderungen an den Pfaden vornehmen, z. B. einen Schrägstrich (/) anstatt eines umgekehrten Schrägstrichs (\) verwenden.Note: Linux/macOS users should make appropriate changes for paths, e.g., using forward slash (/) rather than back slash (\).

  1. Klonen Sie den Code in einen Ordner auf Ihrem lokalen Computer.Clone the code to a folder on your local machine.

    git clone https://github.com/Azure-Samples/simple-feed-reader/
    
  2. Ändern Sie Ihren Arbeitsordner in den simple-feed-reader-Ordner, der erstellt wurde.Change your working folder to the simple-feed-reader folder that was created.

    cd .\simple-feed-reader\SimpleFeedReader
    
  3. Stellen Sie die Pakete wieder her, und erstellen Sie die Projektmappe.Restore the packages, and build the solution.

    dotnet build
    
  4. Führen Sie die App aus.Run the app.

    dotnet run
    

    Der Befehl „dotnet run“ wurde erfolgreich ausgeführt.

  5. Öffnen Sie einen Browser, und navigieren Sie zu http://localhost:5000.Open a browser and navigate to http://localhost:5000. Die App ermöglicht es Ihnen, eine Syndication-Feed-URL einzugeben oder einzufügen und eine Liste von Nachrichtenelementen anzuzeigen.The app allows you to type or paste a syndication feed URL and view a list of news items.

    Die App, die den Inhalt eines RSS-Feeds anzeigt.

  6. Wenn Sie sich vergewissert haben, dass die Anwendung ordnungsgemäß funktioniert, beenden Sie sie durch Drücken von STRG + C in der Befehlsshell.Once you're satisfied the app is working correctly, shut it down by pressing Ctrl+C in the command shell.

Erstellen der Azure App Service-Web-AppCreate the Azure App Service Web App

Zum Bereitstellen der App müssen Sie eine App Service-Web-App erstellen.To deploy the app, you'll need to create an App Service Web App. Nachdem Sie die Web-App erstellt haben, können Sie mit Git von Ihrem lokalen Computer aus für sie bereitstellen.After creation of the Web App, you'll deploy to it from your local machine using Git.

  1. Melden Sie sich bei Azure Cloud Shell an.Sign in to the Azure Cloud Shell. Hinweis: Wenn Sie sich zum ersten Mal anmelden, fordert Cloud Shell Sie auf, ein Speicherkonto für Konfigurationsdateien zu erstellen.Note: When you sign in for the first time, Cloud Shell prompts to create a storage account for configuration files. Akzeptieren Sie die Standardwerte, oder geben Sie einen eindeutigen Namen an.Accept the defaults or provide a unique name.

  2. Verwenden Sie Cloud Shell für die folgenden Schritte.Use the Cloud Shell for the following steps.

    a.a. Deklarieren Sie eine Variable, um den Namen Ihrer Web-App zu speichern.Declare a variable to store your web app's name. Der Name muss eindeutig sein, damit er in der Standard-URL verwendet werden kann.The name must be unique to be used in the default URL. Die Verwendung der Bash-Funktion $RANDOM zum Erstellen des Namens sorgt für Eindeutigkeit und Ergebnisse im Format webappname99999.Using the $RANDOM Bash function to construct the name guarantees uniqueness and results in the format webappname99999.

    webappname=mywebapp$RANDOM
    

    b.b. Erstellen Sie eine Ressourcengruppe.Create a resource group. Ressourcengruppen bieten eine Möglichkeit, Azure-Ressourcen zu aggregieren und als Gruppe zu verwalten.Resource groups provide a means to aggregate Azure resources to be managed as a group.

    az group create --location centralus --name AzureTutorial
    

    Der Befehl az ruft die Azure-Befehlszeilenschnittstelle auf.The az command invokes the Azure CLI. Die Befehlszeilenschnittstelle kann lokal ausgeführt werden, aber die Verwendung in Cloud Shell spart Zeit und Konfiguration.The CLI can be run locally, but using it in the Cloud Shell saves time and configuration.

    c.c. Erstellen Sie einen App Service-Plan im S1-Tarif.Create an App Service plan in the S1 tier. Ein App Service-Plan ist eine Gruppierung von Web-Apps, die denselben Tarif aufweisen.An App Service plan is a grouping of web apps that share the same pricing tier. Der S1-Tarif ist nicht kostenlos, aber er ist für das Stagingslots-Feature erforderlich.The S1 tier isn't free, but it's required for the staging slots feature.

    az appservice plan create --name $webappname --resource-group AzureTutorial --sku S1
    

    d.d. Erstellen Sie die Web-App-Ressource mit dem App Service-Plan in derselben Ressourcengruppe.Create the web app resource using the App Service plan in the same resource group.

    az webapp create --name $webappname --resource-group AzureTutorial --plan $webappname
    

    e.e. Legen Sie die Anmeldeinformationen für die Bereitstellung fest.Set the deployment credentials. Diese Anmeldeinformationen für die Bereitstellung gelten für alle Web-Apps in Ihrem Abonnement.These deployment credentials apply to all the web apps in your subscription. Verwenden Sie keine Sonderzeichen im Benutzernamen.Don't use special characters in the user name.

    az webapp deployment user set --user-name REPLACE_WITH_USER_NAME --password REPLACE_WITH_PASSWORD
    

    f.f. Konfigurieren Sie die Web-App so, dass sie Bereitstellungen vom lokalen Git akzeptiert und die URL für die Git-Bereitstellung anzeigt.Configure the web app to accept deployments from local Git and display the Git deployment URL. Notieren Sie diese URL zur späteren Bezugnahme.Note this URL for reference later.

    echo Git deployment URL: $(az webapp deployment source config-local-git --name $webappname --resource-group AzureTutorial --query url --output tsv)
    

    g.g. Zeigen Sie die URL der Web-App an.Display the web app URL. Navigieren Sie zu dieser URL, um die leere Web-App anzuzeigen.Browse to this URL to see the blank web app. Notieren Sie diese URL zur späteren Bezugnahme.Note this URL for reference later.

    echo Web app URL: http://$webappname.azurewebsites.net
    
  3. Navigieren Sie über eine Befehlsshell auf Ihrem lokalen Computer zum Projektordner der Web-App (z B. .\simple-feed-reader\SimpleFeedReader).Using a command shell on your local machine, navigate to the web app's project folder (for example, .\simple-feed-reader\SimpleFeedReader). Führen Sie die folgenden Befehle aus, um Git so einzurichten, dass es einen Push für die Bereitstellungs-URL ausführt:Execute the following commands to set up Git to push to the deployment URL:

    a.a. Fügen Sie die Remote-URL zum lokalen Repository hinzu.Add the remote URL to the local repository.

    git remote add azure-prod GIT_DEPLOYMENT_URL
    

    b.b. Pushen Sie den lokalen Masterbranch zum Remote-Masterbranch von azure-prod.Push the local master branch to the azure-prod remote's master branch.

    git push azure-prod master
    

    Sie werden aufgefordert, die zuvor erstellten Anmeldeinformationen für die Bereitstellung einzugeben.You'll be prompted for the deployment credentials you created earlier. Beobachten Sie die Ausgabe in der Befehlsshell.Observe the output in the command shell. Azure erstellt die ASP.NET Core-App remote.Azure builds the ASP.NET Core app remotely.

  4. Navigieren Sie in einem Browser zu der Web-App-URL und beachten Sie, dass die App erstellt und bereitgestellt wurde.In a browser, navigate to the Web app URL and note the app has been built and deployed. Weitere Änderungen können mit git commit für das lokale Git-Repository committet werden.Additional changes can be committed to the local Git repository with git commit. Diese Änderungen werden mit dem vorhergehenden git push-Befehl nach Azure gepusht.These changes are pushed to Azure with the preceding git push command.

Bereitstellung mit Visual StudioDeployment with Visual Studio

Hinweis: Dieser Abschnitt gilt nur für Windows. Linux- und macOS-Benutzer sollten die unter Schritt 2 beschriebene Änderung vornehmen. Speichern Sie die Datei, und übertragen Sie die Änderung mit git commit in das lokale Repository. Pushen Sie abschließend die Änderung mit git push, wie im ersten Abschnitt.Note: This section applies to Windows only. Linux and macOS users should make the change described in step 2 below. Save the file, and commit the change to the local repository with git commit. Finally, push the change with git push, as in the first section.

Die App wurde bereits von der Befehlsshell aus bereitgestellt.The app has already been deployed from the command shell. Lassen Sie uns die integrierten Tools von Visual Studio verwenden, um ein Update für die App bereitzustellen.Let's use Visual Studio's integrated tools to deploy an update to the app. Im Hintergrund erreicht Visual Studio dasselbe wie das Befehlszeilentool, jedoch innerhalb der vertrauten Benutzeroberfläche von Visual Studio.Behind the scenes, Visual Studio accomplishes the same thing as the command line tooling, but within Visual Studio's familiar UI.

  1. Öffnen Sie SimpleFeedReader.sln in Visual Studio.Open SimpleFeedReader.sln in Visual Studio.

  2. Öffnen Sie Pages\Index.cshtml im Projektmappen-Explorer.In Solution Explorer, open Pages\Index.cshtml. Ändern Sie <h2>Simple Feed Reader</h2> in <h2>Simple Feed Reader - V2</h2>.Change <h2>Simple Feed Reader</h2> to <h2>Simple Feed Reader - V2</h2>.

  3. Drücken Sie STRG + UMSCHALT + B, um die App zu erstellen.Press Ctrl+Shift+B to build the app.

  4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und klicken Sie anschließend auf Veröffentlichen.In Solution Explorer, right-click on the project and click Publish.

    Screenshot mit Rechtsklick und anschließendem Veröffentlichen

  5. Visual Studio kann eine neue App Service-Ressource erstellen, aber dieses Update wird über die bestehende Bereitstellung veröffentlicht.Visual Studio can create a new App Service resource, but this update will be published over the existing deployment. Wählen Sie im Dialogfeld Veröffentlichungsziel auswählen die Option App Service aus der linken Liste und dann die Option Vorhandene auswählen aus.In the Pick a publish target dialog, select App Service from the list on the left, and then select Select Existing. Klicken Sie auf Veröffentlichen.Click Publish.

  6. Bestätigen Sie im Dialogfeld App Service, dass das Microsoft- oder Organisationskonto, das zum Erstellen Ihres Azure-Abonnements verwendet wurde, oben rechts angezeigt wird.In the App Service dialog, confirm that the Microsoft or Organizational account used to create your Azure subscription is displayed in the upper right. Wenn dies nicht der Fall ist, klicken Sie auf die Dropdownliste und fügen Sie es hinzu.If it's not, click the drop-down and add it.

  7. Bestätigen Sie, dass das richtige Azure-Abonnement ausgewählt ist.Confirm that the correct Azure Subscription is selected. Wählen Sie für Ansicht die Option Ressourcengruppe aus.For View, select Resource Group. Erweitern Sie die Ressourcengruppe AzureTutorial, und wählen Sie dann die vorhandene Web-App aus.Expand the AzureTutorial resource group and then select the existing web app. Klicken Sie auf OK.Click OK.

    Screenshot mit Dialogfeld zum Veröffentlichen von App Service

Visual Studio erstellt die App für Azure und stellt sie bereit.Visual Studio builds and deploys the app to Azure. Navigieren Sie zur URL der Web-App.Browse to the web app URL. Überprüfen Sie, ob die Änderung des <h2>-Elements aktiv ist.Validate that the <h2> element modification is live.

Die App mit dem geänderten Titel.

BereitstellungsslotsDeployment slots

Bereitstellungsslots unterstützen das Staging von Änderungen, ohne die in der Produktion ausgeführte App zu beeinträchtigen.Deployment slots support the staging of changes without impacting the app running in production. Sobald die bereitgestellte Version der App von einem Qualitätssicherungsteam überprüft wurde, können die Produktions- und Stagingslots ausgetauscht werden.Once the staged version of the app is validated by a quality assurance team, the production and staging slots can be swapped. Die im Staging befindliche App wird auf diese Weise in die Produktionsumgebung heraufgestuft.The app in staging is promoted to production in this manner. In den folgenden Schritten wird ein Stagingslot erstellt, dann werden einige Änderungen daran vorgenommen und der Stagingslot nach der Überprüfung mit der Produktionsumgebung ausgetauscht.The following steps create a staging slot, deploy some changes to it, and swap the staging slot with production after verification.

  1. Melden Sie sich bei Azure Cloud Shell an, wenn Sie nicht bereits angemeldet sind.Sign in to the Azure Cloud Shell, if not already signed in.

  2. Erstellen Sie den Stagingslot.Create the staging slot.

    a.a. Erstellen Sie einen Bereitstellungsslot mit dem Namen Staging.Create a deployment slot with the name staging.

    az webapp deployment slot create --name $webappname --resource-group AzureTutorial --slot staging
    

    b.b. Konfigurieren Sie den Stagingslot so, dass die Bereitstellung aus dem lokalen Git verwendet wird, und rufen Sie die Bereitstellungs-URL für das Staging ab.Configure the staging slot to use deployment from local Git and get the staging deployment URL. Notieren Sie diese URL zur späteren Bezugnahme.Note this URL for reference later.

    echo Git deployment URL for staging: $(az webapp deployment source config-local-git --name $webappname --resource-group AzureTutorial --slot staging --query url --output tsv)
    

    c.c. Zeigen Sie die URL des Stagingslots an.Display the staging slot's URL. Navigieren Sie zu der URL, um den leeren Stagingslot anzuzeigen.Browse to the URL to see the empty staging slot. Notieren Sie diese URL zur späteren Bezugnahme.Note this URL for reference later.

    echo Staging web app URL: http://$webappname-staging.azurewebsites.net
    
  3. Ändern Sie in einem Texteditor oder in Visual Studio erneut Pages/Index.cshtml, sodass das Element <h2> den Wert <h2>Simple Feed Reader - V3</h2> aufweist, und speichern Sie dann die Datei.In a text editor or Visual Studio, modify Pages/Index.cshtml again so that the <h2> element reads <h2>Simple Feed Reader - V3</h2> and save the file.

  4. Committen Sie die Datei an das lokale Git-Repository, indem Sie entweder die Seite Änderungen auf der Registerkarte Team Explorer von Visual Studio verwenden, oder indem Sie Folgendes über die Befehlsshell des lokalen Computers eingeben:Commit the file to the local Git repository, using either the Changes page in Visual Studio's Team Explorer tab, or by entering the following using the local machine's command shell:

    git commit -a -m "upgraded to V3"
    
  5. Fügen Sie über die Befehlsshell des lokalen Computers die URL der Stagingbereitstellung als Git-Remote ein, und pushen Sie die committeten Änderungen:Using the local machine's command shell, add the staging deployment URL as a Git remote and push the committed changes:

    a.a. Fügen Sie die Remote-URL für das Staging zum lokalen Git-Repository hinzu.Add the remote URL for staging to the local Git repository.

    git remote add azure-staging <Git_staging_deployment_URL>
    

    b.b. Pushen Sie den lokalen Masterbranch zum Remote-Masterbranch von azure-staging.Push the local master branch to the azure-staging remote's master branch.

    git push azure-staging master
    

    Warten Sie, während Azure die App erstellt und bereitstellt.Wait while Azure builds and deploys the app.

  6. Öffnen Sie zwei Browserfenster, um zu überprüfen, ob V3 für den Stagingslot bereitgestellt wurde.To verify that V3 has been deployed to the staging slot, open two browser windows. Navigieren Sie in einem Fenster zur ursprünglichen URL der Web-App.In one window, navigate to the original web app URL. Navigieren Sie im anderen Fenster zur URL der Staging-Web-App.In the other window, navigate to the staging web app URL. Die URL der Produktionsumgebung liefert V2 der App.The production URL serves V2 of the app. Die URL der Stagingumgebung liefert V3 der App.The staging URL serves V3 of the app.

    Screenshot zum Vergleich der Browserfenster

  7. Tauschen Sie in der Cloud Shell den überprüften/vorbereiteten Stagingslot mit der Produktionsumgebung.In the Cloud Shell, swap the verified/warmed-up staging slot into production.

    az webapp deployment slot swap --name $webappname --resource-group AzureTutorial --slot staging
    
  8. Überprüfen Sie, ob der Austausch erfolgt ist, indem Sie die beiden Browserfenster aktualisieren.Verify that the swap occurred by refreshing the two browser windows.

    Vergleichen der Browserfenster nach dem Austausch

ZusammenfassungSummary

In diesem Abschnitt wurden die folgenden Aufgaben ausgeführt:In this section, the following tasks were completed:

  • Die Beispiel-App wurde heruntergeladen und erstellt.Downloaded and built the sample app.
  • Eine Azure App Service-Web-App wurde mit der Azure Cloud Shell erstellt.Created an Azure App Service Web App using the Azure Cloud Shell.
  • Die Beispiel-App wurde mit Git in Azure bereitgestellt.Deployed the sample app to Azure using Git.
  • Eine Änderung für die App wurde mit Visual Studio bereitgestellt.Deployed a change to the app using Visual Studio.
  • Ein Stagingslot wurde zur Web-App hinzugefügt.Added a staging slot to the web app.
  • Es wurde eine Aktualisierung des Stagingslots bereitgestellt.Deployed an update to the staging slot.
  • Die Staging- und Produktionsslots wurden ausgetauscht.Swapped the staging and production slots.

Im nächsten Abschnitt erfahren Sie, wie Sie eine DevOps-Pipeline mit Azure Pipelines erstellen können.In the next section, you'll learn how to build a DevOps pipeline with Azure Pipelines.

Weiterführende LiteraturAdditional reading