你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：使用 ARM 模板发布 Azure 静态 Web 应用

2025-10-09

本文演示如何使用 Azure 资源管理器模板（ARM 模板）部署 Azure 静态 Web 应用。

在本教程中，学习：

为 Azure 静态 Web 应用创建 ARM 模板
部署 ARM 模板以创建 Azure 静态 Web 应用实例

先决条件

活跃的 Azure 帐户： 如果没有，您可以免费创建一个。
GitHub 帐户： 如果没有帐户，可以免费创建 GitHub 帐户
ARM 模板的编辑器： 查看和编辑模板需要 JSON 编辑器。使用 Azure 资源管理器工具扩展的 Visual Studio Code 非常适合用于编辑 ARM 模板。有关如何安装和配置 Visual Studio Code 的说明，请参阅快速入门：使用 Visual Studio Code 创建 ARM 模板。
Azure CLI 或 Azure PowerShell：部署 ARM 模板需要命令行工具。有关安装说明，请参阅：

创建 GitHub 个人访问令牌

ARM 模板 repositoryToken中的其中一个参数允许 ARM 部署过程与保存静态站点源代码的 GitHub 存储库进行交互。

在 GitHub 帐户配置文件（右上角）中选择“设置”。
选择 “开发人员设置”。
选择 “个人访问令牌”。
选择“ 生成新令牌”。
在 “名称” 字段中提供此令牌的名称，例如 myfirstswadeployment。
选择令牌的过期时间，默认值为 30 天。
指定以下范围： 存储库、工作流、write：packages
选择“生成令牌”。
复制令牌值并将其粘贴到文本编辑器中供以后使用。

重要

请确保复制此令牌并将其存储在安全的地方。请考虑将此令牌存储在 Azure Key Vault 中，并将其访问到 ARM 模板中。

创建 GitHub 存储库

本文使用 GitHub 模板存储库，使你能够轻松入门。该模板包含一个初学者应用，用于使用 Azure 静态 Web 应用进行部署。

转到以下位置创建新的存储库：
1. https://github.com/staticwebdev/vanilla-basic/generate
将存储库 命名为 myfirstswadeployment

注释

Azure 静态 Web 应用至少需要一个 HTML 文件才能创建 Web 应用。在此步骤中创建的存储库包括单个 index.html 文件。
选择“创建存储库”。

创建 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 提供静态 Web 应用 GitHub 存储库的 URL。

repositoryToken 提供 GitHub PAT 令牌。
在下一步中运行部署之前保存更新。

参数	预期值
`repositoryUrl`	提供静态 Web 应用 GitHub 存储库的 URL。
`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 创建该资源组。

注释

本文中的 CLI 示例是为 Bash shell 编写的。

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 工作流。

在导航到新静态站点之前，必须先完成部署生成的运行。

静态 Web 应用概述窗口显示一系列链接，可帮助你与 Web 应用交互。

“概述”窗口

点击上面写着单击此处检查 GitHub Actions 运行的状态的横幅，会转到与您的存储库对应正在运行的 GitHub Actions。验证部署作业是否完成后，即可通过生成的 URL 导航到网站。
GitHub Actions 工作流完成后，可以单击 URL 链接，在新选项卡中打开网站。

清理资源

通过删除资源组来清理你部署的资源。

在 Azure 门户中，从左侧菜单中选择 资源组 。
在 “按名称筛选 ”字段中输入资源组名称。
选择资源组名称。
在顶部菜单中选择“删除资源组”。

后续步骤

配置静态 Web 应用

反馈

此页面是否有帮助？