DEV Community

Cover image for Web Site Deployment with ARM Templates and Azure CLI.
Celestina Odili
Celestina Odili

Posted on • Edited on

Web Site Deployment with ARM Templates and Azure CLI.

#armtemplates #azurecli #cloudcomputing #webdeployment

Table of Contents
Introduction
Step 1: Prerequisite
Step 2: Push your website to remote repository (GitHub)
Step 3: Sign in to Azure
Step 4: Prepare your ARM template files
Step 5: Deploy the ARM Template
Step 6: Host the Website to the App Service
Step 7: Browse the Deployed Website
Step 8: Clean Up Resources (Optional)

Introduction

Using Azure Resource Manager (ARM) templates and Azure CLI (Command Line Interface) for deploying resources in Azure offers several benefits:

Benefits of Using ARM Templates

  1. Infrastructure as Code (IaC)

    • ARM templates allow you to define your entire infrastructure in a declarative JSON format, enabling you to automate deployment and configuration of resources.
    • Ensures consistent deployments, reducing human errors compared to manual configuration.

  2. Repeatability

    • Templates can be reused to deploy the same resources in different environments (e.g., dev, test, prod), ensuring consistency across all environments.

  3. Scalability and Orchestration

    • ARM templates can deploy complex workloads, including dependencies between resources, making them ideal for orchestrating multi-tier deployments.

  4. Version Control

    • Since ARM templates are written in JSON, they can be versioned, tracked, and audited in source control systems like Git, allowing for change management and rollback.

  5. Parameterization

    • ARM templates support parameters, enabling dynamic input like resource names, sizes, and locations, which allows flexibility without needing multiple templates.

  6. Dependency Management

    • You can define dependencies between resources in an ARM template, ensuring that resources are deployed in the correct order.

  7. Built-in Validation

    • ARM templates allow you to validate deployments before applying them, ensuring that your configuration is correct and complete.

  8. Cost Estimation

    • With ARM templates, you can estimate the cost of the resources being deployed, helping you to plan your budget and optimize resource usage.

Benefits of Using Azure CLI

  1. Simplicity and Speed

    • Azure CLI offers a command-line interface that’s easy to learn and quick to execute, making it ideal for developers and engineers comfortable with scripting.

  2. Automation

    • Azure CLI can be used to automate deployment, configuration, scaling, and management of Azure resources through scripts (e.g., bash, PowerShell), helping to streamline repetitive tasks.

  3. Cross-Platform

    • Azure CLI is cross-platform, running on Windows, macOS, and Linux, offering flexibility for developers working across different operating systems.

  4. Scriptability

    • You can write scripts to handle complex deployment scenarios, such as looping over resource creation or conditional logic based on input parameters.

  5. Interactive and Ad-hoc Commands

    • Azure CLI can be used interactively for quick, ad-hoc tasks or combined with scripts for larger automation scenarios.

  6. Integration with DevOps Pipelines

    • Azure CLI can be easily integrated into CI/CD pipelines (e.g., Azure DevOps, GitHub Actions), allowing automated deployments and testing in a DevOps workflow.

  7. Flexibility in Resource Management

    • CLI commands provide flexibility in managing resources on the go (create, update, scale, delete), and allow users to execute tasks not easily done in the portal.

Using Both ARM Templates and Azure CLI together offer a robust benefit from both.

  • Use ARM templates for consistent, declarative deployments.
  • Use Azure CLI to invoke and manage those templates programmatically in scripts or automation workflows.

This blog will guide you through creating the necessary resources (Resource Group, App Service Plan, and Web App), deploying a website, and using an ARM template and Azure CLI for deployment.

back to contents

Step 1: Prerequisite

  • Azure account If you do not have one yet, click here to sign up for a free account
  • Azure CLI If you haven't already installed the Azure CLI, you can install it from here.
  • Visual studio code with Azure CLI tools extension installed
  • GitHub account. Sign up here if you do not have one yet.
  • website application. Create a website if you have coding skills or search for free web app online and download. You can see Theme wagon for example.

back to contents

Step 2: Push your website to remote repository (GitHub)

  • Create a repository in Github

Image description

  • Open your website application code on visual studio code
    • On terminal tab, switch to git bash

Image description

Run the following command to push your website to GitHub

  • Initialize your repository. Run the following command 
git init
Enter fullscreen mode Exit fullscreen mode
  • Create a connection to your Repository 
git remote add origin URL
Enter fullscreen mode Exit fullscreen mode

replace URL with your repository URL copied from GitHub.

  • Add all your files 
git add .
Enter fullscreen mode Exit fullscreen mode
  • Commit to save 
git commit -m"initial commit"
Enter fullscreen mode Exit fullscreen mode
  • Push to the remote repository 
git push origin master
Enter fullscreen mode Exit fullscreen mode

Image description

  • Files will be visible in your GitHub repo upon a successful push.

Image description

To learn more about how to create a repository and push file to it click here

back to contents

Step 3: Sign in to Azure

  • On the terminal, sign in to your Azure account: 
az login
Enter fullscreen mode Exit fullscreen mode
  • When prompted, choose your account type and continue.

