Kurz: Publikování Azure Static Web Apps pomocí šablony ARM

Článek
08/29/2021
5 min ke čtení

Tento článek ukazuje, jak nasadit Azure Static Web Apps pomocí Azure Resource Manager šablony (šablony ARM).

V tomto kurzu se naučíte:

Vytvoření šablony ARM pro Azure Static Web Apps
Nasazení šablony ARM pro vytvoření instance statické webové aplikace Azure

Požadavky

Aktivní účet Azure: Pokud ho nemáte, můžete si zdarma vytvořit účet.
GitHub účet: Pokud ho nemáte, můžete si zdarma vytvořit GitHub účet.
Editor pro šablony ARM: Kontrola a úprava šablon vyžaduje editor JSON. Visual Studio Code s rozšířením Azure Resource Manager Tools je vhodné pro úpravy šablon ARM. Pokyny k instalaci a konfiguraci Visual Studio Code najdete v tématu Rychlý Visual Studio Code ARM.
Azure CLI nebo Azure PowerShell: Nasazení šablon ARM vyžaduje nástroj příkazového řádku. Pokyny k instalaci najdete v těchto pokynech:

Vytvoření tokenu PAT GitHubu

Jedním z parametrů v šabloně ARM je , který umožňuje procesu nasazení ARM pracovat s GitHub, které obsahuje zdrojový kód repositoryToken statické lokality.

V GitHub profilu účtu (v pravém horním rohu) vyberte Nastavení.
Vyberte Vývojářský Nastavení.
Vyberte Osobní přístupové tokeny.
Vyberte Generate New Token (Vygenerovat nový token).
Do pole Poznámka zadejte název tohoto tokenu, například myfirstswadeployment.
Zadejte následující obory: repo, workflow, write:packages.
Vyberte Generate token (Vygenerovat token).
Zkopírujte hodnotu tokenu a vložte ji do textového editoru pro pozdější použití.

Důležité

Nezapomeňte tento token zkopírovat a uložit na bezpečném místě. Zvažte uložení tohoto tokenu v Azure Key Vault a přistupovat k tomuto tokenu v šabloně ARM.

Vytvoření GitHub zařízení

Tento článek používá GitHub šablony, abyste snadno začali. Šablona obsahuje úvodní aplikaci, která se používá k nasazení pomocí Azure Static Web Apps.

Přejděte do následujícího umístění a vytvořte nové úložiště:
1. https://github.com/staticwebdev/vanilla-basic/generate
Zadejte název úložiště myfirstswadeployment.

Poznámka

Azure Static Web Apps vytvoření webové aplikace vyžaduje alespoň jeden soubor HTML. Úložiště, které vytvoříte v tomto kroku, obsahuje jeden souborindex.html.
Vyberte možnost Create repository from template (Vytvořit úložiště ze šablony).

Vytvoření šablony ARM

Po splnění požadavků je dalším krokem definování souboru šablony nasazení ARM.

Vytvořte novou složku pro šablony ARM.
Vytvořte nový soubor a pojmnte hoazuredeploy.jsna .

Následující fragment šablony ARM vložte do azuredeploy.jsna .

    {
        "$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'))]"
                        ]
                    }
                ]
            }
        ]
    }

Vytvořte nový soubor a pojmnte hoazuredeploy.parameters.jsna .

Následující fragment šablony ARM vložte do azuredeploy.parameters.jsna .

    {
        "$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"
                }
            }
        }
    }

Aktualizujte následující parametry.

Parametr Očekávaná hodnota

repositoryUrl Zadejte adresu URL vašeho Static Web Apps GitHub úložiště.

repositoryToken Zadejte token GITHUB PAT.
Uložte aktualizace před spuštěním nasazení v dalším kroku.

Parametr	Očekávaná hodnota
`repositoryUrl`	Zadejte adresu URL vašeho Static Web Apps GitHub úložiště.
`repositoryToken`	Zadejte token GITHUB PAT.

Spuštění nasazení

K nasazení šablony Azure PowerShell Azure CLI nebo Azure CLI.

Pokud chcete nasadit šablonu, přihlaste se k Azure CLI nebo Azure PowerShell.

Azure CLI
PowerShell

az login

Connect-AzAccount

Pokud máte více předplatných Azure, vyberte předplatné, které chcete použít. Nahraďte <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME> informacemi o vašem předplatném:

Azure CLI
PowerShell

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

Set-AzContext <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

Vytvoření skupiny prostředků

Při nasazování šablony zadáte skupinu prostředků, která obsahuje související prostředky. Před spuštěním příkazu k nasazení vytvořte skupinu prostředků. Použijte k tomu Azure CLI nebo Azure PowerShell.

Poznámka

Příklady rozhraní příkazového řádku v tomto článku jsou napsané pro prostředí Bash.

Azure CLI
PowerShell

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -Name $resourceGroupName `
  -Location "Central US"

Nasazení šablony

K nasazení šablony použijte jednu z těchto možností nasazení.

Azure CLI
PowerShell


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

Další informace o nasazování šablon pomocí Azure CLI najdete v tématu Nasazení prostředků pomocí šablon ARM a Azure CLI.

$templateFile = Read-Host -Prompt "Enter the template file path and file name"
$templateparameterFile = Read-Host -Prompt "Enter the template parameter file path and file name"

New-AzResourceGroupDeployment `
  -Name DeployLocalTemplate `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile $templateFile `
  -TemplateParameterFile $templateparameterfile `
  -verbose

Další informace o nasazování šablon pomocí Azure PowerShell najdete v tématu Nasazení prostředků pomocí šablon ARM a Azure PowerShell.

Zobrazit web

Existují dva aspekty nasazení statické aplikace. Při prvním se zřídí základní prostředky Azure, které tvoří vaši aplikaci. Druhým je právě pracovní postup GitHub Actions, který vytvoří a publikuje vaši aplikaci.

Předtím, než budete moci přejít na novou statickou lokalitu, musí být sestavení nasazení nejprve dokončeno.

V okně Přehled statického Web Apps se zobrazuje řada odkazů, které vám pomůžou s webovou aplikací pracovat.

Okno s přehledem

Kliknutím na banner, který říkáte, klikněte sem, abyste zkontrolovali stav svých akcí GitHubu , které se budou spouštět na základě vašeho úložiště. Jakmile ověříte, že je úloha nasazení dokončená, můžete přejít na web prostřednictvím vygenerované adresy URL.
Po dokončení pracovního postupu akcí GitHubu můžete kliknutím na odkaz na adresu URL otevřít web na nové kartě.

Vyčištění prostředků

Odstraněním skupiny prostředků vyčistěte prostředky, které jste nasadili.

V Azure Portal nabídce vyberte Skupina prostředků.
Do pole Filtrovat podle názvu zadejte název skupiny prostředků.
Vyberte název skupiny prostředků.
V horní nabídce vyberte Odstranit skupinu prostředků.

Další kroky

Konfigurace statické webové aplikace