Quickstart: Een web-app ASP.NET implementeren

Als u al hebt geïnstalleerd Visual Studio 2022:

1. Installeer de nieuwste updates in Visual Studio door Help > Controleren op updates te selecteren.
2. Voeg de workload toe door Hulpprogramma's > Hulpprogramma's en functies ophalen te selecteren.

• Een Azure-account met een actief abonnement. Gratis een account maken
• Visual Studio Code.
• De extensie Azure Tools.

• Een Azure-account met een actief abonnement. Gratis een account maken
• De Azure CLI.
• De .NET SDK (inclusief runtime en CLI).

• Een Azure-account met een actief abonnement. Gratis een account maken
• De Azure PowerShell.
• De .NET SDK (inclusief runtime en CLI).

1. Maak in het terminalvenster een nieuwe map met de naam MyFirstAzureWebApp en open deze in Visual Studio Code.

   mkdir MyFirstAzureWebApp
   code MyFirstAzureWebApp
   

2. Open in Visual Studio Code het venster Terminal door te Ctrl + ` typen.

3. Maak in de terminal in Visual Studio Code een nieuwe .NET-web-app met behulp van de dotnet new webapp opdracht .

   • .NET 6.0
   • .NET Framework 4.8

   dotnet new webapp -f net6.0
   

4. Voer vanuit terminal in Visual Studio Code de toepassing lokaal uit met behulp van de dotnet run opdracht .

   dotnet run --urls=https://localhost:5001/
   

5. Open een webbrowser en navigeer naar de app op https://localhost:5001.

   • .NET 6.0
   • .NET Framework 4.8

   U ziet de sjabloon ASP.NET Core web-app 6.0 wordt weergegeven op de pagina.

   

1. Open een terminalvenster op uw computer naar een werkmap. Maak een nieuwe .NET-web-app met behulp van dotnet new webapp de opdracht en wijzig vervolgens de directories in de zojuist gemaakte app.

   • .NET 6.0
   • .NET Framework 4.8

   dotnet new webapp -n MyFirstAzureWebApp --framework net6.0
   cd MyFirstAzureWebApp
   

2. Voer vanuit dezelfde terminalsessie de toepassing lokaal uit met behulp van de dotnet run opdracht .

   dotnet run --urls=https://localhost:5001/
   

3. Open een webbrowser en navigeer naar de app op https://localhost:5001.

   • .NET 6.0
   • .NET Framework 4.8

   U ziet de sjabloon ASP.NET Core web-app 6.0 wordt weergegeven op de pagina.

   

1. Klik Solution Explorer met de rechtermuisknop op het project MyFirstAzureWebApp en selecteer Publiceren.

2. Selecteer in Publiceren de optie Azure en vervolgens Volgende.

   

3. Kies het specifieke doel, Azure App Service (Linux) of Azure App Service (Windows). Klik op Volgende.

   Belangrijk

   Wanneer u ASP.NET Framework 4.8 gebruikt, gebruikt Azure App Service (Windows).

4. Uw opties zijn afhankelijk van het feit of u al bent aangemeld bij Azure en of u een Visual Studio-account hebt gekoppeld aan een Azure-account. Selecteer Een account toevoegen of Aanmelden om u aan te melden bij uw Azure-abonnement. Als u al bent aangemeld, selecteert u het gewenste account.

   

5. Selecteer rechts van App Service exemplaren. +

   

6. Accepteer bij Abonnement het abonnement dat wordt vermeld, of selecteer een nieuw abonnement in de vervolgkeuzelijst.

7. Selecteer in Resourcegroep de optie Nieuw. Voer bij Naam van nieuwe resourcegroep in: myResourceGroup. Selecteer vervolgens OK.

8. Selecteer bij Hostingabonnement de optie Nieuw.

9. Voer in het dialoogvenster Hostingabonnement: Nieuw hostingabonnement maken de waarden in die zijn opgegeven in de volgende tabel:

   Instelling	Voorgestelde waarde	Beschrijving
   Hostingabonnement	MyFirstAzureWebAppPlan	De naam van het App Service-plan.
   Locatie	Europa -west	Het datacenter waar de web-app wordt gehost.
   Grootte	Gratis	De prijscategorie bepaalt de hosting-functies.

   

10. Voer bij Naam een unieke app-naam in die alleen deze geldige tekens bevat: a-z, A-Z, 0-9 en -. U kunt de automatisch gegenereerde unieke naam accepteren. De URL van de web-app is http://<app-name>.azurewebsites.net, waarbij <app-name> de naam van uw app is.

11. Selecteer Maken om de Azure-resources te maken.

    

    Zodra de wizard is voltooid, worden de Azure-resources voor u gemaakt en kunt u uw ASP.NET Core publiceren.

12. Zorg ervoor dat in het dialoogvenster Publiceren uw nieuwe App Service-app is geselecteerd in App Service-exemplaar en selecteer vervolgens Voltooien. Visual Studio maakt een publicatieprofiel voor de geselecteerde App Service app.

13. Selecteer publiceren op de pagina Publiceren. Als er een waarschuwingsbericht wordt weergegeven, klikt u op Doorgaan.

    Visual Studio maakt, verpakt en publiceert de app naar Azure. Daarna wordt de app gestart in de standaardbrowser.

    • .NET 6.0
    • .NET Framework 4.8

    De web-app ASP.NET Core 6.0 wordt weergegeven op de pagina.

    

1. Open in Visual Studio Code het opdrachtenpalet, Ctrl + Shift + P.

2. Zoek en selecteer 'Azure App Service: Implementeren naar web-app'.

3. U kunt als volgt op de prompts reageren:

   1. Selecteer MyFirstAzureWebApp als de map die u wilt implementeren.
   2. Selecteer Configuratie toevoegen wanneer u hier om wordt gevraagd.
   3. Meld u aan bij uw Azure-account als u hier om wordt gevraagd.
   4. Selecteer uw abonnement.
   5. Selecteer Nieuwe web-app maken... Geavanceerd.
   6. Gebruik voor Enter a globally unique name een naam die uniek is in Heel Azure ( geldige tekens zijn ,a-z 0-9 en -). Het is handig om een combinatie van uw bedrijfsnaam en een app-id te gebruiken.
   7. Selecteer Nieuwe resourcegroep maken en geef een naam op, zoals myResourceGroup .
   8. Wanneer u wordt gevraagd een runtimestack te selecteren:
   • Selecteer voor .NET 6.0 .NET 6
   • Selecteer .NET Framework 4.8 ASP.NET V4.8
   1. Selecteer een besturingssysteem (Windows of Linux).
      • Voor .NET Framework 4.8 wordt Windows impliciet geselecteerd.
   2. Selecteer een locatie bij u in de buurt.
   3. Selecteer Een nieuw abonnement App Service maken, geef een naam op en selecteer de prijscategorie F1 Gratis.
   4. Selecteer Nu overslaan voor de resource Insights toepassing.

4. In de pop-up implementeert u altijd de werkruimte 'MyFirstAzureWebApp' in <app-name> ' en selecteert u Ja. Op deze manier wordt, zolang u zich in dezelfde werkruimte Visual Studio code steeds in dezelfde App Service app geïmplementeerd.

5. Wanneer het publiceren is voltooid, selecteert u Bladeren door website in de melding en selecteert u Openen wanneer u hier om wordt gevraagd.

   • .NET 6.0
   • .NET Framework 4.8

   De web-app ASP.NET Core 6.0 wordt weergegeven op de pagina.

   

1. Meld u aan bij uw Azure-account met behulp van az login de opdracht en volg de prompt:

   az login
   

2. Implementeer de code in uw lokale MyFirstAzureWebApp-map met behulp van de az webapp up opdracht :

   az webapp up --sku F1 --name <app-name> --os-type <os>
   

   • Als de opdracht niet wordt herkend, moet u ervoor zorgen dat de Azure CLI is geïnstalleerd zoals az beschreven in Vereisten.
   • Vervang <app-name> door een naam die in de volledige Azure-omgeving uniek is (geldige tekens zijn a-z, 0-9 en - ). Het is handig om een combinatie van uw bedrijfsnaam en een app-id te gebruiken.
   • Met --sku F1 het argument maakt u de web-app in de prijscategorie Gratis. Laat dit argument weg om een snellere Premium-laag te gebruiken, waarmee u kosten per uur in rekening worden gebracht.
   • Vervang <os> door of linux windows . U moet gebruiken windows wanneer u zich richt op ASP.NET Framework 4.8.
   • U kunt eventueel het argument --location <location-name> toevoegen, waarbij <location-name> een beschikbare Azure-regio is. U kunt een lijst met toegestane regio's voor uw Azure-account ophalen door de az account list-locations-opdracht uit te voeren.

   Het volledig uitvoeren van de opdracht kan even duren. Tijdens de uitvoering worden berichten verstrekt over het maken van de resourcegroep, het App Service-abonnement en het hosten van de app, het configureren van logboekregistratie en het uitvoeren van zip-implementatie. Vervolgens wordt een bericht met de URL van de app uitgevoerd:

   You can launch the app at http://<app-name>.azurewebsites.net
   

3. Open een webbrowser en navigeer naar de URL:

   • .NET 6.0
   • .NET Framework 4.8

   U ziet dat de ASP.NET Core 6.0-web-app wordt weergegeven op de pagina.

   

1. Meld u aan bij uw Azure-account met behulp van Connect-AzAccount de opdracht en volg de prompt:

   Connect-AzAccount
   

2. Maak een nieuwe app met behulp van de opdracht New-AzWebApp:

   New-AzWebApp -Name <app-name> -Location westeurope
   

   • Vervang <app-name> door een naam die in de volledige Azure-omgeving uniek is (geldige tekens zijn a-z, 0-9 en - ). Het is handig om een combinatie van uw bedrijfsnaam en een app-id te gebruiken.
   • U kunt eventueel de parameter -Location <location-name> opnemen, waarbij <location-name> een beschikbare Azure-regio is. U kunt een lijst met toegestane regio's voor uw Azure-account ophalen door de Get-AzLocation-opdracht uit te voeren.

   Het volledig uitvoeren van de opdracht kan even duren. Tijdens het uitvoeren worden een resourcegroep, een App Service en de App Service resource gemaakt.

3. Bereid vanuit de hoofdmap van de toepassing uw lokale MyFirstAzureWebApp-toepassing voor op implementatie met behulp van de dotnet publish opdracht :

   dotnet publish --configuration Release
   

4. Ga naar de releasemap en maak een zip-bestand op basis van de inhoud:

   • .NET 6.0
   • .NET Framework 4.8

   cd bin\Release\net6.0\publish
   Compress-Archive -Path * -DestinationPath deploy.zip
   

5. Publiceer het ZIP-bestand naar de Azure-app met behulp van de opdracht Publish-AzWebApp:

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

   Notitie

   -ArchivePath heeft het volledige pad van het zip-bestand nodig.

6. Open een webbrowser en navigeer naar de URL:

   • .NET 6.0
   • .NET Framework 4.8

   U ziet dat de ASP.NET Core 6.0-web-app wordt weergegeven op de pagina.

   

1. Open Solution Explorer onder uw project Index.cshtml.

2. Vervang het eerste <div> element door de volgende code:

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

   Sla uw wijzigingen op.

3. Als u opnieuw wilt implementeren in Azure, klikt u met de rechtermuisknop op het project MyFirstAzureWebApp in Solution Explorer selecteert u Publiceren.

4. Selecteer op de samenvattingspagina Publiceren de optie Publiceren.

   Als het publiceren is voltooid, start Visual Studio een browser waarin de URL van de web-app wordt geladen.

   • .NET 6.0
   • .NET Framework 4.8

   U ziet dat de bijgewerkte ASP.NET Core web-app 6.0 wordt weergegeven op de pagina.

   

1. Open Index.cshtml.

2. Vervang het eerste <div> element door de volgende code:

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

   Sla uw wijzigingen op.

3. Open in Visual Studio Code het opdrachtenpalet, Ctrl + Shift + P.

4. Zoek en selecteer 'Azure App Service: Implementeren naar web-app'. Vergeet niet dat u in Visual Studio code hebt verteld om de app te onthouden waarin u uw werkruimte in een eerdere stap moet implementeren.

5. Selecteer Implementeren wanneer u hier om wordt gevraagd.

6. Wanneer het publiceren is voltooid, selecteert u Bladeren door website in de melding en selecteert u Openen wanneer u hier om wordt gevraagd.

   • .NET 6.0
   • .NET Framework 4.8

   U ziet dat de bijgewerkte ASP.NET Core web-app 6.0 wordt weergegeven op de pagina.

   

Open in de lokale map het bestand Index.cshtml. Vervang het eerste <div> element:

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

Sla de wijzigingen op en implementeer de app opnieuw met de opdracht az webapp up:

az webapp up --os-type <os>

az webapp up --os-type windows

Met deze opdracht worden waarden gebruikt die lokaal in de cache worden opgeslagen in het bestand .azure/config, met inbegrip van de app-naam, de resourcegroep en het App Service-plan.

Als de implementatie is voltooid, gaat u terug naar het browservenster dat is geopend in de stap Bladeren naar de app en klikt u op Vernieuwen.

1. Open in de lokale map het bestand Index.cshtml. Vervang het eerste <div> element:

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

2. Bereid vanuit de hoofdmap van de toepassing uw lokale MyFirstAzureWebApp-toepassing voor op implementatie met behulp van de dotnet publish opdracht :

   dotnet publish --configuration Release
   

3. Ga naar de releasemap en maak een zip-bestand op basis van de inhoud:

   • .NET 6.0
   • .NET Framework 4.8

   cd bin\Release\net6.0\publish
   Compress-Archive -Path * -DestinationPath deploy.zip
   

4. Publiceer het ZIP-bestand naar de Azure-app met behulp van de opdracht Publish-AzWebApp:

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

   Notitie

   -ArchivePath heeft het volledige pad van het zip-bestand nodig.

5. Als de implementatie is voltooid, gaat u terug naar het browservenster dat is geopend in de stap Bladeren naar de app en klikt u op Vernieuwen.

   • .NET 6.0
   • .NET Framework 4.8

   U ziet dat de bijgewerkte ASP.NET Core web-app 6.0 wordt weergegeven op de pagina.

   

Resources opschonen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Als u deze resources in de toekomst waarschijnlijk niet nodig hebt, kunt u ze verwijderen door de resourcegroep te verwijderen.

1. Selecteer op de pagina Overzicht in Azure Portal de link myResourceGroup onder Resourcegroep.
2. Controleer op de pagina van de resourcegroep of de weergegeven resources de resources zijn die u wilt verwijderen.
3. Selecteer Verwijderen, typ myResourceGroup in het tekstvak en selecteer vervolgens Verwijderen.

Resources opschonen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Als u deze resources in de toekomst waarschijnlijk niet nodig hebt, kunt u ze verwijderen door de resourcegroep te verwijderen.

1. Selecteer op de pagina Overzicht in Azure Portal de link myResourceGroup onder Resourcegroep.
2. Controleer op de pagina van de resourcegroep of de weergegeven resources de resources zijn die u wilt verwijderen.
3. Selecteer Verwijderen, typ myResourceGroup in het tekstvak en selecteer vervolgens Verwijderen.

Resources opschonen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Als u deze resources niet meer nodig denkt te hebben, verwijdert u de resourcegroep door de volgende opdracht in Cloud Shell uit te voeren:

az group delete --name myResourceGroup

Het kan een minuut duren voordat deze opdracht is uitgevoerd.

Resources opschonen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Als u verwacht deze resources in de toekomst niet meer nodig te hebben, verwijdert u de resourcegroep door de volgende PowerShell-opdracht uit te voeren:

Remove-AzResourceGroup -Name myResourceGroup

Het kan een minuut duren voordat deze opdracht is uitgevoerd.