Zelfstudie: Een statische web-app bouwen met Blazor in Azure Static Web Apps

Met Azure Static Web Apps wordt een website gepubliceerd in een productieomgeving door apps te bouwen vanuit een GitHub-opslagplaats. In deze snelsartgids implementeert u een webtoepassing in Azure Static Web Apps met behulp van de Azure Portal.

Als u nog geen Azure-abonnement hebt, maakt u een gratis proefaccount.

Vereisten

• Een GitHub-account
• Azure-account

Overzicht van toepassing

Met Azure Static Web Apps kunt u statische webtoepassingen maken die worden ondersteund door een serverloze back-end. In de volgende zelfstudie wordt gedemonstreerd hoe u een C# Blazor WebAssembly-toepassing implementeert die weergegevens we weergeven die worden geretourneerd door een serverloze API.

De app die in deze zelfstudie wordt aanbevolen, bestaat uit drie verschillende Visual Studio-projecten:

• API: de C#-Azure Functions die het API-eindpunt implementeert dat weerinformatie 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 de API- en client-projecten, waarmee gegevens kunnen stromen van API-eindpunt naar de front-end-web-app. De -WeatherForecast-klasse wordt gedeeld tussen beide apps.

Samen vormen deze 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-Azure Functions API.

Alternatieve route

De toepassing geeft URL's weer zoals /counter en /fetchdata die aan specifieke routes van de toepassing zijn toegewezen. Omdat deze app is geïmplementeerd als een toepassing met één pagina, krijgt elke route het bestand index.html. Om ervoor te zorgen dat aanvragen voor een pad index.html wordt een terugvalroute geïmplementeerd in het bestandstaticwebapp.config.json in de hoofdmap van het clientproject.

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

De bovenstaande configuratie zorgt ervoor dat aanvragen voor elke route in de app de pagina index.html retourneert.

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 kan worden geïmplementeerd op 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. Noem uw opslagplaats my-first-static-blazor-app.

Statische web-app maken

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

1. Navigeer naar Azure Portal.

2. Selecteer Een resource maken.

3. Zoek Static Web Apps.

4. Selecteer Statische web-apps.

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 het dichtst bij u in de buurt is.
   Bron	GitHub

7. Selecteer Aanmelden met GitHub en verifieren met GitHub.

8. Voer de volgende GitHub in.

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

9. Selecteer in de sectie BuildDetails blazor in de vervolgkeuzesets voor build en 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 builduitvoer met de gepubliceerde Blazor WebAssembly-toepassing

Controleren en maken

1. Selecteer de knop Beoordelen en maken om te controleren of de details juist zijn.

2. Selecteer Maken om te beginnen met het maken van App Service statische web-app en een GitHub-actie voor implementatie.

3. Zodra de implementatie is voltooid, klikt u op Naar de resource gaan.

4. Selecteer Ga naar resource.

   

De website weergeven

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 navigeren, 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. Als u op de banner klikt waarin staat Klik hier om de status van de uitvoering van uw GitHub-acties te controleren wordt u naar de GitHub-acties geleid die worden uitgevoerd in uw opslagplaats. Zodra u hebt gecontroleerd of de implementatietaak is voltooid, kunt u naar de website navigeren via de gegenereerde URL.

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.

Resources opschonen

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

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

Volgende stappen