Snabbstart: Distribuera en ASP.NET webbapp

I den här snabbstarten får du lära dig hur du skapar och distribuerar din första ASP.NET webbapp till Azure App Service. App Service stöder olika versioner av .NET-appar och tillhandahåller en mycket skalbar webbvärdtjänst med självkorrigering. ASP.NET webbappar är plattformsoberoende och kan finnas i Linux eller Windows. När du är klar har du en Azure-resursgrupp som består av en App Service värdplan och en App Service med ett distribuerat webbprogram.

Du kan också distribuera en ASP.NET webbapp som en del av en Windows- eller Linux-container i App Service.

Förutsättningar

Om du redan har installerat Visual Studio 2022:

  1. Installera de senaste uppdateringarna i Visual Studio genom att välja Hjälp>sök efter Uppdateringar.
  2. Lägg till arbetsbelastningen genom att välja Verktyg>Hämta verktyg och funktioner.
Installera den senaste .NET 6.0 SDK:en.
Installera den senaste .NET 6.0 SDK:en.
Installera den senaste .NET 6.0 SDK:en.

Skapa en ASP.NET-webbapp

  1. Öppna Visual Studio och välj sedan Skapa ett nytt projekt.

  2. I Skapa ett nytt projekt letar du upp och väljer ASP.NET Core Webbapp och väljer sedan Nästa.

  3. I Konfigurera ditt nya projekt namnger du programmet MyFirstAzureWebApp och väljer sedan Nästa.

    Skärmbild av Visual Studio – Konfigurera ASP.NET 6.0-webbapp.

  4. Välj .NET 6.0 (Långsiktigt stöd).

  5. Kontrollera att autentiseringstypen är inställd på Ingen. Välj Skapa.

    Skärmbild av Visual Studio – Ytterligare information när du väljer .NET 6.0.

  6. På Visual Studio-menyn väljer du Felsöka>Starta utan felsökning för att köra webbappen lokalt.

    Skärmbild av Visual Studio – ASP.NET Core 6.0 som körs lokalt.

  1. I terminalfönstret skapar du en ny mapp med namnet MyFirstAzureWebApp och öppnar den i Visual Studio Code.

    mkdir MyFirstAzureWebApp
    code MyFirstAzureWebApp
    
  2. Öppna terminalfönstret i Visual Studio Code genom att Ctrl + `skriva .

  3. I Visual Studio Code-terminalen skapar du en ny .NET-webbapp med kommandot dotnet new webapp .

    dotnet new webapp -f net6.0
    
  4. Från terminalen i Visual Studio Code kör du programmet lokalt med kommandot dotnet run .

    dotnet run --urls=https://localhost:5001/
    
  5. Öppna webbläsaren och navigera till appen på https://localhost:5001.

    Du ser mallen ASP.NET Core 6.0-webbappen som visas på sidan.

    Skärmbild av Visual Studio Code – kör .NET 6.0 i webbläsaren lokalt.

  1. Öppna ett terminalfönster på datorn till en arbetskatalog. Skapa en ny .NET-webbapp med kommandot dotnet new webapp och ändra sedan kataloger till den nyligen skapade appen.

    dotnet new webapp -n MyFirstAzureWebApp --framework net6.0
    cd MyFirstAzureWebApp
    
  2. Från samma terminalsession kör du programmet lokalt med kommandot dotnet run .

    dotnet run --urls=https://localhost:5001/
    
  3. Öppna webbläsaren och navigera till appen på https://localhost:5001.

    Mallen ASP.NET Core 6.0-webbappen visas på sidan.

    Skärmbild av Visual Studio Code – ASP.NET Core 6.0 i lokal webbläsare.

I det här steget förgrenar vi ett demoprojekt som ska distribueras.

  • Gå till .NET 6.0-exempelappen.
  • Välj knappen Förgrening längst upp till höger på GitHub-sidan.
  • Välj Ägare och lämna standardnamnet för lagringsplatsen.
  • Välj Skapa förgrening.

Publicera din webbapp

Om du vill publicera din webbapp måste du först skapa och konfigurera en ny App Service som du kan publicera din app till.

Som en del av konfigurationen av App Service skapar du:

  • En ny resursgrupp som ska innehålla alla Azure-resurser för tjänsten.
  • En ny värdplan som anger plats, storlek och funktioner i webbservergruppen som är värd för din app.

Följ de här stegen för att skapa App Service resurser och publicera projektet:

  1. I Solution Explorer högerklickar du på projektet MyFirstAzureWebApp och väljer Publicera.

  2. I Publicera väljer du Azure och sedan Nästa.

    Skärmbild av Visual Studio – Publicera webbappen och mål-Azure.

  3. Välj det specifika målet, antingen Azure App Service (Linux) eller Azure App Service (Windows). Välj Nästa.

    Viktigt

    Använd Azure App Service (Windows) när du använder ASP.NET Framework 4.8.

  4. Alternativen beror på om du redan är inloggad på Azure och om du har ett Visual Studio-konto som är länkat till ett Azure-konto. Välj antingen Lägg till ett konto eller Logga in för att logga in på din Azure-prenumeration. Om du redan är inloggad väljer du önskat konto.

    Skärmbild av Visual Studio – Välj dialogrutan Logga in på Azure.

  5. Till höger om App Service instanser väljer du +.

    Skärmbild av dialogrutan Visual Studio – Ny App Service app.

  6. För Prenumeration godkänner du den prenumeration som visas eller väljer en ny i listrutan.

  7. För Resursgrupp väljer du Nytt. I Nytt resursgruppsnamn anger du myResourceGroup och väljer OK.

  8. Som Värdplan väljer du Ny.

  9. I dialogrutan Värdplan: Skapa ny anger du de värden som anges i följande tabell:

    Inställning Föreslaget värde Beskrivning
    Värdplan MyFirstAzureWebAppPlan Namnet på App Service-planen.
    Plats Europa, västra Datacenter som är värd för webbappen.
    Storlek Kostnadsfri Prisnivån avgör tillgängliga värdfunktioner.

    Skärmbild av skärmen Skapa ny värdplan i Azure Portal.

  10. I Namn anger du ett unikt appnamn som endast innehåller de giltiga tecknen , a-zA-Z, 0-9och -. Du kan acceptera det automatiskt genererade unika namnet. Webbadressen till webbappen är http://<app-name>.azurewebsites.net, där <app-name> är appens namn.

  11. Välj Skapa för att skapa Azure-resurserna.

    Skärmbild av dialogrutan Visual Studio – Skapa appresurser.

    När guiden är klar skapas Azure-resurserna åt dig och du är redo att publicera ditt ASP.NET Core projekt.

  12. I dialogrutan Publicera kontrollerar du att din nya App Service app är markerad i App Service instans och väljer sedan Slutför. Visual Studio skapar en publiceringsprofil åt dig för den valda App Service appen.

  13. På sidan Publicera väljer du Publicera. Om du ser ett varningsmeddelande väljer du Fortsätt.

    Visual Studio skapar, paketerar och publicerar appen till Azure och startar sedan appen i standardwebbläsaren.

    Webbappen ASP.NET Core 6.0 visas på sidan.

    Skärmbild av Visual Studio – ASP.NET Core 6.0-webbapp i Azure.

  1. Öppna kommandopalettenCtrl+Skift+P i Visual Studio Code.

  2. Sök efter och välj "Azure App Service: Distribuera till webbapp".

  3. Svara på anvisningarna på följande sätt:

    1. Välj MyFirstAzureWebApp som mapp att distribuera.
    2. Välj Lägg till konfiguration när du uppmanas att göra det.
    3. Logga in på ditt Azure-konto om du uppmanas till det.
    4. Välj din prenumeration.
    5. Välj Skapa ny webbapp... Avancerat.
    6. För Ange ett globalt unikt namn använder du ett namn som är unikt för alla Azure (giltiga tecken är a-z, 0-9och -). Ett bra mönster är att använda en kombination av företagets namn och en appidentifierare.
    7. Välj Skapa ny resursgrupp och ange ett namn som myResourceGroup.
    8. När du uppmanas att välja en körningsstack:
    • För .NET 6.0 väljer du .NET 6
    • För .NET Framework 4.8 väljer du ASP.NET V4.8
    1. Välj ett operativsystem (Windows eller Linux).
      • För .NET Framework 4.8 väljs Windows implicit.
    2. Välj en plats nära dig.
    3. Välj Skapa en ny App Service plan, ange ett namn och välj prisnivånF1 Kostnadsfri.
    4. Välj Hoppa över för tillfället för Application Insights-resursen.
  4. I popup-fönstret Distribuera alltid arbetsytan "MyFirstAzureWebApp" till <appnamn>" väljer du Ja så att Visual Studio Code distribueras till samma App Service app varje gång du befinner dig på arbetsytan.

  5. När publiceringen är klar väljer du Bläddra på webbplatsen i meddelandet och väljer Öppna när du uppmanas till det.

    Webbappen ASP.NET Core 6.0 visas på sidan.

    Skärmbild av Visual Studio Code – ASP.NET Core 6.0-webbapp i Azure.

  1. Logga in på ditt Azure-konto med kommandot az login och följ anvisningarna:

    az login
    
  2. Distribuera koden i din lokala MyFirstAzureWebApp-katalog med kommandot az webapp up :

    az webapp up --sku F1 --name <app-name> --os-type <os>
    
    • az Om kommandot inte känns igen kontrollerar du att Azure CLI är installerat enligt beskrivningen i Krav.
    • Ersätt <app-name> med ett namn som är unikt för alla Azure (giltiga tecken är a-z, 0-9och -). Ett bra mönster är att använda en kombination av företagets namn och en appidentifierare.
    • Argumentet --sku F1 skapar webbappen på prisnivånKostnadsfri. Utelämna det här argumentet om du vill använda en snabbare premiumnivå, vilket medför en timkostnad.
    • Ersätt <os> med antingen linux eller windows. Du måste använda windows när du riktar in dig på ASP.NET Framework 4.8.
    • Du kan också inkludera argumentet --location <location-name> där <location-name> är en tillgänglig Azure-region. Du kan hämta en lista över tillåtna regioner för ditt Azure-konto genom att az account list-locations köra kommandot .

    Det kan ta några minuter att slutföra kommandot. När den körs visas meddelanden om hur du skapar resursgruppen, App Service-planen och värdappen, hur du konfigurerar loggning och sedan utför ZIP-distribution. Sedan visas ett meddelande med appens URL:

    You can launch the app at http://<app-name>.azurewebsites.net
    
  3. Öppna en webbläsare och gå till URL:en:

    Webbappen ASP.NET Core 6.0 visas på sidan.

    Skärmbild av WEBBappen CLI – ASP.NET Core 6.0 i Azure.

Anteckning

Azure PowerShell rekommenderas för att skapa appar på Windows-värdplattformen. Om du vill skapa appar i Linux använder du ett annat verktyg, till exempel Azure CLI.

  1. Logga in på ditt Azure-konto med kommandot Connect-AzAccount och följ anvisningarna:

    Connect-AzAccount
    
  1. Skapa en ny app med kommandot New-AzWebApp :

    New-AzWebApp -Name <app-name> -Location westeurope
    
    • Ersätt <app-name> med ett namn som är unikt för alla Azure (giltiga tecken är a-z, 0-9och -). En kombination av företagets namn och en appidentifierare är ett bra mönster.
    • Du kan också inkludera parametern -Location <location-name> där <location-name> är en tillgänglig Azure-region. Du kan hämta en lista över tillåtna regioner för ditt Azure-konto genom att Get-AzLocation köra kommandot .

    Det kan ta några minuter att slutföra kommandot. När den körs skapas en resursgrupp, en App Service-plan och den App Service resursen.

  2. Från programmets rotmapp förbereder du ditt lokala MyFirstAzureWebApp-program för distribution med kommandot dotnet publish :

    dotnet publish --configuration Release
    
  3. Ändra till versionskatalogen och skapa en zip-fil från innehållet:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. Publicera zip-filen till Azure-appen med kommandot Publish-AzWebApp :

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

    Anteckning

    -ArchivePath behöver zip-filens fullständiga sökväg.

  5. Öppna en webbläsare och gå till URL:en:

    Webbappen ASP.NET Core 6.0 visas på sidan.

    Skärmbild av WEBBappen CLI – ASP.NET Core 6.0 i Azure.

  1. Skriv apptjänster i sökningen. Under Tjänster väljer du App Services.

    Skärmbild av portalsökning i Azure Portal.

  2. På sidan App Services väljer du + Skapa.

  3. På fliken Grundläggande inställningar under Projektinformation kontrollerar du att rätt prenumeration har valts och väljer sedan Skapa ny resursgrupp. Skriv myResourceGroup som namn.

    Skärmbild av avsnittet Projektinformation som visar var du väljer Azure-prenumerationen och resursgruppen för webbappen.

  4. Under Instansinformation:

    • Under Namn skriver du ett globalt unikt namn för din webbapp.
    • Under Publicera väljer du Kod.
    • Under Körningsstack väljer du .NET 6 (LTS).
    • Välj ett operativsystem och en region som du vill hantera din app från.

    Skärmbild av App Service instansinformation med en .NET 6-körning.

  5. Under App Service Plan väljer du Skapa ny App Service plan. Skriv myAppServicePlan som namn. Om du vill ändra till den kostnadsfria nivån väljer du Ändra storlek, väljer fliken Dev/Test , väljer F1 och väljer knappen Använd längst ned på sidan.

    Skärmbild av avsnittet Administratörskonto där du anger administratörens användarnamn och lösenord.

  6. Välj knappen Nästa: Distribution > längst ned på sidan.

  7. På fliken Distribution under GitHub Actions inställningar kontrollerar du att Kontinuerlig distribution är Aktivera.

  8. Under GitHub Actions information autentiserar du med ditt GitHub-konto och väljer följande alternativ:

    • För Organisation väljer du den organisation där du har förgrenat demoprojektet.
    • För Lagringsplats väljer du projektet dotnetcore-docs-hello-world .
    • För Gren väljer du master.

    Skärmbild av distributionsalternativen för en app med .NET 6-körningen.

  9. Välj knappen Granska + skapa längst ned på sidan.

    Skärmbild av knappen Granska och skapa längst ned på sidan.

  10. När verifieringen har körts väljer du knappen Skapa längst ned på sidan.

  11. När distributionen är klar väljer du Gå till resurs.

    Skärmbild av nästa steg i att gå till resursen.

  12. Bläddra till det distribuerade programmet i webbläsaren på URL:en http://<app-name>.azurewebsites.net.

Uppdatera och distribuera om appen

Följ dessa steg för att uppdatera och distribuera om webbappen:

  1. Öppna Index.cshtml under projektet i Solution Explorer.

  2. Ersätt det första <div> elementet med följande kod:

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

    Spara ändringarna.

  3. Om du vill distribuera om till Azure högerklickar du på projektet MyFirstAzureWebApp i Solution Explorer och väljer Publicera.

  4. På sidan Publicera sammanfattning väljer du Publicera.

    När publiceringen är klar startar Visual Studio en webbläsare till webbappens URL.

    Den uppdaterade ASP.NET Core 6.0-webbappen visas på sidan.

    Skärmbild av Visual Studio – Uppdaterad ASP.NET Core 6.0-webbapp i Azure.

  1. Öppna Index.cshtml.

  2. Ersätt det första <div> elementet med följande kod:

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

    Spara ändringarna.

  3. Öppna kommandopalettenCtrl+Skift+P i Visual Studio Code.

  4. Sök efter och välj "Azure App Service: Distribuera till webbapp".

  5. Välj Distribuera när du uppmanas till det.

  6. När publiceringen är klar väljer du Bläddra på webbplatsen i meddelandet och väljer Öppna när du uppmanas till det.

    Den uppdaterade ASP.NET Core 6.0-webbappen visas på sidan.

    Skärmbild av Visual Studio Code – Uppdaterad ASP.NET Core 6.0-webbapp i Azure.

Öppna filen Index.cshtml i den lokala katalogen. Ersätt det första <div> elementet:

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

Spara ändringarna och distribuera sedan om appen med kommandot az webapp up igen:

ASP.NET Core 6.0 är plattformsoberoende, baserat på din tidigare distribution ersätts <os> med antingen linux eller windows.

az webapp up --os-type <os>

Det här kommandot använder värden som cachelagras lokalt i .azure/config-filen, inklusive appnamn, resursgrupp och App Service plan.

När distributionen är klar växlar du tillbaka till webbläsarfönstret som öppnades i steget Bläddra till appen och trycker på Uppdatera.

Den uppdaterade ASP.NET Core 6.0-webbappen visas på sidan.

Skärmbild av CLI – Uppdaterad ASP.NET Core 6.0-webbapp i Azure.

  1. Öppna filen Index.cshtml i den lokala katalogen. Ersätt det första <div> elementet:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    
  2. Från programmets rotmapp förbereder du ditt lokala MyFirstAzureWebApp-program för distribution med kommandot dotnet publish :

    dotnet publish --configuration Release
    
  3. Ändra till versionskatalogen och skapa en zip-fil från innehållet:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. Publicera zip-filen till Azure-appen med kommandot Publish-AzWebApp :

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

    Anteckning

    -ArchivePath behöver zip-filens fullständiga sökväg.

  5. När distributionen är klar växlar du tillbaka till webbläsarfönstret som öppnades i steget Bläddra till appen och trycker på Uppdatera.

    Den uppdaterade ASP.NET Core 6.0-webbappen visas på sidan.

    Skärmbild av CLI – Uppdaterad ASP.NET Core 6.0-webbapp i Azure.

  1. Bläddra till din GitHub-förgrening av exempelkoden.

  2. På lagringsplatsen trycker du på . för att starta Visual Studio Code i webbläsaren.

    Anteckning

    URL:en ändras från GitHub.com till GitHub.dev. Den här funktionen fungerar bara med lagringsplatser som har filer. Detta fungerar inte på tomma lagringsplatser.

  3. Öppna Index.cshtml.

    Index.cshtml finns i Pages mappen .

    Skärmbild av Explorer-fönstret från Visual Studio Code i webbläsaren och markera Index.cshtml på lagringsplatsen dotnetcore-docs-hello-world.

  4. Ersätt det första <div> elementet med följande kod:

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

    Spara ändringarna.

  5. På menyn Källkontroll väljer du knappen Fasändringar för att mellanlagra ändringen.

  6. Ange ett incheckningsmeddelande, till exempel We love Azure. Välj sedan Commit and Push (Genomför och push-överför).

  7. När distributionen är klar går du tillbaka till webbläsarfönstret som öppnades när du skulle söka efter appen och klickar på knappen för att uppdatera sidan.

    Den uppdaterade ASP.NET Core 6.0-webbappen visas på sidan.

    Skärmbild av CLI – Uppdaterad ASP.NET Core 6.0-webbapp i Azure.

Hantera Azure-appen

Om du vill hantera din webbapp går du till Azure Portal och söker efter och väljer App Services.

Skärmbild av alternativet Azure Portal – Välj App Services.

På sidan App Services väljer du namnet på din webbapp.

Skärmbild av sidan Azure Portal – App Services med en vald exempelwebbapp.

Sidan Översikt för din webbapp innehåller alternativ för grundläggande hantering som att bläddra, stoppa, starta, starta om och ta bort. Den vänstra menyn innehåller ytterligare sidor för att konfigurera din app.

Skärmbild av översiktssidan Azure Portal – App Service.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden, kan du ta bort dem genom att ta bort resursgruppen.

  1. Från ditt webbprograms Översiktsida i Azure portal väljer du länken myResourceGroup under resursgruppen.
  2. Kontrollera att resurser på resursgruppsidan är de som du vill ta bort.
  3. Välj Ta bort, skriv myResourceGroup i textrutan och välj sedan Ta bort.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden, kan du ta bort dem genom att ta bort resursgruppen.

  1. Från ditt webbprograms Översiktsida i Azure portal väljer du länken myResourceGroup under resursgruppen.
  2. Kontrollera att resurser på resursgruppsidan är de som du vill ta bort.
  3. Välj Ta bort, skriv myResourceGroup i textrutan och välj sedan Ta bort.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i Cloud Shell:

az group delete --name myResourceGroup

Det kan några minuter att köra kommandot.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte förväntar dig att behöva dessa resurser i framtiden tar du bort resursgruppen genom att köra följande PowerShell-kommando:

Remove-AzResourceGroup -Name myResourceGroup

Det kan några minuter att köra kommandot.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden, kan du ta bort dem genom att ta bort resursgruppen.

  1. Från ditt webbprograms Översiktsida i Azure portal väljer du länken myResourceGroup under resursgruppen.
  2. Kontrollera att resurser på resursgruppsidan är de som du vill ta bort.
  3. Välj Ta bort, skriv myResourceGroup i textrutan och välj sedan Ta bort.

Nästa steg

I den här snabbstarten skapade och distribuerade du en ASP.NET webbapp för att Azure App Service.

Gå vidare till nästa artikel för att lära dig hur du skapar en .NET Core-app och ansluter den till en SQL Database: