Oefening: aan de slag

  • 7 minuten

In deze oefening maakt u een Azure Static Web Apps-instantie en een GitHub-actie waarmee uw toepassing automatisch wordt gebouwd en gepubliceerd.

In deze module wordt de Azure-sandbox gebruikt om u een gratis, tijdelijk Azure-abonnement te bieden dat u kunt gebruiken om de oefening te voltooien. Voordat u doorgaat, moet u ervoor zorgen dat u de sandbox boven aan deze pagina hebt geactiveerd.

Tip

Als u problemen ondervindt met uw knooppuntafhankelijkheden, controleert u of Node Version Manager is geïnstalleerd en kunt u overschakelen naar een eerdere versie.

Een opslagplaats maken

Maak vervolgens een nieuwe opslagplaats met behulp van een sjabloon voor GitHub-opslagplaatsen. Er zijn verschillende sjablonen beschikbaar die elk een starter-app bevatten die is gebouwd met een ander front-end-framework.

  1. Ga naar de sjabloonpagina voor de sjabloonopslagplaats.

    • Als het foutbericht 404 Pagina niet gevonden wordt weergegeven, meldt u zich aan bij GitHub en probeert u het opnieuw.

  2. Als u wordt gevraagd om Eigenaar, kiest u een van uw GitHub-accounts.

  3. Geef uw opslagplaats de naam my-static-web-app-authn.

  4. Selecteer Opslagplaats maken van sjabloon.

Uw app lokaal klonen

U hebt zojuist een GitHub-opslagplaats gemaakt met de naam my-static-web-app-authn in uw GitHub-account. Kloon nu de opslagplaats en voer de code lokaal op uw computer uit.

  1. Open een terminal op uw computer.

  2. Begin door de GitHub-opslagplaats naar uw computer te klonen.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Ga naar de map voor de broncode.

    cd my-static-web-app-authn

CORS lokaal configureren

U hoeft zich geen zorgen te maken over cross-origin resource sharing (CORS) wanneer u publiceert naar Azure Static Web Apps. Met Azure Static Web Apps wordt uw app automatisch geconfigureerd zodat deze via een omgekeerde proxy met uw API op Azure kan communiceren. Als u de app echter lokaal uitvoert, moet u CORS configureren zodat uw web-app en API kunnen communiceren.

Instrueer nu Azure Functions om uw web-app toe te staan HTTP-aanvragen naar de API op uw computer te verzenden.

  1. Maak een bestand met de naam API/local.settings.json.

  2. Voeg de volgende inhoud toe aan het bestand:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Notitie

Het bestand local.settings.json is opgenomen in het bestand .gitignore. Dit voorkomt dat het bestand naar GitHub wordt gepusht. Dit is omdat het bestand mogelijk geheime gegevens bevat die u niet in GitHub wilt hebben. Daarom moest u het bestand maken toen u uw opslagplaats maakte op basis van de sjabloon.

De API uitvoeren

De api map bevat het Azure Functions-project met de HTTP-eindpunten voor de web-app. Begin met het lokaal uitvoeren van de API door de volgende stappen uit te voeren:

Notitie

Installeer de Azure Functions Core Tools waarmee u Azure Functions lokaal kunt uitvoeren.

  1. Open in Visual Studio Code het opdrachtpalet door op F1 te drukken.

  2. Voer Terminal in en selecteer Deze: Nieuwe geïntegreerde terminal maken.

  3. Ga naar de API-map :

    cd api

  4. Voer de Azure Functions-app lokaal uit:

    func start

Voer de web-app uit

  1. Ga vervolgens als volgt naar de map van uw favoriete front-endframework:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Installeer nu de toepassingsafhankelijkheden.

    npm install

  3. Voer tenslotte de front-end-clienttoepassing uit.

    npm start

    npm start

    npm run dev

    npm run serve

Blader naar uw app

Nu is het tijd om uw toepassing lokaal uit te voeren. Elke front-end-toepassing wordt uitgevoerd op een andere poort.

  1. Selecteer de koppeling om naar uw toepassing te bladeren.

  1. Blader naar http://localhost:4200.

    Schermopname van de gebruikersinterface van uw Angular-web-app.

  1. Blader naar http://localhost:3000.

    Schermopname van de gebruikersinterface van uw React-web-app.

  1. Blader naar http://localhost:5000.

    Schermopname van de gebruikersinterface van uw Svelte-web-app.

  1. Blader naar http://localhost:8080.

    Schermopname van de gebruikersinterface van uw Vue-web-app.

