Учебник: публикация статических веб-приложений Azure с помощью шаблона ARM

Статья
05/11/2023

В этой статье демонстрируется процесс развертывания Статических веб-приложений Azure с помощью шаблона Azure Resource Manager (ARM).

Из этого руководства вы узнаете, как:

Создание шаблона ARM для статических веб-приложений Azure
Развертывание шаблона ARM для создания экземпляра статического веб-приложения Azure

Необходимые компоненты

Действующая учетная запись Azure. Если ее нет, можно создать учетную запись бесплатно.
Учетная запись GitHub. Если у вас ее нет, вы можете создать ее бесплатно.
Редактор для шаблонов ARM. Для просмотра и редактирования шаблонов требуется редактор JSON. Для редактирования шаблонов ARM хорошо подходит Visual Studio Code с расширением Azure Resource Manager Tools. Инструкции по установке и настройке Visual Studio Code см. в кратком руководстве по созданию шаблонов ARM с помощью Visual Studio Code.
Azure CLI или Azure PowerShell. Для развертывания шаблонов ARM требуется оболочка командной строки. Ознакомьтесь с инструкциями по установке:

Создание личного маркера доступа GitHub

Одним из параметров в шаблоне ARM является repositoryToken, который позволяет процессу развертывания ARM взаимодействовать с репозиторием GitHub, содержащим исходный код статического сайта.

В профиле учетной записи GitHub (в верхнем правом углу) выберите Параметры.
Выберите Параметры разработчика.
Выберите Личные маркеры доступа.
Выберите Создать новый маркер.
Укажите имя этого маркера в поле "Имя ", например myfirstswadeployment.
Выберите срок действия маркера, значение по умолчанию — 30 дней.
Укажите следующие области: репозиторий, рабочий процесс, запись:пакеты.
Щелкните Создать маркер.
Скопируйте значение маркера и вставьте его в текстовый редактор (оно понадобится позже).

Важно!

Обязательно скопируйте этот маркер и сохраните его в безопасном месте. Маркер можно сохранить в Azure Key Vault для доступа к нему в шаблоне ARM.

Создание репозитория GitHub

В этой статье для простоты используются шаблон из репозитория GitHub. В шаблоне содержится начальное приложение, используемое для развертывания с помощью Статических веб-приложений Azure.

Перейдите к следующему расположению, чтобы создать новый репозиторий:
1. https://github.com/staticwebdev/vanilla-basic/generate
Назовите репозиторий myfirstswadeployment.

Примечание.

Для создания веб-приложения Статическим веб-приложениям Azure требуется по крайней мере один HTML-файл. Репозиторий, созданный на этом шаге, включает один файл index.html.
Щелкните Create repository (Создать репозиторий).

Создание шаблона ARM

После выполнения необходимых условий определите файл шаблона развертывания ARM.

Создайте новую папку для хранения шаблонов ARM.
Создайте файл с именем azuredeploy.json.

Вставьте следующий фрагмент шаблона ARM в файл azuredeploy.js.

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

Создайте файл с именем azuredeploy.parameters.json.

Вставьте следующий фрагмент шаблона ARM в файл 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"
                }
            }
        }
    }

Обновите указанные ниже параметры.

Параметр	Ожидаемое значение
`repositoryUrl`	Укажите URL-адрес репозитория GitHub Статических веб-приложений.
`repositoryToken`	Укажите маркер PAT для GitHub.

Сохраните обновления перед запуском развертывания на следующем шаге.

Запуск развертывания

Для развертывания шаблона используйте Azure CLI либо Azure PowerShell.

Для развертывания шаблона войдите в Azure CLI или Azure PowerShell.

Azure CLI
PowerShell

az login

Connect-AzAccount

Если у вас несколько подписок Azure, выберите ту, которую хотите использовать. Замените <SUBSCRIPTION-ID> данными своей подписки.

Azure CLI
PowerShell

az account set --subscription <SUBSCRIPTION-ID>

Set-AzContext <SUBSCRIPTION-ID>

Создание или изменение группы ресурсов

При развертывании шаблона необходимо указать группу ресурсов, которая будет содержать развернутые ресурсы. Перед выполнением команды развертывания создайте группу ресурсов с помощью Azure CLI или Azure PowerShell.

Примечание.

Примеры интерфейса командной строки в этой статье написаны для оболочки bash.

Azure CLI
PowerShell

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

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

Развертывание шаблона

Используйте для развертывания шаблона эти варианты развертывания.

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

Дополнительные сведения о развертывании шаблона с помощью Azure CLI см. в статье Развертывание ресурсов с использованием шаблонов ARM и 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

Дополнительные сведения о развертывании шаблона с помощью Azure PowerShell см. в статье Развертывание ресурсов с использованием шаблонов ARM и Azure PowerShell.

Просмотр веб-сайта

При развертывании статического приложения следует учитывать два фактора. Первый подготавливает базовые ресурсы Azure, из которых состоит приложение. Второй — это рабочий процесс GitHub Actions, который выполняет сборку и публикацию приложения.

Прежде чем можно будет переходить к новому статическому сайту, сначала необходимо завершить сборку развертывания.

В окне обзора службы "Статические веб-приложения" отображается ряд ссылок, которые помогут вам взаимодействовать с веб-приложением.

Overview window

Если щелкнуть баннер с текстом Click here to check the status of your GitHub Actions runs (Щелкните здесь, чтобы проверить состояние выполняемых действий GitHub), отобразятся действия GitHub, выполняемым для вашего репозитория. Убедившись, что задание развертывания завершено, можно переходить к веб-сайту по созданному URL-адресу.
Когда рабочий процесс GitHub Actions завершится, щелкните ссылку на URL-адрес , чтобы открыть веб-сайт на новой вкладке.

Очистка ресурсов

Очистите развернутые ресурсы, удалив группу ресурсов.

На портале Azure в меню слева выберите Группа ресурсов.
В поле Фильтровать по имени введите имя группы ресурсов.
Выберите имя группы ресурсов.
В главном меню выберите Удалить группу ресурсов.

Следующие шаги

Настройка статического веб-приложения