Productivity Tools

Published: 2022.04.19

Category: Article, Azure

Deploy web app to azure

This tutorial shows how to publish web application to the azure devops.

Create storage account for the website

Create new resource group
Create storage account

Create a storage account

Enable static website

Enable static website

Copy Key

Copy key

Create pipeline

Go to Pipelines >> Pipelines
Create Pipeline
Github
Node with react

## Node.js with React
## Build a Node.js project that uses React.
## Add steps that analyze code, save build artifacts, deploy, and more:
## https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: ubuntu-latest


steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

- script: |
    yarn install
    yarn run build
  displayName: 'yarn install and build'

- task: CopyFiles@2
  displayName: 'Copy files'
  inputs:
    sourceFolder: 'build' 
    Contents: '**/*'
    TargetFolder: '$(Build.BinariesDirectory)'
    cleanTargetFolder: true
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.BinariesDirectory)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

Save and Run

Release

Start with empty job
Add artifact (what was build from build step)
Enable continuos deployment

Enable continuos deployment

Chose agent job and choose Agent (linux)
Add new task

AddNewTask

Extract files
- Archive file patterns */$(Build.BuildId).zip
- Destination folder: $(Build.DefaultWorkingDirectory)/$(Build.BuildId)
Add Azure CLI

Azure CLI

script type Powershell if windows, shell if linux
script location inline

Script

az storage blob upload-batch - account-name STORAGE_ACCOUNT_NAME
 account-key STORAGE_ACCOUNT_KEY - destination '$web' - source ./

Example: az storage blob upload-batch --account-name meetingsweb
 --account-key XPq3uhvz+MvocsOcqa/nqViLsWgcCBdgwPTQvP7NWwV/O+iu2Fhn7KMCpawuRBizkaU3+/4OMaxiLzKBxTZw== 
 --destination '$web' --source ./

Set working directory to $(System.DefaultWorkingDirectory)/$(Build.BuildId)/dist

Debug

Check artifacts

If we encounter an issues we should validate our pipelines. First we should check if build is generating correct package. In the each build pipeline we have information from which commit build was triggered and what artifacts had been published

Script

Next in the Agent job we are checking logs

Script

In he extract files we are validating if files had been exctracted

Script

And in the AzureCLI we are validating if files had been pushed to server

Script