Een Angular-app implementeren in Azure Static Web Apps

In dit artikel leert u hoe u een Angular-toepassing implementeert in Azure Static Web Apps met behulp van Azure Portal.

Vereisten

Bron	Opmerkingen
Azure-abonnement	Als u nog geen Azure-abonnement hebt, maakt u een gratis proefaccount.
GitHub-account	Als u geen GitHub-account hebt, kunt u er gratis een maken.

Bron	Opmerkingen
Azure-abonnement	Als u nog geen Azure-abonnement hebt, maakt u een gratis proefaccount.
Azure DevOps-account	Als u geen GitHub-account hebt, kunt u er een maken.

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 moet worden geïmplementeerd in Azure Static Web Apps.

1. Ga naar de volgende locatie om een nieuwe opslagplaats te maken:

   https://github.com/staticwebdev/angular-basic/generate

2. Geef de opslagplaats de naam mijn-eerste-statische-web-app

3. Selecteer Opslagplaats maken van sjabloon.

   

In dit artikel wordt gebruikgemaakt van een Azure DevOps-opslagplaats, zodat u eenvoudig aan de slag kunt gaan. De opslagplaats bevat een starter-app die wordt gebruikt om te implementeren met behulp van Azure Static Web Apps.

1. Aanmelden bij Azure DevOps.

2. Selecteer Nieuwe opslagplaats.

3. Vouw in het venster Nieuw project maken het menu Geavanceerd uit en maak de volgende selecties:

   Instelling	Weergegeven als
   Project	Voer my-first-web-static-app in.
   Visibility	Selecteer Privé.
   Versiebeheer	Selecteer Git.
   Werkitemproces	Selecteer de optie die het beste past bij uw ontwikkelmethoden.

4. Selecteer Maken.

5. Selecteer de menuopdracht Opslagplaatsen .

6. Selecteer het menu-item Bestanden .

7. Selecteer Importeren onder de kaart Opslagplaats importeren.

8. Kopieer een opslagplaats-URL voor het framework van uw keuze en plak deze in het vak URL klonen.

   https://github.com/staticwebdev/angular-basic.git

9. Selecteer Importeren en wacht tot het importproces is voltooid.

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 naar statische web-app.
4. Selecteer Statische web-app.
5. Selecteer Maken.

Op het tabblad Basisbeginselen kunt u de nieuwe app configureren en aan een GitHub-opslagplaats koppelen.

Instelling	Weergegeven als
Abonnement	Selecteer uw Azure-abonnement.
Resourcegroep	Selecteer de koppeling Nieuwe maken en voer static-web-apps-test in het tekstvak in.
Naam	Voer my-first-static-web-app in het tekstvak in.
Abonnementtype	Selecteer Gratis.
Bron	Selecteer GitHub en meld u indien nodig aan bij GitHub.

Nadat u bent aangemeld met GitHub, voert u de gegevens van de opslagplaats in.

Instelling	Weergegeven als
Organisatie	Selecteer uw organisatie.
Opslagplaats	Selecteer mijn-eerste-statische-web-app.
Vertakking	Selecteer de hoofdmap.

Notitie

Als u geen opslagplaatsen ziet:

• Mogelijk moet u Azure Static Web Apps autoriseren in GitHub. Blader naar uw GitHub-opslagplaats en ga naar Geautoriseerde OAuth-apps voor instellingen > >, selecteer Azure Static Web Apps en selecteer Vervolgens Verlenen.
• Mogelijk moet u Azure Static Web Apps autoriseren in uw Azure DevOps-organisatie. U moet een eigenaar van de organisatie zijn om de machtigingen te verlenen. Vraag toegang tot toepassingen van derden aan via OAuth. Zie Toegang tot REST API's autoriseren met OAuth 2.0 voor meer informatie.

Begin in de sectie Basisbeginselen door uw nieuwe app te configureren en deze te koppelen aan een Azure DevOps-opslagplaats.

Instelling	Weergegeven als
Abonnement	Selecteer uw Azure-abonnement.
Resourcegroep	Selecteer de koppeling Nieuwe maken en voer static-web-apps-test in het tekstvak in.
Naam	Voer my-first-static-web-app in het tekstvak in.
Abonnementtype	Selecteer Gratis.
Bron	Selecteer DevOps.
Organisatie	Selecteer uw organisatie.
Project	Selecteer uw project.
Opslagplaats	Selecteer mijn-eerste-statische-web-app.
Vertakking	Selecteer de hoofdmap.

Notitie

Zorg ervoor dat de vertakking die u gebruikt, niet is beveiligd en dat u over voldoende machtigingen beschikt om een push opdracht uit te voeren. Als u dit wilt controleren, bladert u naar uw DevOps-opslagplaats en gaat u naar Opslagplaatsen ->Branches en selecteert u Meer opties. Selecteer vervolgens uw vertakking en vervolgens Vertakkingsbeleid om ervoor te zorgen dat vereiste beleidsregels niet zijn ingeschakeld.

Voeg in de sectie Build-details configuratiegegevens toe die specifiek zijn voor het front-end-framework van uw keuze.

1. Selecteer Angular in de vervolgkeuzelijst Build Presets .

2. Behoud de standaardwaarde in het vak App-locatie .

3. Laat het vak Api-locatie leeg.

4. Typ dist/angular-basic in het vak Uitvoerlocatie .

Notitie

Als u deze instructies gebruikt met uw eigen code en Angular 17 of hoger, moet de waarde van de uitvoerlocatie eindigen met /browser.

Selecteer Controleren + maken.

Notitie

U kunt het werkstroombestand bewerken als u deze waarden wilt wijzigen nadat u de app hebt gemaakt.

Selecteer Maken.

Selecteer Naar resource.

De website weergeven

Het implementeren van een statische app heeft twee aspecten. De eerste maakt de onderliggende Azure-resources waaruit uw app bestaat. De tweede is een werkstroom waarmee uw toepassing wordt gebouwd en gepubliceerd.

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

In het overzichtsvenster van Static Web Apps wordt een reeks koppelingen weergegeven waarmee u kunt communiceren met uw web-app.

1. Als u GitHub Action selecteert in het overzicht, gaat u naar de GitHub Actions die worden uitgevoerd op uw opslagplaats. Controleer of de implementatieactie is voltooid voordat u doorgaat.

2. Zodra de GitHub Actions-werkstroom is voltooid, kunt u de URL-koppeling selecteren om de website op het nieuwe tabblad te openen.

Zodra de werkstroom is voltooid, kunt u de URL-koppeling selecteren om de website op het nieuwe tabblad te openen.

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 mijn-eerste-statische-web-app.
3. Selecteer de naam van de app.
4. Selecteer Verwijderen.
5. Selecteer Ja om de verwijderactie te bevestigen (deze actie kan even duren).

Volgende stappen

Een API toevoegen aan uw toepassing