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

  • Artikel
  • 5 minuten om te lezen

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

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 , waarmee het ARM-implementatieproces kan communiceren met de GitHub-repo met de broncode van de repositoryToken statische site.

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

  2. Selecteer Developer Instellingen.

  3. Selecteer Persoonlijke toegangstokens.

  4. Selecteer Generate New Token.

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

  6. Geef de volgende scopes op: repo, workflow, write:packages

  7. Selecteer Token genereren.

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

Belangrijk

Zorg ervoor dat u dit token kopieert en op een veilige plaats opgeslagen. U kunt dit token opslaan in Azure Key Vault openen in uw ARM-sjabloon.

Een GitHub 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. Noem uw opslagplaats 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. Selecteer Opslagplaats maken van sjabloon.

    Opslagplaats maken van sjabloon

De ARM-sjabloon maken

Nu aan de vereisten is toegevoegd, bestaat de volgende stap uit het definiëren van het arm-implementatiesjabloonbestand.

  1. Maak een nieuwe map voor de ARM-sjablonen.

  2. Maak een nieuw bestand en noem hetazuredeploy.jsop.

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

        {
        "$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 noem hetazuredeploy.parameters.jsop.

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

        {
        "$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 Static Web Apps GitHub opslagplaats.
    repositoryToken Geef het GitHub PAT-token op.

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

De implementatie uitvoeren

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

Aanmelden bij Azure

Als u een sjabloon wilt implementeren, moet u zich aanmelden 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-OR-SUBSCRIPTION-NAME> door uw abonnementsgegevens:

az account set --subscription <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

Een resourcegroep 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 behulp van de Azure CLI.

De website weergeven

Het implementeren van een statische app heeft twee aspecten. Het eerste aspect is het inrichten van de onderliggende Azure-resources waaruit de app bestaat. Het tweede aspect is een werkstroom voor GitHub-acties waarmee de toepassing wordt gebouwd en gepubliceerd.

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.

Overzichtsvenster

  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