Oktatóanyag: Azure Static Web Apps közzététele ARM-sablonnal

  • Cikk

Ez a cikk bemutatja, hogyan helyezheti üzembe az Azure Static Web Appst egy Azure Resource Manager-sablon (ARM-sablon) használatával.

Eben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • ARM-sablon létrehozása az Azure Static Web Appshez
  • Az ARM-sablon üzembe helyezése Azure Static Web App-példány létrehozásához

Előfeltételek

Személyes hozzáférési jogkivonat létrehozása a GitHubban

Az ARM-sablon egyik paramétere, repositoryTokenamely lehetővé teszi, hogy az ARM üzembe helyezési folyamata a statikus hely forráskódját tartalmazó GitHub-adattárral működjön együtt.

  1. A GitHub-fiókprofilban (a jobb felső sarokban) válassza a Gépház.

  2. Válassza a Fejlesztői Gépház lehetőséget.

  3. Válassza ki a személyes hozzáférési jogkivonatokat.

  4. Válassza az Új jogkivonat létrehozása lehetőséget.

  5. Adja meg a jogkivonat nevét a Név mezőben, például myfirstswadeployment.

  6. Válassza ki a jogkivonat lejáratát, az alapértelmezett érték 30 nap.

  7. Adja meg a következő hatóköröket: adattár, munkafolyamat, írás:csomagok

  8. Válassza a Jogkivonat létrehozása lehetőséget.

  9. Másolja ki a jogkivonat értékét, és illessze be egy szövegszerkesztőbe későbbi használatra.

Fontos

Győződjön meg arról, hogy másolja ezt a jogkivonatot, és tárolja biztonságos helyen. Érdemes lehet ezt a jogkivonatot az Azure Key Vaultban tárolni, és az ARM-sablonban elérni.

GitHub-adattár létrehozása

Ez a cikk egy GitHub-sablontárházat használ, hogy megkönnyítse az első lépéseket. A sablon az Azure Static Web Apps használatával történő üzembe helyezéshez használt kezdőalkalmazást tartalmaz.

  1. Új adattár létrehozásához lépjen a következő helyre:

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

  2. Az adattár neve myfirstswadeployment

    Megjegyzés:

    Az Azure Static Web Apps használatához legalább egy HTML-fájl szükséges egy webalkalmazás létrehozásához. Az ebben a lépésben létrehozott adattár egyetlen index.html fájlt tartalmaz.

  3. Válassza a Create repository (Adattár létrehozása) gombot.

    screenshot of the Create repository button.

Az ARM-sablon létrehozása

Az előfeltételek teljesülése esetén a következő lépés az ARM üzembehelyezési sablonfájljának meghatározása.

  1. Hozzon létre egy új mappát az ARM-sablonok tárolásához.

  2. Hozzon létre egy új fájlt, és nevezze el azuredeploy.json néven.

  3. Illessze be az alábbi ARM-sablonrészletet az azuredeploy.json fájlba.

        {
        "$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. Hozzon létre egy új fájlt, és nevezze el azuredeploy.parameters.json néven.

  5. Illessze be a következő ARM-sablonrészletet az azuredeploy.parameters.json fájlba.

        {
        "$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. Frissítse a következő paramétereket.

    Parameter Várt érték
    repositoryUrl Adja meg a Static Web Apps GitHub-adattár URL-címét.
    repositoryToken Adja meg a GitHub PAT-jogkivonatot.

  7. Mentse a frissítéseket, mielőtt futtatja az üzembe helyezést a következő lépésben.

Az üzembe helyezés futtatása

A sablon üzembe helyezéséhez az Azure CLI vagy az Azure PowerShell szükséges.

Bejelentkezés az Azure-ba

Sablon üzembe helyezéséhez jelentkezzen be az Azure CLI-be vagy az Azure PowerShellbe.

az login

Ha több Azure-előfizetéssel rendelkezik, válassza ki a használni kívánt előfizetést. Cserélje le <SUBSCRIPTION-ID> az előfizetés adatait:

az account set --subscription <SUBSCRIPTION-ID>

Erőforráscsoport létrehozása

Sablon üzembe helyezésekor meg kell adnia egy erőforráscsoportot, amely kapcsolódó erőforrásokat tartalmaz. Az üzembe helyezési parancs futtatása előtt hozza létre az erőforráscsoportot az Azure CLI-vel vagy az Azure PowerShell-lel.

Megjegyzés:

A cikkben szereplő CLI-példák a Bash-rendszerhéjhoz vannak megírva.

resourceGroupName="myfirstswadeployRG"

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

Sablon üzembe helyezése

Használja az alábbi üzembehelyezési lehetőségek egyikét a sablon üzembe helyezéséhez.


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

Ha többet szeretne megtudni a sablonok Azure CLI-vel történő üzembe helyezéséről, tekintse meg az erőforrások ARM-sablonokkal és az Azure CLI-vel való üzembe helyezését ismertető témakört.

A webhely megtekintése

A statikus alkalmazások üzembe helyezésének két aspektusa van. Az első azokat a mögöttes Azure-erőforrásokat építi ki, amelyekből az alkalmazás áll. A második egy GitHub Actions-munkafolyamat, amely létrehozza és közzéteszi az alkalmazást.

Mielőtt az új statikus helyre navigálna, az üzembe helyezési buildnek először futnia kell.

A Static Web Apps áttekintő ablaka hivatkozássorozatot jelenít meg, amelyek segítenek a webalkalmazással való interakcióban.

Overview window

  1. A megjelenő szalagcímre kattintva ide kattintva ellenőrizheti a GitHub Actions-futtatások állapotát, és az adattáron futó GitHub-műveletekhez irányítja. Ha meggyőződik arról, hogy az üzembe helyezési feladat befejeződött, a létrehozott URL-címen keresztül navigálhat a webhelyére.

  2. A GitHub Actions munkafolyamatának befejezése után az URL-hivatkozásra kattintva megnyithatja a webhelyet az új lapon.

Clean up resources

Törölje az üzembe helyezett erőforrásokat az erőforráscsoport törlésével.

  1. Az Azure Portalon válassza az Erőforráscsoport lehetőséget a bal oldali menüben.
  2. A Szűrés név alapján mezőben adja meg az erőforráscsoport nevét.
  3. Válassza ki az erőforráscsoport nevét.
  4. A felső menüben válassza az Erőforráscsoport törlése lehetőséget.

Következő lépések

A statikus webalkalmazás konfigurálása