Dela via

Distribuera din webbapp till Azure Static Web Apps

  • Artikel

I den här artikeln skapar du en ny webbapp med valfri ramverk, kör den lokalt och distribuerar sedan till Azure Static Web Apps.

Förutsättningar

För att slutföra självstudierna behöver du:

Resurs beskrivning
Azure-prenumeration Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
Node.js Installera version 20.0 eller senare.
Azure CLI Installera version 2.6x eller senare.

Du behöver också en textredigerare. För att arbeta med Azure rekommenderas Visual Studio Code .

Du kan köra appen som du skapar i den här artikeln på valfri plattform, inklusive: Linux, macOS, Windows eller Windows-undersystem för Linux.

Skapa din webbapp

  1. Öppna ett terminalfönster.

  1. Välj en lämplig katalog för koden och kör sedan följande kommandon.

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

    När du kör dessa kommandon skriver utvecklingsservern ut webbadressen till webbplatsen. Välj länken för att öppna den i standardwebbläsaren.

    Skärmbild av den genererade vaniljwebbappen.

  1. Välj en lämplig katalog för koden och kör sedan följande kommandon.

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

    När du kör dessa kommandon skriver utvecklingsservern ut webbadressen till webbplatsen. Välj länken för att öppna den i standardwebbläsaren.

    Skärmbild av det genererade angular-webbprogrammet.

  1. Välj en lämplig katalog för koden och kör sedan följande kommandon.

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

    När du kör dessa kommandon skriver utvecklingsservern ut webbadressen till webbplatsen. Välj länken för att öppna den i standardwebbläsaren.

    Skärmbild av det genererade react-webbprogrammet.

  1. Välj en lämplig katalog för koden och kör sedan följande kommandon.

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

    När du kör dessa kommandon skriver utvecklingsservern ut webbadressen till webbplatsen. Välj länken för att öppna den i standardwebbläsaren.

    Skärmbild av det genererade Vue-webbprogrammet.

  1. Välj Cmd/Ctrl+C för att stoppa utvecklingsservern.

Skapa en statisk webbapp i Azure

Du kan skapa en statisk webbapp med hjälp av Azure Portal, Azure CLI, Azure PowerShell eller Visual Studio Code (med tillägget Azure Static Web Apps). I den här självstudien används Azure CLI.

  1. Logga in på Azure CLI:

    az login

    Som standard öppnar det här kommandot en webbläsare för att slutföra processen. Azure CLI har stöd för olika metoder för att logga in om den här metoden inte fungerar i din miljö.

  2. Om du har flera prenumerationer kan du behöva välja en prenumeration. Du kan visa din aktuella prenumeration med hjälp av följande kommando:

    az account show

    Om du vill välja en prenumeration kan du köra az account set kommandot .

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Skapa en resursgrupp.

    Resursgrupper används för att gruppera Azure-resurser tillsammans.

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

    Parametern -n refererar till platsnamnet och parametern -l är Namnet på Azure-platsen. Kommandot avslutas med --query "properties.provisioningState" så att kommandot bara returnerar ett lyckat eller felmeddelande.

  4. Skapa en statisk webbapp i din nyligen skapade resursgrupp.

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

    Parametern -n refererar till platsnamnet och parametern -g refererar till namnet på Azure-resursgruppen. Kontrollera att du anger samma resursgruppsnamn som i föregående steg. Din statiska webbapp är globalt distribuerad, så platsen är inte viktig för hur du distribuerar din app.

    Kommandot är konfigurerat för att returnera URL:en för webbappen. Du kan kopiera värdet från terminalfönstret till webbläsaren för att visa din distribuerade webbapp.

Konfigurera för distribution

  1. Lägg till en staticwebapp.config.json fil i programkoden med följande innehåll:

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

    Genom att definiera en återställningsväg kan din webbplats servera index.html filen för alla begäranden som görs mot domänen.

    Kontrollera den här filen i källkodskontrollsystemet (till exempel git) om du använder en.

  2. Installera Azure Static Web Apps (SWA) CLI i projektet.

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

    SWA CLI hjälper dig att utveckla och testa din webbplats lokalt innan du distribuerar den till molnet.

  3. Skapa en ny fil för projektet och ge den swa-cli.config.jsonnamnet .

    Filen swa-cli.config.json beskriver hur du skapar och distribuerar din webbplats.

    När den här filen har skapats kan du generera dess innehåll med hjälp av npx swa init kommandot .

    npx swa init --yes

  4. Skapa ditt program för distribution.

    npx swa build

  5. Använd SWA CLI för att logga in på Azure.

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

    Använd samma resursgruppsnamn och statiska webbappnamn som du skapade i föregående avsnitt. När du försöker logga in öppnas en webbläsare för att slutföra processen om det behövs.

Varning

Angular v17 och senare placerar de distribuerbara filerna i en underkatalog till den utdatasökväg som du kan välja. SWA CLI vet inte den specifika platsen för katalogen. Följande steg visar hur du anger den här sökvägen korrekt.

Leta upp den genererade index.html filen i projektet i mappen dist/swa-angular-demo/browser .

  1. SWA_CLI_OUTPUT_LOCATION Ange miljövariabeln till katalogen som innehåller filen index.html:

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

Distribuera din webbplats till Azure

Distribuera koden till din statiska webbapp:

npx swa deploy --env production

Det kan ta några minuter att distribuera programmet. När det är klart visas webbadressen till webbplatsen.

Skärmbild av distributionskommandot.

I de flesta system kan du välja url:en för webbplatsen för att öppna den i standardwebbläsaren.

Rensa resurser (valfritt)

Om du inte fortsätter med andra självstudier tar du bort Azure-resursgruppen och resurserna:

az group delete -n swa-tutorial

När du tar bort en resursgrupp tar du bort alla resurser som den innehåller. Du kan inte ångra den här åtgärden.

Nästa steg

Lägg till autentisering

Relaterat innehåll