Zelfstudie: Azure Static Web Apps publiceren met Azure DevOps

In dit artikel wordt gedemonstreerd hoe Azure Static Web Apps implementeert met behulp van Azure DevOps.

In deze zelfstudie leert u het volgende:

• Een nieuwe Azure Static Web Apps instellen
• Een Azure-pijplijn maken om een statische web-app te bouwen en te publiceren

Vereisten

• Actief Azure-account: Als u nog geen account hebt, kunt u gratis een account maken.
• Azure DevOps-project: Als u nog geen project hebt, kunt u gratis een project maken.
  • Azure DevOps bevat Azure Pipelines. Zie Uw eerste pijplijn maken als u hulp nodig hebt om aan de slag te gaan met Azure Pipelines.
  • De statische web-app-pijplijntaak werkt momenteel alleen op Linux-machines. Wanneer u de hieronder vermelde pijplijn wilt uitvoeren, controleert u of deze wordt uitgevoerd op een Linux-VM.

Een statische web-app maken in een Azure DevOps

1. Navigeer naar uw opslagplaats in Azure-opslagplaatsen.

2. Selecteer Importeren om te beginnen met het importeren van een voorbeeldtoepassing.

   

3. Voer in Kloon-URL https://github.com/staticwebdev/vanilla-api.git in.

4. Selecteer Importeren.

Statische web-app maken

1. Navigeer naar Azure Portal.

2. Selecteer Een resource maken.

3. Zoek Static Web Apps.

4. Selecteer Statische web-apps.

5. Selecteer Maken.

6. Maak een nieuwe statische web-app met de volgende waarden.

   

   Instelling	Waarde
   Abonnement	Uw Azure-abonnementnaam.
   Resourcegroep	Selecteer een bestaande groepsnaam of maak een nieuwe.
   Name	Voer myDevOpsApp in.
   Type hostingplan	Selecteer Gratis.
   Regio	Selecteer een regio die het dichtst bij u in de buurt is.
   Bron	Selecteer Overige.

7. Selecteer Controleren en maken.

8. Selecteer Maken.

9. Zodra de implementatie is geslaagd, selecteert u Ga naar resource.

10. Selecteer Implementatie-token beheren.

11. Kopieer het implementatie-token en plak de waarde van het implementatie-token in een teksteditor voor gebruik in een ander scherm.

    Notitie

    Deze waarde wordt voor nu gereserveerd omdat u in de komende stappen meer waarden gaat kopiëren en plakken.

    

De pijplijntaak maken in Azure DevOps

1. Navigeer naar de opslagplaats in Azure-opslagplaatsen die eerder is gemaakt.

2. Selecteer Build instellen.

   

3. Selecteer in het scherm Uw pijplijn configureren de optie Starter-pijplijn.

   

4. Kopieer de volgende YAML en vervang de gegenereerde configuratie in uw pijplijn door deze code.

   trigger:
     - main
   
   pool:
     vmImage: ubuntu-latest
   
   steps:
     - checkout: self
       submodules: true
     - task: AzureStaticWebApp@0
       inputs:
         app_location: '/src'
         api_location: 'api'
         output_location: '/src'
         azure_static_web_apps_api_token: $(deployment_token)
   

   Notitie

   Als u de voorbeeld-app niet gebruikt, moeten de waarden voor , en worden gewijzigd om overeen te komen met app_location de waarden in uw api_location output_location toepassing.

   Eigenschap	Beschrijving	Voorbeeld	Vereist
   app_location	Locatie van de toepassings code.	Voer / in als de bron code van uw toepassing zich in de hoofdmap van de opslag plaats bevindt, of /app als uw toepassings code zich in een map bevindt met de naam app .	Yes
   api_location	De locatie van uw Azure Functions-code.	Voer /api in als uw app-code zich in een map bevindt met de naam api . Als er geen Azure Functions-app wordt gedetecteerd in de map, mislukt de build, wordt ervan uitgegaan dat u geen API wilt.	No
   output_location	Locatie van de map voor het build-uitvoer ten opzichte van de app_location .	Als de bron code van uw toepassing zich in bevindt /app en het build-script bestanden naar de /app/build map levert, wordt ingesteld build als de output_location waarde.	Nee

   De azure_static_web_apps_api_token waarde wordt zelf beheerd en handmatig geconfigureerd.

5. Selecteer Variabelen.

6. Selecteer Nieuwe variabele.

7. Noem de variabele deployment_token (die overeenkomt met de naam in de werkstroom).

8. Kopieer het implementatie-token dat u eerder in een teksteditor hebt gesijld.

9. Plak het implementatie-token in het vak Waarde.

   

10. Selecteer Deze waarde geheim houden.

11. Selecteer OK.

12. Selecteer Opslaan om terug te keren naar de YAML van uw pijplijn.

13. Selecteer Opslaan en uitvoeren om het dialoogvenster Opslaan en uitvoeren te openen.

    

14. Selecteer Opslaan en uitvoeren om de pijplijn uit te voeren.

15. Zodra de implementatie is geslaagd, gaat u naar het Azure Static Web Apps overzicht dat koppelingen naar de implementatieconfiguratie bevat. De koppeling Bron wijst nu naar de vertakking en locatie van de Azure DevOps-opslagplaats.

16. Selecteer de URL om uw zojuist geïmplementeerde website weer te geven.

    

Resources opschonen

Schoon de geïmplementeerd resources op door de resourcegroep te verwijderen.

1. Selecteer Resourcegroep in het linkermenu van Azure Portal.
2. Voer de naam van de resourcegroep in het veld Filter by name in.
3. Selecteer de naam van de resourcegroep die u in deze zelfstudie hebt gebruikt.
4. Selecteer Resourcegroep verwijderen in het bovenste menu.

Volgende stappen