Oefening: een Azure Static Web App maken

  • 5 minuten

In deze oefening maakt u een Azure Static Web Apps-instantie en een GitHub-actie waarmee u uw toepassing automatisch kunt bouwen en publiceren.

Statische web-app maken

Nu u uw GitHub-opslagplaats hebt gemaakt, kunt u vanuit de Azure Portal een Static Web Apps-instantie maken.

De extensie Azure Static Web Apps voor Visual Studio Code installeren

  1. Ga naar Visual Studio Marketplace en installeer de Azure Static Web Apps-extensie voor Visual Studio Code.

  2. Wanneer het tabblad Extensie in Visual Studio Code wordt geladen, selecteert u de knop Installeren .

  3. Nadat de installatie is voltooid, selecteert u Opnieuw opstarten om bij te werken als hierom wordt gevraagd.

Aanmelden bij Azure in Visual Studio Code

  1. Meld u in Visual Studio Code aan bij Azure doorOpdrachtpalet> te selecteren en Azure: Aanmelden in te voeren.

  2. Volg de aanwijzingen om de code vanuit de webbrowser te kopiëren en plakken. Hiermee wordt uw sessie met Visual Studio Code geverifieerd.

Selecteer uw abonnement

  1. Open Visual Studio Code en selecteer Bestand > openen en open de opslagplaats die u hebt gekloond naar uw computer in de editor.

  2. Controleer of u zich hebt aangemeld bij uw favoriete Azure-abonnement door het opdrachtenpalet te openen en in te voeren Azure: Select Subscriptionsen op Enter te drukken.

  3. Selecteer uw abonnement (er moet een vinkje naast worden weergegeven) en klik op OK.

Statische web-app maken

  1. Open Visual Studio Code en selecteer Bestand > openen om de opslagplaats te openen die u hebt gekloond naar uw computer in de editor.

  2. Selecteer in Visual Studio Code het Azure-logo in de activiteitenbalk om het venster met Azure-extensies te openen.

    Schermopname van het Azure-logo in VS Code.

    Notitie

    Aanmelding bij Azure en GitHub zijn vereist. Als u zich nog niet hebt aangemeld bij Azure en GitHub via Visual Studio Code, wordt u tijdens het aanmaakproces gevraagd om u bij beide aan te melden.

  3. Plaats de muis over de kop van Static Web Apps , klik met de rechtermuisknop en selecteer Statische web-app maken.

    Schermopname die laat zien waar u naartoe gaat om een web-app te maken.

  4. Voer my-first-static-web-app in en druk op Enter.

    Schermopname die laat zien hoe u een statische web-app maakt.

  5. Selecteer uw locatie en druk op Enter.

    Schermopname die laat zien hoe u een abonnement selecteert.

  1. Selecteer de optie Angular en druk op Enter.

    Schermopname met de geselecteerde Angular-optie.

  2. Voer /angular-app in als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de codelocatie die is ingevoerd als Angular-app.

  3. Voer dist/angular-app in als de locatie van de build-uitvoer waarin bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname die laat zien hoe u de build-uitvoerlocatie voor Angular invoert.

  1. Selecteer de React-optie en druk op Enter.

    Schermopname van de geselecteerde react-optie.

  2. Voer /react-app in als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de codelocatie die is ingevoerd als react-app.

  3. Voer de build-uitvoerlocatie in waar bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname die laat zien hoe u de build-uitvoerlocatie voor React invoert.

  1. Selecteer de optie Svelte en druk op Enter.

    Schermopname van de svelte-optie geselecteerd.

  2. Voer /svelte-app in als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de codelocatie die is ingevoerd als Svelte-app.

  3. Voer openbaar in als de locatie van de build-uitvoer waarin bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname die laat zien hoe u de build-uitvoerlocatie voor Svelte invoert.

  1. Selecteer de optie Vue en druk op Enter.

    Schermopname met de optie Vue geselecteerd.

  2. Voer /vue-app in als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de codelocatie die is ingevoerd als Vue-app.

  3. Voer dist in als de locatie van de build-uitvoer waarin bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname van het invoeren van de build-uitvoerlocatie voor Vue

Notitie

Uw opslagplaats is mogelijk iets anders dan de opslagplaatsen die u in het verleden hebt gebruikt. Deze bevat vier verschillende apps in vier verschillende mappen. Elke map bevat een app die is gemaakt in een ander JavaScript-framework. Normaal gesproken hebt u één app in de hoofdmap van uw opslagplaats en geeft u / op voor de locatie van het app-pad. Dit is een goed voorbeeld van waarom Azure Static Web Apps u de mogelijkheid biedt om locaties te configureren. U krijgt hierdoor volledige controle over de manier waarop de app is gebouwd.

  1. Zodra de app is gemaakt, wordt er een bevestigingsbericht weergegeven in Visual Studio Code.

    Schermopname van de bevestigingscode waarin de gebruiker wordt gevraagd acties te openen in GitHub of Configureren weergeven/bewerken.

  2. U kunt de voortgang van de implementatie bekijken met behulp van GitHub Actions door het menu Acties uit te vouwen.

    Schermopname van het controleren van de voortgang via GitHub Actions.

    Zodra de implementatie is voltooid, kunt u rechtstreeks naar uw website navigeren.

  3. Als u de website in de browser wilt weergeven, klikt u met de rechtermuisknop op het project in de extensie Static Web Apps en selecteert u Bladeren door de site.

    Schermopname die laat zien hoe u naar de site van uw statische web-app bladert.

Gefeliciteerd U hebt uw eerste app geïmplementeerd in Azure Static Web Apps!

Notitie

Maakt u zich geen zorgen als u een webpagina ziet met de melding dat de app nog niet is gebouwd en geïmplementeerd. Vernieuw de browser over een minuut. De GitHub-actie wordt automatisch uitgevoerd wanneer de Azure Static Web Apps wordt gemaakt. Als u de welkomstpagina ziet, betekent dit dat de app nog steeds wordt geïmplementeerd.