Skip to content

Files

Latest commit

craigshoemakercraigshoemaker
Move files in vanilla* repos to src folder
Aug 6, 2021
9116f64 · Aug 6, 2021

History

History
347 lines (266 loc) · 11.8 KB

publish-azure-resource-manager.md

File metadata and controls

347 lines (266 loc) · 11.8 KB
title description services author ms.service ms.topic ms.date ms.author
Tutorial: Publish Azure Static Web Apps using an ARM template
Create and deploy an ARM Template for Static Web Apps
static-web-apps
petender
static-web-apps
tutorial
07/13/2021
petender

Tutorial: Publish Azure Static Web Apps using an ARM Template

This article demonstrates how to deploy Azure Static Web Apps using an Azure Resource Manager template (ARM template).

In this tutorial, you learn to:

[!div class="checklist"]

  • Create an ARM Template for Azure Static Web Apps
  • Deploy the ARM Template to create an Azure Static Web App instance

Prerequisites

Create a GitHub personal access token

One of the parameters in the ARM template is repositoryToken, which allows the ARM deployment process to interact with the GitHub repo holding the static site source code.

  1. From your GitHub Account Profile (in the upper right corner), select Settings.

  2. Select Developer Settings.

  3. Select Personal Access Tokens.

  4. Select Generate New Token.

  5. Provide a name for this token in the Note field, for example myfirstswadeployment.

  6. Specify the following scopes: repo, workflow, write:packages

  7. Select Generate token.

  8. Copy the token value and paste it into a text editor for later use.

Important

Make sure you copy this token and store it somewhere safe. Consider storing this token in Azure Key Vault and access it in your ARM Template.

Create a GitHub repo

This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app used to deploy using Azure Static Web Apps.

  1. Navigate to the following location to create a new repository:

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

  2. Name your repository myfirstswadeployment

    [!NOTE] Azure Static Web Apps requires at least one HTML file to create a web app. The repository you create in this step includes a single index.html file.

  3. Select Create repository from template.

    :::image type="content" source="./media/getting-started/create-template.png" alt-text="Create repository from template":::

Create the ARM Template

With the prerequisites in place, the next step is to define the ARM deployment template file.

  1. Create a new folder to hold the ARM Templates.

  2. Create a new file and name it azuredeploy.json.

  3. Paste the following ARM template snippet into 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'))]"
                        ]
                    }
                ]
            }
        ]
    }

  4. Create a new file and name it azuredeploy.parameters.json.

  5. Paste the following ARM template snippet into 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"
                }
            }
        }
    }

  6. Update the following parameters.

    Parameter Expected value
    repositoryUrl Provide the URL to your Static Web Apps GitHub repository.
    repositoryToken Provide the GitHub PAT token.

  7. Save the updates before running the deployment in the next step.

Running the deployment

You need either Azure CLI or Azure PowerShell to deploy the template.

Sign in to Azure

To deploy a template, sign in to either the Azure CLI or Azure PowerShell.

Azure CLI

az login

PowerShell

Connect-AzAccount

If you have multiple Azure subscriptions, select the subscription you want to use. Replace <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME> with your subscription information:

Azure CLI

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

PowerShell

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

Create a resource group

When you deploy a template, you specify a resource group that contains related resources. Before running the deployment command, create the resource group with either Azure CLI or Azure PowerShell.

Note

The CLI examples in this article are written for the Bash shell.

Azure CLI

resourceGroupName="myfirstswadeployRG"

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

PowerShell

$resourceGroupName = "myfirstswadeployRG"

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

Deploy template

Use one of these deployment options to deploy the template.

Azure CLI


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

To learn more about deploying templates using the Azure CLI, see Deploy resources with ARM templates and Azure CLI.

PowerShell

$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

To learn more about deploying templates using Azure PowerShell, see Deploy resources with ARM templates and Azure PowerShell.

[!INCLUDE view website]

Clean up resources

Clean up the resources you deployed by deleting the resource group.

  1. From the Azure portal, select Resource group from the left menu.
  2. Enter the resource group name in the Filter by name field.
  3. Select the resource group name.
  4. Select Delete resource group from the top menu.

Next steps

[!div class="nextstepaction"] Configure your static web app