Oefening: uw web-app lokaal uitvoeren

Voltooid

In deze oefening gaat u het volgende doen:

  • Voer uw web-app lokaal uit en bekijk deze in een browser.
  • Bekijk hoe de web-app wordt geleverd.

De web-app uitvoeren en weergeven in een browser

Voer de web-app uit in Visual Studio Code en bekijk deze in een browser:

  1. Druk in Visual Studio Code op F5 om de app uit te voeren.

    Visual Studio Code:

    • Hiermee activeert u de .NET CLI-opdracht dotnet run waarmee de toepassing wordt gebouwd en uitgevoerd.
    • Koppelt het foutopsporingsprogramma aan de actieve toepassing.

    De eerste keer dat het project wordt uitgevoerd in Visual Studio Code, wordt de prompt foutopsporingsprogramma selecteren weergegeven.

  2. Selecteer C# bij de prompt Foutopsporingsprogramma selecteren in het opdrachtpalet bovenaan de visual Studio Code-gebruikersinterface. Selecteer bij de volgende prompt de standaardconfiguratie voor het starten (C#: MyWebApp [Default Configuration]):

    Schermafbeelding van het kiezen van

    De standaardbrowser wordt gestart op http://localhost:{PORT}, waarin het antwoord van de app wordt weergegeven. De {PORT} tijdelijke aanduiding is de willekeurige poort die aan de app is toegewezen wanneer het project van de app wordt gemaakt. Als u de poort wilt wijzigen vanwege een lokaal poortconflict, wijzigt u de poort in het bestand Eigenschappen/launchSettings.json van het project.

    Het antwoord dat wordt weergegeven in de browser:

    Schermopname van een browser met de tekstuitvoer.

  3. Sluit het browservenster.

  4. In Visual Studio:

    • Selecteer In het menu Uitvoeren de optie Foutopsporing stoppen.
    • Druk op Shift+F5 op het toetsenbord.

Voer de web-app uit met behulp van de .NET CLI:

  1. Navigeer vanuit een terminal of de opdrachtregel naar de projectmap MyWebApp die uw MyWebApp.csproj-bestand bevat.

  2. Bouw en voer de app uit met de volgende opdracht:

    dotnet run
    

    Het project is gebouwd, uitgevoerd en toont de volgende uitvoer op de opdrachtregel:

    C:\MyWebApp> dotnet run
    Building...
    info: Microsoft.Hosting.Lifetime[14]
            Now listening on: http://localhost:5267
    info: Microsoft.Hosting.Lifetime[0]
            Application started. Press Ctrl+C to shut down.
    

    Omdat het poortnummer in de opgegeven URL willekeurig is ingesteld in de configuratie bij het maken van het project, heeft uw eindpunt mogelijk een ander poortnummer.

  3. Open een browser naar de URL die is gegenereerd op uw eigen opdrachtregeluitvoer. Het antwoord Hello World! van de app wordt weergegeven:

    Schermopname van een browser met de tekstuitvoer.

  4. Om de app af te sluiten, drukt u op Ctrl+C in de opdrachtregel.

Hoe de web-app wordt bediend

Wanneer de app is gebouwd en uitgevoerd, worden de volgende stappen uitgevoerd:

Bouwen en configureren:

  • MSBuild wordt aangeroepen om afhankelijkheden te herstellen en het project te compileren. MSBuild verwerkt het projectbestand MyWebApp.csproj en compileert de broncode in een assembly.
  • De app leest configuratie-instellingen, inclusief de instellingen die zijn opgegeven in launchSettings.json voor het standaardstartprofiel (de eerste lijst).

Installatie van de host:

  • De WebApplication.CreateBuilder methode in Program.cs stelt de webhost in. Deze methode configureert standaard Kestrel als de webserver. Kestrel is een platformoverschrijdende webserver voor ASP.NET Core die is ontworpen voor hoge prestaties.
  • Kestrel luistert naar binnenkomende HTTP-aanvragen op de geconfigureerde URL's, inclusief HTTPS, indien opgegeven.

Aanvraagafhandeling:

  • Wanneer een aanvraag wordt ontvangen, stuurt Kestrel deze door naar de ASP.NET Core middleware-pijplijn.
  • De middleware-pijplijn verwerkt de aanvraag via een reeks middlewareonderdelen, die taken zoals verificatie, logboekregistratie en routering kunnen verwerken.
  • Als de aanvraag overeenkomt met een gedefinieerde route, wordt het bijbehorende eindpunt uitgevoerd. In dit geval verwerkt het app.MapGet("/", () => "Hello World!") eindpunt aanvragen naar de hoofd-URL en retourneert de tekenreeks Hello World!.

Respons:

  • Het antwoord, dat in dit geval de tekenreeks 'Hallo wereld!' is, wordt teruggestuurd via de middleware-pijplijn naar Kestrel, die het vervolgens terugstuurt naar de client.