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

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

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

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

Предпосылки

Активная учетная запись Azure: Если у вас нет учетной записи, вы можете создать учетную запись бесплатно.
Учетная запись GitHub: Если у вас нет учетной записи GitHub, вы можете создать бесплатную учетную запись GitHub.
Редактор шаблонов ARM: Для просмотра и редактирования шаблонов требуется редактор JSON. Visual Studio Code с расширением средств Azure Resource Manager хорошо подходит для редактирования шаблонов ARM. Инструкции по установке и настройке 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.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'))]"
                        ]
                    }
                ]
            }
        ]
    }

Создайте файл и назовите его 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`	Укажите токен GitHub PAT.

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

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

Для развертывания шаблона вам потребуется 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, который выполняет сборку и публикацию приложения.

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

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

Окно обзора

Щелкнув баннер с надписью щелкните здесь, чтобы проверить статус выполнения ваших GitHub Actions, вы перейдете к GitHub Actions, запущенным в вашем репозитории. После завершения задания развертывания можно перейти на веб-сайт с помощью созданного URL-адреса.
После завершения рабочего процесса GitHub Actions можно щелкнуть ссылку URL-адреса, чтобы открыть веб-сайт на новой вкладке.

Очистите ресурсы

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

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

Дальнейшие шаги

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-10-09