Een Blazor-app implementeren in Azure Static Web Apps

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. De volgende tutorial laat zien hoe u een C# Blazor WebAssembly-app uitrolt die weergegevens weergeeft die door een serverloze API worden geretourneerd.

Notitie

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 Aanmaken.

  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 het dichtst bij u in de buurt ligt.
    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.
    Branch Selecteer main.

    Notitie

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

  9. In de sectie Build Details selecteert u Blazor in de vervolgkeuzelijst Build Presets, waarna 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 uitvoer van de build met de gepubliceerde Blazor WebAssembly-toepassing

  10. Selecteer Controleren + Aanmaken om te controleren of alle details juist zijn.

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

  12. Zodra de implementatie is voltooid, selecteert u Ga naar de 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. De eerste is het inrichten van de onderliggende Azure-resources waaruit uw app is opgebouwd. De tweede is een werkstroom voor GitHub-acties die uw toepassing bouwt en publiceert.

Voordat u uw nieuwe statische web-app kunt openen, moet de implementatiebuild eerst zijn voltooid.

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-uitvoeringen te controleren om te zien welke GitHub Actions worden uitgevoerd op uw opslagplaats. Zodra u hebt gecontroleerd of de implementatietaak is voltooid, kunt u via de gegenereerde URL naar uw website gaan.

    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 de 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 Back-end van de Azure Functions-API.

Visual Studio-project Beschrijving
Api De C# Azure Functions-toepassing implementeert het API-eindpunt dat weerinformatie biedt aan de Blazor WebAssembly-app. De WeatherForecastFunction retourneert een matrix van WeatherForecast objects.
Klant Het frontendproject van Blazor WebAssembly. 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 kunnen stromen van api-eindpunt naar de front-endweb-app. De WeatherForecast--klasse wordt gedeeld tussen beide apps.

Blazor statische web-appVolledige Blazor-app.

Alternatieve route

De app toont URL's zoals /counter en /fetchdata, die worden toegewezen aan specifieke routes van de app. Omdat deze app is opgezet als een single-page-app, wordt voor elke route het bestand index.html aangeboden. Om ervoor te zorgen dat verzoeken voor elk pad index.html retourneren, wordt in het bestand staticwebapp.config.json in de hoofdmap van het clientproject een fallbackroute geïmplementeerd.

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

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

Implementeren vanuit Visual Studio

Als alternatief voor implementatie via GitHub Actions kunt u rechtstreeks vanuit Visual Studio implementeren naar Azure Static Web Apps. Maak een publicatieprofiel voor Azure Static Web Apps:

  1. Selecteer in de gebruikersinterface van Visual Studio PublishTarget>Azure>Specific Target>Azure Static Web Apps om een profielte maken.

  2. Stel in de configuratie van het publicatieprofiel de naam van het abonnement in. Selecteer een bestaand exemplaar of selecteer Een nieuw exemplaar maken. Wanneer u een nieuw exemplaar maakt in de Statische web-app maken UI van de Azure-portal, stelt u de details van de implementatie>Bron in op Andere. Wacht tot de implementatie is voltooid in Azure Portal voordat u doorgaat.

  3. Kies in de configuratie van het publicatieprofiel het Azure Static Web Apps-exemplaar uit de resourcegroep van het exemplaar. Selecteer Voltooien om het publicatieprofiel te maken. Als Visual Studio wordt gevraagd om de SWA-CLI (Static Web Apps) te installeren, installeert u de CLI door de aanwijzingen te volgen. Voor de SWA CLI is npm/Node.js (Documentatie voor Visual Studio) vereist.

Nadat het publicatieprofiel is gemaakt, implementeert u de app in het Azure Static Web Apps-exemplaar met behulp van het publicatieprofiel door de knop Publiceren te selecteren.

Resources opschonen

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

  1. Open het Azure-portal.
  2. Zoek in de bovenste zoekbalk naar mijn blazor-groep.
  3. Selecteer de groepsnaam.
  4. Selecteer Verwijderen.
  5. Selecteer Ja om de verwijderactie te bevestigen.

Volgende stappen

Verifiëren en autoriseren

  • Last updated on