Image description

  • Provide your account details to sign in

Image description

  • Upon successful sign in, your subscription will be listed typical in json, yaml or table form.

Image description

back to contents

Step 4: Prepare your ARM template files

  • Create a new folder

Manually create a new folder in same directory as your website and create json files for your deployment. Alternatively, use Linux command to move out of the website folder, make a new folder for the ARM template and create json files. Here we will go with the later,

  • Move a step back 
cd ..
Enter fullscreen mode Exit fullscreen mode
  • Create a new folder furniture-ARM-Template 
mkdir furniture-ARM-Template
Enter fullscreen mode Exit fullscreen mode
  • Move into the new folder 
cd furniture-ARM-Template
Enter fullscreen mode Exit fullscreen mode
  • Create json files (template.json and parameter.json)for your ARM Template. Use any name of your choice but remember to stick to lower case to avoid unnecessary errors while deploying resources. 
touch template.json
Enter fullscreen mode Exit fullscreen mode 
nano template.json
Enter fullscreen mode Exit fullscreen mode

put the following command in the file

{
    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "resources": [
      {
        "type": "Microsoft.Web/serverfarms",
        "apiVersion": "2021-01-15",
        "name": "[parameters('appServicePlanName')]",
        "location": "[resourceGroup().location]",
        "sku": {
          "name": "F1",
          "tier": "Free",
          "size": "F1",
          "family": "F",
          "capacity": 1
        }
      },
      {
        "type": "Microsoft.Web/sites",
        "apiVersion": "2021-01-15",
        "name": "[parameters('webAppName')]",
        "location": "[resourceGroup().location]",
        "properties": {
          "serverFarmId": "[resourceId('Microsoft.Web/serverfarms', parameters('appServicePlanName'))]",
          "siteConfig": {
            "appSettings": [
              {
                "name": "SCM_DO_BUILD_DURING_DEPLOYMENT",
                "value": "true"
              }
            ]
          }
        }
      }
    ],
    "parameters": {
      "appServicePlanName": {
        "type": "string"
      },
      "webAppName": {
        "type": "string"
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode 
touch parameter.json
Enter fullscreen mode Exit fullscreen mode 
nano parameter.json
Enter fullscreen mode Exit fullscreen mode

Put the following command into the file

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "appServicePlanName": {
      "value": "furnitureAppPlan87"
    },
    "webAppName": {
      "value": "interiorfurnitureWebApp9040"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Replace furnitureAppPlan87 and interiorfurnitureWebApp9040 with a unique name of your choice for your app service plan and web app respectively.

  • Open the Folder furniture-ARM-Template to confirm your saved files

Image description

back to contents

Step 5: Deploy the ARM Template

  • Create a Resource Group using Azure CLI Use the format to create a resource group. 
az group create --name ResourceGroupName --location ResourceGroupLocation
Enter fullscreen mode Exit fullscreen mode

Replace the ResourceGroupName with any name of your choice ResourceGroupLocation with any azure location of your choice.

Example

az group create --name furnitureRG --location westeurope
Enter fullscreen mode Exit fullscreen mode

Image description

  • Deploy the ARM Template to create App Service Plan and webapp 
az deployment group create --resource-group furnitureRG --template-file template.json --parameters parameter.json
Enter fullscreen mode Exit fullscreen mode

Image description

back to contents

Step 6: Host the Website to the App Service

  • Go to your website repository on github.com
  • Navigate to code and copy the url provided or from the address bar.

Image description

  • Configure the webapp deployment source.

In the following command, Replace interiorfurnitureWebApp9040 with your web app name, furnitureRG with resource group name and https://github.com/celestinaodili/furniture-website.git with your url.

az webapp deployment source config --name interiorfurnitureWebApp9040 --resource-group furnitureRG  --repo-url https://github.com/celestinaodili/furniture-website.git --branch master --manual-integration
Enter fullscreen mode Exit fullscreen mode
  • Run the command in your terminal.

Image description

back to contents

Step 7: Browse the Deployed Website

After the deployment is complete

  • Go to Azure portal

  • Copy the default domain url

Image description

  • Paste the url on a browser to visit the website. 
interiorfurniturewebapp9040.azurewebsites.net
Enter fullscreen mode Exit fullscreen mode

This will show a furniture e-commerce website.

Image description

back to contents

Step 8: Clean Up Resources (Optional)

If you are practicing, it is always good to delete resources after practice to avoid incurring charges on your account. You may want to leave this because it is a free tier but if you want to delete, you can do so with the following command:

az group delete --name furnitureRG --yes --no-wait
Enter fullscreen mode Exit fullscreen mode

Replace furnitureRG with the name of your resource group. This will remove the resource group and all associated resources.

back to contents

Top comments (0)

Read next

avradeep_nayak_fa8d5f6995 profile image

Winter Solstice

Avradeep Nayak -

codewander profile image

WIP Notes working though Render hosting Flask + Vite + React + Wouter

Kanishka -

fazly_fathhy profile image

Frontend Challenge - December Edition

Fazly Fathhy -

rijultp profile image

Enhancing User Experience with React-Joyride: How I made User onboarding seamless

Rijul Rajesh -