Deploying a static website to Azure Storage using Azure DevOps

Create new Resource Group

  1. Login in to portal.azure.com
  2. From the sidebar, click “Resource Groups”
  3. Click “Add”
  4. Select your project/resource details and then click “Create”

Create new Storage Account

  1. From the sidebar, click “Storage accounts”
  2. Click “Add”
  3. Select the Subscription/Resource Group you created above. Give your storage account a name and select the region you want the assets to be stored in.
  4. Proceed to select any advanced options / tags if required, otherwise click “Review + Create”
  5. Select your new storage account and click “Static website” under “Settings”.
  6. Enable static website hosting and provide a name for the index document (index.html)

Create the Build Pipeline

  1. Navigate to Pipelines > Builds
  2. Click “New pipeline”
  3. Click “Use the visual designer”
  4. Select the source and branch of your repository and then click “Continue” and then on the next page, click “Start with an Empty job”
  5. Change the Agent pool to your preferred choice (Windows/Linux) and click “+” next to “Agent job 1” (I use hosted ubuntu)
  6. Add the tasks relative to your project that will produce a build (npm install, gulp build, etc.) and once you’ve got your pipeline producing a build we need to add 2 more steps to produce the artefacts
  7. Add a new task to the pipeline and select “Copy Files” from the tasks list. Configure this task so that the “Source Folder” reads from your build directory ($(Build.SourcesDirectory)/dist in my case) and set the “Target Folder” to $(Build.ArtifactStagingDirectory)
  8. Add a new task to the pipeline and select “Archive Files” from the tasks list. Configure this task so the target is your build directory and set the output to: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
  9. Add a final task to publish the build artefact. Add a new task to the pipeline and select “Publish Build Artifacts”. By default, the target to be published will be set to $(Build.ArtifactStagingDirectory)

Create the Release Pipeline

  1. From the left sidebar, select Pipelines > Releases
  2. Click “New Pipeline”
  3. Select “Start with an empty job”
  4. Rename the stage to whatever you like and click Save
  5. Click “Add an artifact” and select your project and then build pipeline you just created and make sure that the default version is set to “Latest”
  6. Click on the lightning bolt above where you selected your artifact and enable continuous deployments so that whenever a build pipeline completes, it will start your release pipeline automatically.
  7. Under your stage name, click “1 job, 0 task”
  8. Click on “Agent job” and change the agent pool to your preferred choice (Windows/Linux) and click Save.
  9. Next to the agent job task, click “+” to add a new task to the release pipeline and select the “Extract Files” task.
  10. Configure the task so the “Archive file patterns” match what we’ve produced in the build pipeline **/$(Build.BuildId).zipand set the destination folder to $(Build.DefaultWorkingDirectory)/$(Build.BuildId)
  11. Add a new task to the release pipeline and select “Azure CLI” from the list. Set the “Script Location” to “Inline” and input the following script:
    az storage blob upload-batch — account-name STORAGE_ACCOUNT_NAME account-key STORAGE_ACCOUNT_KEY — destination ‘$web’ — source ./
  12. Replacing “STORAGE_ACCOUNT_NAME” with the name of your storage account and “STORAGE_ACCOUNT_KEY” with “Key #1” that you made a copy of when you created the new storage account in the previous section.
  13. Set the working directory to $(System.DefaultWorkingDirectory)/$(Build.BuildId)/dist
  14. Save the pipeline and create a new release to manually trigger the pipeline. Once complete, you can visit the URL of your static site and see your deployment in all of it’s glory. The static website URL was given to you when you enabled the static website feature in your storage account, to obtain this URL again just navigate back to portal.azure.com, select your storage account > static website.

YAML

trigger:- masterpool:vmImage: ‘Ubuntu-16.04’steps:- task: NodeTool@0inputs:versionSpec: ‘8.x’displayName: ‘Install Node.js’- script: npm installdisplayName: ‘npm install’- script: npm run builddisplayName: ‘npm run build’- task: ArchiveFiles@2inputs:rootFolderOrFile: ‘$(Build.SourcesDirectory)/dist’archiveType: ‘zip’archiveFile: ‘$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip’replaceExistingArchive: true- task: PublishBuildArtifacts@1

--

--

--

UK-based Technology Consultant working in London and Manchester.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Advent of Clojure — Day 1

Internals of python Generator

Free Self-Hosted Zendesk & Help Scout: Architecture, Design and Usability

Make that Single-Page App “Remember” with CrudCrud

Meetup And Learn, Evolve or Die: Testing Must Change — Tentamen Software Testing Blog

How to open Pycharm|PhpStorm | WebStorm from the terminal in ubuntu

Switch statement in Python

Kafka Streams: Would I ever use it again

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matthew Leak

Matthew Leak

UK-based Technology Consultant working in London and Manchester.

More from Medium

Using Azure Application Gateway for an Intranet Application

Azure Functions, localhost and CORS how to get them working together when debugging locally

Using Azure Key Vault secrets in Azure DevOps Pipelines

Best Possibilities to implement Blue Green Deployment Strategy in Azure DevOps