Delen via

Uw web-app implementeren in Azure Static Web Apps

  • Artikel

In dit artikel maakt u een nieuwe web-app met het framework van uw keuze, voert u deze lokaal uit en implementeert u deze vervolgens in Azure Static Web Apps.

Vereisten

U hebt het volgende nodig om deze zelfstudie te voltooien:

Bron Beschrijving
Azure-abonnement Als u nog geen account hebt, kunt u gratis een account maken.
Node.js Installeer versie 20.0 of hoger.
Azure-CLI Installeer versie 2.6x of hoger.

U hebt ook een teksteditor nodig. Visual Studio Code wordt aanbevolen voor het werken met Azure.

U kunt de app die u in dit artikel maakt, uitvoeren op het platform van uw keuze, waaronder: Linux, macOS, Windows of Windows-subsysteem voor Linux.

Uw web-app maken

  1. Een terminalvenster openen.

  1. Selecteer een geschikte map voor uw code en voer vervolgens de volgende opdrachten uit.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    Terwijl u deze opdrachten uitvoert, drukt de ontwikkelserver de URL van uw website af. Selecteer de koppeling om deze te openen in uw standaardbrowser.

    Schermopname van de gegenereerde vanille-webtoepassing.

  1. Selecteer een geschikte map voor uw code en voer vervolgens de volgende opdrachten uit.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    Terwijl u deze opdrachten uitvoert, drukt de ontwikkelserver de URL van uw website af. Selecteer de koppeling om deze te openen in uw standaardbrowser.

    Schermopname van de gegenereerde angular-webtoepassing.

  1. Selecteer een geschikte map voor uw code en voer vervolgens de volgende opdrachten uit.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    Terwijl u deze opdrachten uitvoert, drukt de ontwikkelserver de URL van uw website af. Selecteer de koppeling om deze te openen in uw standaardbrowser.

    Schermopname van de gegenereerde react-webtoepassing.

  1. Selecteer een geschikte map voor uw code en voer vervolgens de volgende opdrachten uit.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    Terwijl u deze opdrachten uitvoert, drukt de ontwikkelserver de URL van uw website af. Selecteer de koppeling om deze te openen in uw standaardbrowser.

    Schermopname van de gegenereerde Vue-webtoepassing.

  1. Selecteer Cmd/Ctrl+C om de ontwikkelserver te stoppen.

Een statische web-app maken in Azure

U kunt een statische web-app maken met behulp van Azure Portal, Azure CLI, Azure PowerShell of Visual Studio Code (met de Azure Static Web Apps-extensie). In deze zelfstudie wordt de Azure CLI gebruikt.

  1. Meld u aan bij de Azure CLI:

    az login

    Met deze opdracht wordt standaard een browser geopend om het proces te voltooien. De Azure CLI ondersteunt verschillende methoden voor aanmelden als deze methode niet werkt in uw omgeving.

  2. Als u meerdere abonnementen hebt, moet u mogelijk een abonnement selecteren. U kunt uw huidige abonnement weergeven met behulp van de volgende opdracht:

    az account show

    Als u een abonnement wilt selecteren, kunt u de az account set opdracht uitvoeren.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Maak een resourcegroep.

    Resourcegroepen worden gebruikt om Azure-resources samen te groeperen.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    De -n parameter verwijst naar de sitenaam en de -l parameter is de azure-locatienaam. De opdracht wordt afgesloten zodat --query "properties.provisioningState" de opdracht alleen een geslaagd of foutbericht retourneert.

  4. Maak een statische web-app in uw zojuist gemaakte resourcegroep.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    De -n parameter verwijst naar de sitenaam en de -g parameter verwijst naar de naam van de Azure-resourcegroep. Zorg ervoor dat u dezelfde resourcegroepnaam opgeeft als in de vorige stap. Uw statische web-app wordt wereldwijd gedistribueerd, dus de locatie is niet belangrijk voor de implementatie van uw app.

    De opdracht is geconfigureerd om de URL van uw web-app te retourneren. U kunt de waarde vanuit het terminalvenster naar uw browser kopiëren om uw geïmplementeerde web-app weer te geven.

Configureren voor implementatie

  1. Voeg een staticwebapp.config.json bestand toe aan uw toepassingscode met de volgende inhoud:

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

    Door een terugvalroute te definiëren, kan uw site het index.html bestand serveren voor alle aanvragen die zijn gedaan op het domein.

    Controleer dit bestand in uw broncodebeheersysteem (zoals Git) als u er een gebruikt.

  2. Installeer de CLI van Azure Static Web Apps (SWA) in uw project.

    npm install -D @azure/static-web-apps-cli

    Met de SWA CLI kunt u uw site lokaal ontwikkelen en testen voordat u deze in de cloud implementeert.

  3. Maak een nieuw bestand voor uw project en geef het een swa-cli.config.jsonnaam.

    In swa-cli.config.json het bestand wordt beschreven hoe u uw site bouwt en implementeert.

    Zodra dit bestand is gemaakt, kunt u de inhoud ervan genereren met behulp van de npx swa init opdracht.

    npx swa init --yes

  4. Bouw uw toepassing voor distributie.

    npx swa build

  5. Gebruik de SWA CLI om u aan te melden bij Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Gebruik dezelfde naam van de resourcegroep en de naam van de statische web-app die u in de vorige sectie hebt gemaakt. Wanneer u zich probeert aan te melden, wordt een browser geopend om het proces zo nodig te voltooien.

Waarschuwing

Angular v17 en plaats de distribueerbare bestanden in een submap van het uitvoerpad dat u kunt kiezen. De SWA CLI kent de specifieke locatie van de map niet. In de volgende stappen ziet u hoe u dit pad correct instelt.

Zoek het gegenereerde index.html-bestand in uw project in de map dist/swa-angular-demo/browser.

  1. Stel de SWA_CLI_OUTPUT_LOCATION omgevingsvariabele in op de map met het bestand index.html :

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Uw site implementeren in Azure

Implementeer uw code in uw statische web-app:

npx swa deploy --env production

Het kan enkele minuten duren voordat de toepassing is geïmplementeerd. Als u klaar bent, wordt de URL van uw site weergegeven.

Schermafbeelding van de implementatieopdracht.

Op de meeste systemen kunt u de URL van de site selecteren om deze te openen in uw standaardbrowser.

Resources opschonen (optioneel)

Als u niet verdergaat met andere zelfstudies, verwijdert u de Azure-resourcegroep en -resources:

az group delete -n swa-tutorial

Wanneer u een resourcegroep verwijdert, verwijdert u alle resources die deze bevat. U kunt deze actie niet ongedaan maken.

Volgende stappen

Verificatie toevoegen

Gerelateerde inhoud