Delen via

Zelfstudie: Azure Static Web Apps publiceren met behulp van een ARM-sjabloon

  • Artikel

In dit artikel wordt gedemonstreert hoe u Azure Static Web Apps implementeert met behulp van een ARM-sjabloon (Azure Resource Manager).

In deze zelfstudie leert u het volgende:

  • Een ARM-sjabloon maken voor Azure Static Web Apps
  • De ARM-sjabloon implementeren om een Azure Static Web App-exemplaar te maken

Vereisten

Een persoonlijk toegangstoken van GitHub maken

Een van de parameters in de ARM-sjabloon is repositoryToken, waardoor het ARM-implementatieproces kan communiceren met de GitHub-opslagplaats met de broncode van de statische site.

  1. Selecteer in uw GitHub-accountprofiel (in de rechterbovenhoek) Instellingen.

  2. Selecteer Instellingen voor ontwikkelaars.

  3. Persoonlijke toegangstokens selecteren.

  4. Selecteer Nieuw token genereren.

  5. Geef een naam op voor dit token in het veld Naam , bijvoorbeeld myfirstswadeployment.

  6. Selecteer een vervaldatum voor het token. De standaardwaarde is 30 dagen.

  7. Geef de volgende bereiken op: opslagplaats, werkstroom, schrijven:pakketten

  8. Selecteer Het token genereren.

  9. Kopieer de tokenwaarde en plak deze in een teksteditor voor later gebruik.

Belangrijk

Zorg ervoor dat u dit token kopieert en ergens veilig opslaat. U kunt dit token opslaan in Azure Key Vault en openen in uw ARM-sjabloon.

Een GitHub-opslagplaats maken

In dit artikel wordt gebruikgemaakt van een GitHub-opslagplaatssjabloon, zodat u eenvoudig aan de slag kunt gaan. De sjabloon biedt een starters-app die wordt gebruikt om een implementatie met Azure Static Web Apps uit te voeren.

  1. Ga naar de volgende locatie om een nieuwe opslagplaats te maken:

    1. https://github.com/staticwebdev/vanilla-basic/generate

  2. Geef uw opslagplaats de naam myfirstswadeployment

    Notitie

    Voor Azure Static Web Apps is minstens één HTML-bestand vereist om een web-app te maken. De opslagplaats die u in deze stap maakt, bevat één index.html-bestand.

  3. Klik op Opslagplaats maken.

    screenshot of the Create repository button.

De ARM-sjabloon maken

Nu aan de vereisten is voldaan, is de volgende stap het definiëren van het ARM-implementatiesjabloonbestand.

  1. Maak een nieuwe map voor het opslaan van de ARM-sjablonen.

  2. Maak een nieuw bestand en geef het de naam azuredeploy.json.

  3. Plak het volgende ARM-sjabloonfragment in azuredeploy.json.

        {
        "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
        "contentVersion": "1.0.0.0",
        "parameters": {
            "name": {
                "type": "string"
            },
            "location": {
                "type": "string"
            },
            "sku": {
                "type": "string"
            },
            "skucode": {
                "type": "string"
            },
            "repositoryUrl": {
                "type": "string"
            },
            "branch": {
                "type": "string"
            },
            "repositoryToken": {
                "type": "securestring"
            },
            "appLocation": {
                "type": "string"
            },
            "apiLocation": {
                "type": "string"
            },
            "appArtifactLocation": {
                "type": "string"
            },
            "resourceTags": {
                "type": "object"
            },
            "appSettings": {
                "type": "object"
            }
        },
        "resources": [
            {
                "apiVersion": "2021-01-15",
                "name": "[parameters('name')]",
                "type": "Microsoft.Web/staticSites",
                "location": "[parameters('location')]",
                "tags": "[parameters('resourceTags')]",
                "properties": {
                    "repositoryUrl": "[parameters('repositoryUrl')]",
                    "branch": "[parameters('branch')]",
                    "repositoryToken": "[parameters('repositoryToken')]",
                    "buildProperties": {
                        "appLocation": "[parameters('appLocation')]",
                        "apiLocation": "[parameters('apiLocation')]",
                        "appArtifactLocation": "[parameters('appArtifactLocation')]"
                    }
                },
                "sku": {
                    "Tier": "[parameters('sku')]",
                    "Name": "[parameters('skuCode')]"
                },
                "resources":[
                    {
                        "apiVersion": "2021-01-15",
                        "name": "appsettings",
                        "type": "config",
                        "location": "[parameters('location')]",
                        "properties": "[parameters('appSettings')]",
                        "dependsOn": [
                            "[resourceId('Microsoft.Web/staticSites', parameters('name'))]"
                        ]
                    }
                ]
            }
        ]
    }

  4. Maak een nieuw bestand en geef het de naam azuredeploy.parameters.json.

  5. Plak het volgende ARM-sjabloonfragment in azuredeploy.parameters.json.

        {
        "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
        "contentVersion": "1.0.0.0",
        "parameters": {
            "name": {
                "value": "myfirstswadeployment"
            },
            "location": { 
                "value": "Central US"
            },   
            "sku": {
                "value": "Free"
            },
            "skucode": {
                "value": "Free"
            },
            "repositoryUrl": {
                "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>"
            },
            "branch": {
                "value": "main"
            },
            "repositoryToken": {
                "value": "<YOUR-GITHUB-PAT>" 
            },
            "appLocation": {
                "value": "/"
            },
            "apiLocation": {
                "value": ""
            },
            "appArtifactLocation": {
                "value": "src"
            },
            "resourceTags": {
                "value": {
                    "Environment": "Development",
                    "Project": "Testing SWA with ARM",
                    "ApplicationName": "myfirstswadeployment"
                }
            },
            "appSettings": {
                "value": {
                    "MY_APP_SETTING1": "value 1",
                    "MY_APP_SETTING2": "value 2"
                }
            }
        }
    }

  6. Werk de volgende parameters bij.

    Parameter Verwachte waarde
    repositoryUrl Geef de URL op naar de GitHub-opslagplaats van Static Web Apps.
    repositoryToken Geef het GitHub PAT-token op.

  7. Sla de updates op voordat u de implementatie uitvoert in de volgende stap.

