Continuous Deployment on Azure

phillydevops-azure.md

Continuous Deployment with Azure

Why Continuous Deployment?

CI and CD isn't just to ship finished features faster; it's to finish features faster.

Reduce design cycle time by sharing work-in-progress.

Reduce stakeholder approval time by showing approval candidates easily.

Stop sharing localhost:9000 over WebEx! Slap a link into Slack instead.

Demo: Continuous Deployment with a Vendor (Netlify)

Push a branch, get a 'free' review site

This repository (public link): https://github.com/thinkcompany/netlify-static

is watched by Netlify (not a public link): https://app.netlify.com/sites/netlify-static/overview

...and it deploys here (public link): https://netlify-static.thinkcompany.dev/

JOHN DEMONSTRATES A PUSH TO MASTER

• A push to master shows up at netlify-static.thinkcompany.dev a minute or two later.
• You can watch the build come together in Netlify (if you were logged in to Netlify)
• You can see the finished deployment announced in Slack.

So far, this is well-traveled ground; a finished feature was pushed to a production site.

JOHN DEMONSTRATES A FEATURE BRANCH BUILD

• A push to branch-name shows up as a new deploy in Netlify
• The URL of the build is branch-name--netlify-static.netlify.app
• I usually use the Slack annoucement to get this URL. You can copy and paste this URL into any message you like.

At Think, we use this process a lot to share work-in-progress with design colleagues, and to share features with stakeholders. We also use it for pull requests!

This saves a lot of time as a reviewer, because you don't have to warm up the code, pull the branch, build the server, etc.

Demo: Continuous Deployment in Azure

Netlify is a vendor implementation with all the bells and whistles, including branch builds and Slack notifications.

We'll work through the process of creating a simpler deployment in Azure. All the bells and whistles can be added to what we're going to do.

Ryan Killeen's HOWTO is on Google Docs here, and we'll be following that recipe.

Create the site in Azure

1. Log in to Azure Portal and create a new storage account.
2. Activate "static website"
3. Add index.html and record Storage Account Name, Primary Endpoint, and key1.

Create a build pipeline in Azure DevOps

3. Log in to Azure DevOps) and create an organization and project.
4. Create a build pipeline and point to GitHub.
5. Create the .yaml build script

Create a release pipeline in Azure DevOps

5. Create a release pipeline
6. Add an artifact, and record the Source Alias
7. Activate the continuous deployment trigger
8. Name the first stage of the release and add a task
9. Add a powershell script inline, and configure with the Source Alias, Storage Account Name, and key1.
10. Save changes and trigger a release.

Test that it works

11. Commit a change to source control
12. Watch the build kick off
13. Watch the release... release
14. Check the primary endpoint!

Scratch pad

Item	URL
GitHub Repository	https://github.com/thinkcompany/phillydevops
Azure Portal storage account	Storage account name: TK access key: TK
Azure DevOps project	Project name: TK Source alias: TK
Web location	URL here

First pass

This was John's first pass at building CD in Azure

Item	URL
GitHub Repository	https://github.com/thinkcompany/phillydevops
Azure Portal storage account	phillydevops
Azure DevOps project	think-azure-sandbox
Web location	https://phillydevops.z13.web.core.windows.net/

Second pass

This was John's second pass at building CD in Azure

Item	URL
GitHub Repository	https://github.com/thinkcompany/phillydevops
Azure Portal storage account	Storage account name: phillydevops2 access key: ZWq5ehezW7dHXUnr9WNPm6AKCHpALLNfOvf08/CxxcJ5TfS0FtOZ/hxl4eYjc7Y9Jo6WAmlSidpobRn1JVyKbQ==
Azure DevOps project	phillydevops Source alias: _thinkcompany.phillydevops
Web location	https://phillydevops2.z13.web.core.windows.net/

Write-Host "Change Folder Location"
cd $(System.DefaultWorkingDirectory)/_thinkcompany.phillydevops/drop
 
Write-Host "Push files to blob storage"
az storage blob upload-batch -s ./ -d '$web' --account-name phillydevops2 --account-key "ZWq5ehezW7dHXUnr9WNPm6AKCHpALLNfOvf08/CxxcJ5TfS0FtOZ/hxl4eYjc7Y9Jo6WAmlSidpobRn1JVyKbQ=="

Starter files

You can use these files as starters for your own deployment.

Get a Free Azure account

Get twelve months of free Azure services here: https://azure.microsoft.com/en-us/free/

Starter pipeline

# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml
 
trigger:
- master
 
pool:
  vmImage: 'ubuntu-latest'
 
steps:
- task: CopyFiles@2
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: '**'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
 
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
 
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

Starter powershell

Write-Host "Change Folder Location"
cd $(System.DefaultWorkingDirectory)/_[your-source-alias]/drop
 
Write-Host "Push files to blob storage"
az storage blob upload-batch -s ./ -d '$web' --account-name [account-name-from-access-key page] --account-key "[your account key, in quotes]"