Een Blazor-app implementeren op Azure Static Web Apps

  • Artikel

Azure Static Web Apps publiceert een website naar een productieomgeving door apps te bouwen vanuit een GitHub-opslagplaats die wordt ondersteund door een serverloze back-end. In de volgende zelfstudie ziet u hoe u de C# Blazor WebAssembly-app implementeert waarmee weergegevens worden weergegeven die worden geretourneerd door een serverloze API.

Vereisten

1. Een opslagplaats maken

In dit artikel wordt gebruikgemaakt van een GitHub-opslagplaatssjabloon, zodat u eenvoudig aan de slag kunt gaan. De sjabloon bevat een starter-app die u kunt implementeren in Azure Static Web Apps.

  1. Zorg ervoor dat u bent aangemeld bij GitHub en ga naar de volgende locatie om een nieuwe opslagplaats te maken: https://github.com/staticwebdev/blazor-starter/generate
  2. Geef uw opslagplaats de naam my-first-static-blazor-app.

2. Een statische web-app maken

Nu de opslagplaats is gemaakt, kunt u een statische web-app maken in de Azure Portal.

  1. Ga naar de Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek Static Web Apps.

  4. Selecteer Statische web-app.

  5. Selecteer Maken.

  6. Voer op het tabblad Basisinformatie de volgende waarden in.

    Eigenschap Waarde
    Abonnement Uw Azure-abonnementnaam.
    Resourcegroep my-blazor-group
    Naam my-first-static-blazor-app
    Plantype Gratis
    Regio voor Azure Functions-API en faseringsomgevingen Selecteer een regio die zich het dichtst bij u in de buurt bevindt.
    Bron GitHub

  7. Selecteer Aanmelden met GitHub en verifieer met GitHub als u hierom wordt gevraagd.

  8. Voer de volgende GitHub-waarden in.

    Eigenschap Waarde
    Organisatie Selecteer de gewenste GitHub-organisatie.
    Opslagplaats Selecteer my-first-static-blazor-app.
    Vertakking Selecteer hoofd.

    Notitie

    Als u geen opslagplaatsen ziet, moet u mogelijk Azure Static Web Apps op GitHub autoriseren. Blader vervolgens naar uw GitHub-opslagplaats en ga naar Instellingen > Toepassingen > Geautoriseerde OAuth-apps, selecteer Azure Static Web Apps en selecteer vervolgens Verlenen. Voor organisatie-opslagplaatsen moet u een eigenaar van de organisatie zijn om de machtigingen te verlenen.

  9. Selecteer blazor in de vervolgkeuzelijst Build-voorinstellingen in de sectie Builddetails. De volgende waarden worden ingevuld.

    Eigenschap Waarde Beschrijving
    App-locatie Client Map met de Blazor WebAssembly-app
    API-locatie Api Map met de Azure Functions-app
    Uitvoerlocatie wwwroot Map in de build-uitvoer met de gepubliceerde Blazor WebAssembly-toepassing

  10. Selecteer Controleren en maken om te controleren of de details correct zijn.

  11. Selecteer Maken om het maken van de statische web-app te starten en een GitHub Actions in te richten voor implementatie.

  12. Nadat de implementatie is voltooid, selecteert u Ga naar resource.

  13. Selecteer Ga naar resource.

De knop Naar de resource gaan

3. Bekijk de website

Het implementeren van een statische app heeft twee aspecten. Het eerste aspect is het inrichten van de onderliggende Azure-resources waaruit de app bestaat. De tweede is een werkstroom voor GitHub-acties die uw toepassing bouwt en publiceert.

Voordat u naar uw nieuwe statische web-app kunt gaan, moet de implementatie-build eerst worden uitgevoerd.

In het overzichtsvenster van Static Web Apps wordt een reeks koppelingen weergegeven die u helpen te werken met uw web-app.

  1. Selecteer de banner met de tekst Klik hier om de status van uw GitHub Actions wordt uitgevoerd om te zien welke GitHub Actions wordt uitgevoerd in uw opslagplaats. Nadat u hebt gecontroleerd of de implementatietaak is voltooid, kunt u naar uw website gaan via de gegenereerde URL.

    Schermopname van het overzichtsvenster.

  2. Zodra de werkstroom voor GitHub Actions is voltooid, kunt u op de URL-koppeling klikken om de website te openen in een nieuw tabblad.

    Schermopname van Static Web Apps Blazor-webpagina.

4. Inzicht in het toepassingsoverzicht

Samen vormen de volgende projecten de onderdelen die nodig zijn om een Blazor WebAssembly-toepassing te maken die wordt uitgevoerd in de browser die wordt ondersteund door een Azure Functions API-back-end.

Visual Studio-project Beschrijving
Api De C# Azure Functions-toepassing implementeert het API-eindpunt dat weersinformatie levert aan de Blazor WebAssembly-app. De WeatherForecastFunction retourneert een matrix van WeatherForecast objects.
Client Het front-end Blazor WebAssembly-project. Er wordt een terugvalroute geïmplementeerd om ervoor te zorgen dat routering aan de clientzijde functioneel is.
Gedeeld Bevat algemene klassen waarnaar wordt verwezen door zowel de API- als clientprojecten, waarmee gegevens van het API-eindpunt naar de front-endweb-app kunnen stromen. De -WeatherForecast-klasse wordt gedeeld tussen beide apps.

Statische Blazor-web-appComplete Blazor-app.

Alternatieve route

De app maakt URL's beschikbaar zoals /counter en /fetchdata, die worden toegewezen aan specifieke routes van de app. Omdat deze app als één pagina wordt geïmplementeerd, wordt het index.html bestand voor elke route geleverd. Om ervoor te zorgen dat aanvragen voor een pad retourneren index.html, wordt een terugvalroute geïmplementeerd in het staticwebapp.config.json bestand in de hoofdmap van het clientproject.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

De JSON-configuratie zorgt ervoor dat aanvragen voor elke route in de app de index.html pagina retourneren.

Resources opschonen

Als u deze toepassing niet gaat gebruiken, kunt u de Azure Static Web Apps-instantie verwijderen door de volgende stappen uit te voeren:

  1. Open de Azure Portal.
  2. Zoek in de bovenste zoekbalk naar my-blazor-group .
  3. Selecteer de groepsnaam.
  4. Selecteer Verwijderen.
  5. Selecteer Ja om de verwijderactie te bevestigen.

Volgende stappen

Verifiëren en autoriseren