Een statische web-app implementeren met Azure Static Web Apps CLI

Artikel
12/19/2024

Belangrijk

Om de beveiliging van implementaties van de Static Web Apps CLI te verbeteren, is er een belangrijke wijziging geïntroduceerd waarvoor u moet upgraden naar de nieuwste versie (2.0.2) van de Static Web Apps CLI op 15 januari 2025.

De Azure Static Web Apps CLI (SWA CLI) bevat de deploy opdracht om het huidige project te implementeren in Azure Static Web Apps.

Veelvoorkomende implementatiescenario's zijn:

Een front-end-app zonder API
Een front-end-app met een API
Blazor-apps

Implementatietoken

De SWA CLI ondersteunt het implementeren met behulp van een implementatietoken om setups in CI/CD-omgevingen in te schakelen.

U kunt een implementatietoken ophalen uit:

Azure Portal: Home → Static Web App → Your Instance → Overview → Manage deployment token

Azure CLI: met behulp van de secrets list opdracht:

az staticwebapp secrets list --name <APPLICATION_NAME> --query "properties.apiKey"

Azure Static Web Apps CLI: met behulp van de deploy opdracht:
```
swa deploy --print-token
```

Vervolgens kunt u de tokenwaarde gebruiken met de --deployment-token <TOKEN> of u kunt een omgevingsvariabele maken die wordt aangeroepen SWA_CLI_DEPLOYMENT_TOKEN en ingesteld op het implementatietoken.

Belangrijk

Sla geen implementatietokens op in een openbare opslagplaats.

Een front-end-app zonder API implementeren

U kunt een front-endtoepassing implementeren zonder API in Azure Static Web Apps. Als uw front-endtoepassing een buildstap vereist, voert u deze uit swa build of raadpleegt u de build-instructies van uw toepassing.

Selecteer de optie die het beste past bij uw behoeften om uw implementatie te configureren

Optie 1: Voer de implementatieopdracht uit vanuit de buildmap die u wilt implementeren:
```
cd build/
swa deploy
```
Notitie

De buildmap moet de statische inhoud van uw app bevatten die moet worden geïmplementeerd.
Optie 2: U kunt ook een specifieke map implementeren:
1. Als uw front-endtoepassing een buildstap vereist, voert u deze uit swa build of raadpleegt u de build-instructies van uw toepassing.
2. Uw app implementeren:
```
swa deploy ./my-dist
```

Een front-end-app implementeren met een API

Gebruik de volgende stappen om een toepassing met API-eindpunten te implementeren.

Als uw front-endtoepassing een buildstap vereist, voert u deze uit swa build of raadpleegt u de build-instructies van uw toepassing.
Zorg ervoor dat de runtimeversie van de API-taal in het staticwebapp.config.json-bestand correct is ingesteld, bijvoorbeeld:
```
{
  "platform": {
    "apiRuntime": "node:16"
  }
}
```
Notitie

Als uw project het staticwebapp.config.json bestand niet heeft, voegt u er een toe onder de outputLocation map.

Uw app implementeren:

swa deploy ./my-dist --api-location ./api

Een Blazor-app implementeren

U kunt een Blazor-app implementeren met behulp van de volgende stappen.

Bouw uw Blazor-app in de releasemodus :

dotnet publish -c Release -o bin/publish

Voer vanuit de hoofdmap van uw project de opdracht Deploy uit:
```
swa deploy ./bin/publish/wwwroot --api-location ./Api
```

Implementeren met behulp van een configuratiebestand

Notitie

Het pad voor outputLocation moet ten opzichte van de appLocation.

Als u een swa-cli.config.json configuratiebestand in uw project gebruikt met één configuratievermelding, kunt u uw toepassing implementeren door de volgende stappen uit te voeren.

Ter referentie ziet een voorbeeld van één configuratie-vermelding eruit als het volgende codefragment.

{
  "configurations": {
    "my-app": {
      "appLocation": "./",
      "apiLocation": "api",
      "outputLocation": "frontend",
      "start": {
        "outputLocation": "frontend"
      },
      "deploy": {
        "outputLocation": "frontend"
      }
    }
  }
}

Als uw front-endtoepassing een buildstap vereist, voert u deze uit swa build of raadpleegt u de build-instructies van uw toepassing.
Implementeer uw app.

swa deploy

Als u meerdere configuratievermeldingen hebt, kunt u de vermeldings-id opgeven om op te geven welke moet worden gebruikt:

swa deploy my-otherapp

Opties

Hieronder vindt u opties die u kunt gebruiken met swa deploy:

-a, --app-location <path>: de map met de broncode van de front-endtoepassing (standaard: ".")
-i, --api-location <path>: de map met de broncode van de API-toepassing
-O, --output-location <path>: de map met de ingebouwde bron van de front-endtoepassing. Het pad is relatief tot --app-location (standaard: ".")
-w, --swa-config-location <swaConfigLocation>: de map waar het bestand staticwebapp.config.json zich bevindt
-d, --deployment-token <secret>: het geheime token dat wordt gebruikt voor verificatie met de Static Web Apps
-dr, --dry-run: een implementatieproces simuleren zonder het daadwerkelijk uit te voeren (standaard: false)
-pt, --print-token: het implementatietoken afdrukken (standaard: false)
--env [environment]: het type implementatieomgeving waar het project moet worden geïmplementeerd (standaard: "preview")
-S, --subscription-id <subscriptionId>: Azure-abonnements-id die door dit project wordt gebruikt (standaard: process.env.AZURE_SUBSCRIPTION_ID)
-R, --resource-group <resourceGroupName>: Azure-resourcegroep die door dit project wordt gebruikt
-T, --tenant-id <tenantId>: Azure-tenant-id (standaard: process.env.AZURE_TENANT_ID)
-C, --client-id <clientId>: Azure-client-id
-CS, --client-secret <clientSecret>: Azure-clientgeheim
-n, --app-name <appName>: Azure Static Web App-toepassingsnaam
-cc, --clear-credentials: permanente referenties wissen voordat u zich aanmeldt (standaard: false)
-u, --use-keychain: inschakelen met behulp van de systeemeigen sleutelhanger van het besturingssysteem voor permanente referenties (standaard: true)
-nu, --no-use-keychain: uitschakelen met behulp van de systeemeigen sleutelhanger van het besturingssysteem
-h, --help: Help weergeven voor opdracht

Gebruik

Implementeren met behulp van een implementatietoken.

swa deploy ./dist/ --api-location ./api/ --deployment-token <TOKEN>

Implementeer met behulp van een implementatietoken uit de omgevingsvariabelen.

SWA_CLI_DEPLOYMENT_TOKEN=123 swa deploy ./dist/ --api-location ./api/

Implementeren met behulp van swa-cli.config.json bestand

swa deploy
swa deploy myconfig

Druk het implementatietoken af.

swa deploy --print-token

Implementeren in een specifieke omgeving.

swa deploy --env production

Volgende stappen

Uw implementatie configureren

Delen via