De implementatie uitvoeren

U hebt Azure CLI of Azure PowerShell nodig om de sjabloon te implementeren.

Aanmelden bij Azure

Als u een sjabloon wilt implementeren, meldt u zich aan bij de Azure CLI of Azure PowerShell.

az login

Als u meerdere Azure-abonnementen hebt, selecteert u het abonnement dat u wilt gebruiken. Vervang <SUBSCRIPTION-ID> door uw abonnementsgegevens:

az account set --subscription <SUBSCRIPTION-ID>

Een brongroep maken

Wanneer u een sjabloon implementeert, geeft u een resourcegroep op die gerelateerde resources bevat. Voordat u de opdracht voor de implementatie uitvoert, maakt u de resourcegroep met behulp van Azure CLI of Azure PowerShell.

Notitie

De CLI-voorbeelden in dit artikel zijn geschreven voor de Bash-shell.

resourceGroupName="myfirstswadeployRG"

az group create \
  --name $resourceGroupName \
  --location "Central US"

Sjabloon implementeren

Gebruik een van deze implementatieopties om de sjabloon te implementeren.


az deployment group create \
  --name DeployLocalTemplate \
  --resource-group $resourceGroupName \
  --template-file <PATH-TO-AZUREDEPLOY.JSON> \
  --parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
  --verbose

Zie Resources implementeren met ARM-sjablonen en Azure CLI voor meer informatie over het implementeren van sjablonen met de Azure CLI.

De website weergeven

Het implementeren van een statische app heeft twee aspecten. De eerste is het inrichten van de onderliggende Azure-resources waaruit uw app is opgebouwd. De tweede is een werkstroom voor GitHub-acties die uw toepassing bouwt en publiceert.

Voordat u naar de nieuwe statische site kunt navigeren, moet de uitvoering van de implementatiebuild eerst zijn voltooid.

In het overzichtsvenster van Static Web Apps wordt een reeks koppelingen weergegeven die u helpen te werken met uw web-app.

Overview window

  1. Als u op de banner klikt waarin staat Klik hier om de status van de uitvoering van uw GitHub-acties te controleren wordt u naar de GitHub-acties geleid die worden uitgevoerd in uw opslagplaats. Zodra u hebt gecontroleerd of de implementatietaak is voltooid, kunt u naar de website navigeren via de gegenereerde URL.

  2. Zodra de werkstroom voor GitHub-acties is voltooid, kunt u op de URL-koppeling klikken om de website te openen op een nieuw tabblad.

Resources opschonen

Schoon de geïmplementeerd resources op door de resourcegroep te verwijderen.

  1. Selecteer Resourcegroep in het linkermenu van Azure Portal.
  2. Voer de naam van de resourcegroep in het veld Filter by name in.
  3. Selecteer de naam van de resourcegroep.
  4. Selecteer Resourcegroep verwijderen in het bovenste menu.

Volgende stappen

Uw statische web-app configureren