Skip to content

Latest commit

 

History

History
229 lines (128 loc) · 6.76 KB

README.md

File metadata and controls

229 lines (128 loc) · 6.76 KB
Raw

ADO Azure CRA

Prerequisites

  • Azure Portal Account
  • Azure DevOps Organization

Azure Portal Setup

  • Azure Subscription
  • Azure Resource Group
  • Azure Storage Account
  • Azure CDN Profile & Endpoint

Setup Azure Subscription

  • From the Azure Portal Home, click "More Services", and click "Subscriptions" under the "General" heading.

  • Click the "+ Add" button.

  • Enter a unique name for your subscription.

  • Review all other fields (for my testing purposes, each only had one option, but for client projects, this may have multiple).

  • Click the "Create" button. It may take some time for the subscription to be available.

Setup Azure Resource Group

  • From the Azure Portal Home, click "More Services", and click "Resource Groups" under the "General" heading.

  • Click the "+ Create" button.

  • Select your previously created Subscription and enter a unique name for your Resource Group.

  • Review all other fields (for my testing purposes, I kept the default Region of "(US) East US" but for client projects they may have a preference).

  • Click the "Create" button. It may take some time for the resource group to be available.

Setup Azure Storage Account

  • From the Azure Portal Home, click "More Services", and click "Storage Accounts" under the "Storage" heading.

  • Click the "+ Create" button.

  • Select your previously created Subscription and Resource Group.

  • Enter a unique name for your Storage Account.

  • Review all other fields (for my testing purposes, I kept the defaults, but for client projects they may have a preference).

  • Click the "Create" button. It may take some time for the storage account to be available.

Configure Azure Storage Account Static Website

  • Navigate to the newly created storage account resource.

  • Under "Data Management" in the left navigation, select "Static Website".

  • Click the "Enable" option, enter "index.html" for both document fields, and click "Save".

Configure Azure CDN Profile and Endpoint

  • Navigate to the newly created storage account resource.

  • Under "Security + Networking" in the left navigation, select "Azure CDN".

  • Under "New endpoint", select "Create New", enter a unique name for your CDN Profile, select a pricing tier (for my testing purposes, I selected the classic one), enter a unique name for your endpoint, and select the origin hostname that ends with "(Static Website)".

  • Click the "Create" button. It may take some time for the CDN profile and endpoint to be available.

Azure DevOps Setup

  • Azure DevOps Service Connection
  • Azure DevOps Build Pipeline
  • Azure DevOps Release Pipeline

Setup Azure Service Connection

  • In your Azure DevOps project settings, select "Service Connections" under the "Pipelines" heading in the left navigation.

  • Click "New Service Connection", select "Azure Resource Manager", and click "Next" at the bottom.

  • Ensure "Service Principal (automatic)" is selected and click "Next".

  • Select your newly created subscription and resource group from the dropdowns, enter a unique name for your service connection, select the checkbox to "Grant access permissions to all pipelines", and click "Save".

Assign Storage Account Permissions to Service Principal

  • Navigate to "Service Connections" in your Azure DevOps Project Settings.

  • Select your newly created service connection, and click "Manage Service Principal".

  • Copy the "Display Name" to your clipboard and navigate to your previously created Storage Account.

  • In the left navigation, click "Access Control (IAM)"

  • Click "+ Add" and "Add role assignment"

  • Select "Storage Blob Data Contributor" and click "Next"

  • Ensure "User, Group, or service principal" is selected and click "+ Select Members"

  • Paste your service principal display name in the input, select the service principal, and click "Select".

  • Click "Review + Assign" to assign the permission.

Setup Azure Build Pipeline

  • In Azure DevOps, navigate to "Pipelines" -> "Pipelines" in the left navigation, and click "New Pipeline".

  • Connect your repo from Azure Repos, Github, etc.

  • Copy and paste the following sample azure-pipelines.yml file. This should kick off a build. If it does not, go ahead and run one.

# 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:
- main

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install
  displayName: 'Install Dependencies'

- script: |
    npm run build
  displayName: 'Create Production Build'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'build'
    ArtifactName: 'drop'
    publishLocation: 'Container'
  displayName: 'Publish Build Artifacts'

Setup Azure Release Pipeline

  • In Azure DevOps, navigate to "Pipelines" -> "Releases" in the left navigation, and click "+ New" -> "New Release Pipeline"

  • Select "Empty Job"

  • In the overlay, enter a name for your stage (i.e. "DEV" / "UAT" / "PROD") and close.

  • Under "Artifacts", click "+ Add an Artifact", select "Build", and select your build pipeline from the source dropdown, and click "Add".

  • Click the lightning bolt icon on your newly created artifact and enable the Continuous Deployment Trigger.

  • Click "Tasks", select your stage, and click the "+" button next to "Agent Job".

Azure Replace Tokens Task

  • In the right pane, add the "Replace tokens" task.

  • Enter the following for your target files: **/*

  • Select "custom" for token pattern.

  • Enter the following for your token prefix: __CONFIG_

  • Enter the following for your token suffex: __

Azure File Copy Task

  • In the right pane, add the "Azure file copy" task.

  • Enter the following for your source:

$(System.DefaultWorkingDirectory)/$(Release.PrimaryArtifactSourceAlias)/drop/*

  • Select your service connection for the azure subscription.

  • Select "Azure Blob" for the destination type.

  • Select your storage account for the RM Storage Account.

  • Enter "$web" for your container name.

Azure CLI Task

  • In the right pane, add the "Azure CLI" task.

  • Select your service connection.

  • Select "Powershell" for the script type.

  • Select "Inline Script" for the script location.

  • Copy and paste the following into the inline script input:

az cdn endpoint purge -g $(ResourceGroupName) -n $(EndpointName) --profile-name $(ProfileName) --content-paths "/*" --no-wait

Variables

Click the "Variables" tab and add the following name/value pairs, selecting your stage for the "Scope":

Name Value
EndpointName Your Azure CDN Endpoint Name
ProfileName Your Azure CDN Profile Name
ResourceGroupName Your Azure Resource Group Name
TestName Dev Success!