Uw app moet een lijst met producten weergeven.

  1. Stop uw actieve app door in de terminal op Ctrl-C te drukken.

U hebt uw toepassing gebouwd en deze wordt nu lokaal uitgevoerd in uw browser.

Vervolgens moet u de toepassing naar Azure Static Web App publiceren.

Statische web-app maken

Nu u uw GitHub-opslagplaats hebt gemaakt, kunt u vanuit de Azure-portal een Static Web Apps-instantie maken met behulp van de extensie Azure Static Web Apps voor Visual Studio Code.

De extensie Azure Static Web Apps voor Visual Studio Code installeren

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

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

  3. Nadat de installatie is voltooid, selecteert u Opnieuw laden.

Aanmelden bij Azure in Visual Studio Code

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

    Belangrijk

    Meld u aan bij Azure met hetzelfde account dat u ook hebt gebruikt voor het maken van de sandbox. De sandbox biedt toegang tot een Concierge-abonnement.

  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 om de opslagplaats te openen die u hebt gekloond naar uw computer in de editor.

  2. Controleer of u uw Azure-abonnementen hebt gefilterd om het Concierge-abonnement op te nemen door het opdrachtenpalet F1 te openen, in te voeren Azure: Select Subscriptionsen op Enter te drukken.

  3. Selecteer Concierge-abonnement en druk op Enter.

    Schermopname die laat zien hoe u kunt filteren op abonnement.

Een statische web-app maken met Visual Studio Code

  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 op de activiteitenbalk om het venster 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 het label Static Web Apps en selecteer + (plusteken).

    Schermopname van de naam van de toepassing die is getypt.

  4. Wanneer het opdrachtpalet boven aan de editor wordt geopend, selecteert u Concierge-abonnement en drukt u op Enter.

    Schermopname die laat zien hoe u een abonnement selecteert.

  5. Voer my-static-web-app-authn in en druk op Enter.

    Schermopname die laat zien hoe u Static Web Apps maakt.

  6. Selecteer de regio die het dichtst bij u ligt en druk op Enter.

    Schermopname van de locatieselectie.

  7. Selecteer de bijbehorende frameworkoptie en druk op Enter.

  1. Selecteer angular-app als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de locatie van de Angular-toepassingscode.

  2. Voer dist/angular-app in als de uitvoerlocatie waar bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname van het bestandspad van de Angular-app.

  1. Selecteer react-app als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de locatie van de React-toepassingscode.

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

    Schermopname van het pad naar de React-app-bestanden.

  1. Selecteer svelte-app als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de locatie van de Svelte-toepassingscode.

  2. Voer openbaar in als de uitvoerlocatie waar bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname van het pad naar de Svelte-app-bestanden.

  1. Selecteer vue-app als de locatie voor de toepassingscode en druk op Enter.

    Schermopname van de locatie van de Vue-toepassingscode.

  2. Voer dist in als de uitvoerlocatie waar bestanden zijn gebouwd voor productie in uw app en druk op Enter.

    Schermopname van het bestandspad van de Vue-app.

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. Nadat de app is gemaakt, wordt er een bevestigingsbericht weergegeven in Visual Studio Code.

    Schermopname van het pop-upvenster Open Actions in GitHub of View/Edit Config.

Terwijl de implementatie wordt uitgevoerd, rapporteert de Visual Studio Code-extensie de buildstatus aan u.

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Schermopname van het menu GitHub Actions in VS Code.

    Nadat de implementatie is voltooid, kunt u rechtstreeks naar uw website gaan.

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

    Schermopname van de bladersiteknop.

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

Notitie

Maak u geen zorgen als u een webpagina ziet waarin staat 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.

De wijzigingen ophalen uit GitHub

Haal de meest recente wijzigingen van GitHub op om het werkstroombestand te verwijderen dat is gemaakt door Azure Static Web Apps:

  1. Druk op F1 om het opdrachtenpalet te openen.

  2. Voer Git in en selecteer Git: Ophalen en druk vervolgens op Enter.

Volgende stappen

Vervolgens leert u hoe u gebruikersverificatie integreert in uw app.