• Introduction
• Agenda
• 課前準備
  • Sign up or sign in your GitHub account
  • Redeem Azure Pass
• GitHub Action
• 實作
  • Setup repository
  • Step 1: Trigger a job based on labels
  • Step 2: Set up an Azure environment
  • Step 3: Spin up an environment based on labels
  • Step 4: Deploy to a staging environment based on labels
  • Step 5: Deploy to a production environment based on labels
  • Issue
• Reference

Introduction

• Who is this for: Developers, DevOps Engineers, new GitHub users, students, and teams.
• What you'll learn: We'll learn how to create a workflow that enables Continuous Delivery using GitHub Actions and Microsoft Azure.
• What you'll build: We will create two deployment workflows - the first workflow to deploy to staging based on a label and the second workflow to deploy to production based on merging to main.

Agenda

• 課程說明 / 課前準備
• GitHub Action 基本介紹
• 實作
  • Step 1: Trigger a job based on labels
  • Step 2: Set up an Azure environment
  • Step 3: Spin up an environment based on labels
  • Step 4: Deploy to a staging environment based on labels
  • Step 5: Deploy to a production environment based on labels
  • Step 6: Production deployment

課前準備

Sign up or sign in your GitHub account

進入官方網站，點選 Sign in 或 Sign up

• 如尚未有帳號，點選右上角 Sign up 進行註冊
  
  
  

Redeem Azure Pass

IMPORTANT: Please note the use of the pass is subject to the following Terms and Conditions:

• DO NOT redeem promo code with an email account that is attached to an EA, the pass will not work.
  Promo code needs to be redeemed within 90-days of being received.
• Customer Live ID/Org ID will be limited to one concurrent Azure Pass Sponsorship at a time.
• Monetary credit can't be used toward third party services, premier support or Azure MarketPlace and cannot be added to existing subscriptions.
• If you add a payment instrument to the subscription and the subscription is active at the conclusion of the offer it will be converted to Pay-As-You-Go.
  Subscriptions are activated within minutes of the promo code being redeemed.

To redeem a promo code, visit www.microsoftazurepass.com and follow the Azure Pass Redemption instructions

• Tax information 留白即可
  

GitHub Action

• 提供 Continuous Integration 持續整合與 Continuous Deployment 持續部署之服務

  • GitHub Flow
    
  • GitHub Flow with GitHub Action
    

• Workflow Components：workflow 透過 YAML 格式定義，並保存於 .github/workflow 的路徑下， GitHub 預設提供許多 workflow 可讓使用者使用
  

  • Event：觸發自動化工作流程，如 on: release、on: pull_request、on: push、on: scheduled 等，完整列表可查看 Events that trigger workflows
  • Job：在相同 Runner 中所執行的一組 Step，預設以平行方式執行，也可設定為循序執行
  • Step：在 Job 中可執行命令或 action 的獨立工作
  • Action：經包裝後的執行內容， GitHub community 中已有許多由創作者所提供之 action 可直接使用。透過 JavaScript 或 Docker container 方式撰寫並發布至 market place 上供其他使用；action 來源也可為 workflow 相同的 repository、其他 public repository 或發布於 Docker Registry。
  • Runners：執行自動化工作的代理程式運作於伺服器上，支援 Ubuntu、Linux、Windows 和 macOS，也可設定 self-host runner

• Workflow 語意解析
  

  • name： workflow 的名稱，若無設定則預設以 workflow 資料夾路徑 + 檔案名稱命名
  • on：觸發 workflow event，如設定 workflow_dispatch 則為手動執行
    ​​​​​​​​on:
    ​​​​​​​​ push:
    ​​​​​​​​  branches: [main]
    ​​​​​​​​ pull_request:
    ​​​​​​​​  branches: [main]
    ​​​​​​​​ workflow_dispatch: 
    

  • job：每個 Job 需有 JobID 且名稱需唯一，只能以英文或_開頭命名，透過添加 runs-on
    ​​​​​​​​jobs:
    ​​​​​​​​ my_first_job:
    ​​​​​​​​  name: My first job
    ​​​​​​​​ my_second_job:
    ​​​​​​​​  name: My second job
    

  • step：Job 包含一系列 steps，step 內執行 action 時使用 uses，或使用 run 直接在 runner 上執行命令
    ​​​​​​​​steps:
    ​​​​​​​​ - uses: actions/checkout@2
    
    ​​​​​​​​ - name: Run a one-line script
    ​​​​​​​​   run: echo Hello, world!
    

實作

• main
• staging-workflow => new workflow for staging deployment
• azure-configuration => new workflow for azure resource provision
• staging-test => commit new version and deploy to staging
• production-deployment-workflow => new workflow for production deployment

We'll use labels as triggers for multiple tasks:

• When someone applies a "spin up environment" label to a pull request, that'll tell GitHub Actions that we'd like to set up our resources on an Azure environment.
• When someone applies a "stage" label to a pull request, that'll be our indicator that we'd like to deploy our application to a staging environment.
• When someone applies a "destroy environment" label to a pull request, we'll tear down any resources that are running on our Azure account.

Setup repository

• Naviagte to https://github.com/skills/continuous-delivery-azure
• Select Use this template
  

Step 1: Trigger a job based on labels

Activity 1: Configure GITHUB_TOKEN permissions
GitHub Actions provide a default GITHUB_TOKEN that can be used by steps in your workflow that require access to your GitHub repository.

• Navigate to Settings > Actions | General
  
• Under Workflow permissions, ensure that the GITHUB_TOKEN for this repository has Allow GitHub Actions to create and approve pull requests enabled and also has Read and write permissions enabled. This is required for your workflow to be able to upload your image to the container registry.
  

Activity 2: Configure a trigger based on labels

• Go to the Actions tab. Click New workflow
  
• Search for simple workflow and click Configure
  
• Name your workflow deploy-staging.yml
  
• Edit the contents of the file to add a conditional that filters the build job when there is a label present called stage. Your resulting file should look like this:
  ​​​​name: Stage the app
  ​​​​on:
  ​​​​  # Triggers the workflow on push or pull request events but only for the "main" branch
  ​​​​  pull_request:
  ​​​​    types: [labeled]
  
  ​​​​  # Allows you to run this workflow manually from the Actions tab
  ​​​​  workflow_dispatch:
  
  ​​​​jobs:
  ​​​​  build:
  ​​​​    runs-on: ubuntu-latest
  ​​​​    if: contains(github.event.pull_request.labels.*.name, 'stage')
  ​​​​    steps:
  ​​​​      - uses: actions/checkout@v3
  
  ​​​​      - name: Run a one-line script
  ​​​​        run: echo Hello, world!
  
  ​​​​      - name: Run a multi-line script
  ​​​​        run: |
  ​​​​          echo Add other actions to build,
  ​​​​          echo test, and deploy your project.
  

• Click Start commit, choose to make a new branch named staging-workflow, and click Propose a new file.
  
  
• Click Create pull request.
  
  

Step 2: Set up an Azure environment

• Go to Azure Portal, Open Azure Cloud Shell

• Need to setup cloud shell environment when first use
  

  

• Click Create storage
  

  

• Use the command below

  ​​​​az account show
  

• Copy the value of the id: field to a safe place. We'll call this AZURESUBSCRIPTIONID. Here's an example of what it looks like:
  

  

• In your terminal, run the command below

  ​​​​az ad sp create-for-rbac --name "GitHub-Actions" --role contributor \
  ​​​​                          --scopes /subscriptions/{subscription-id} \
  ​​​​                          --sdk-auth
  
  ​​​​# Replace {subscription-id} with the same id stored in AZURE_SUBSCRIPTION_ID.
  

• Copy the entire contents of the command's response, we'll call this AZURECREDENTIALS. Here's an example of what it looks like:
  

  

• Back on GitHub, click on this repository's Secrets in the Settings tab. Click New secret
  

  

• Name your new secret AZURE_SUBSCRIPTION_ID and paste the value from the id: field in the first command. Click Add secret
  

  

• Click New secret again. Name the second secret AZURE_CREDENTIALS and paste the entire contents from the second terminal command you entered. Click Add secret
  

  

Activity 2: Set up Azure resource provision workflow

• New another workflow named spinup-destroy.yml
  

  

• Use the workflow as below

  ​​​​name: Configure Azure environment
  
  ​​​​on: 
  ​​​​  pull_request:
  ​​​​    types: [labeled]
  
  ​​​​env:
  ​​​​  PACKAGES_TOKEN: ${{secrets.PACKAGES_TOKEN}}
  ​​​​  AZURE_RESOURCE_GROUP: cd-with-actions
  ​​​​  AZURE_CONTAINERAPPS_ENVIRONMENT: actions-ttt-deployment
  ​​​​  AZURE_LOCATION: '"eastus2"'
  ​​​​  #################################################
  ​​​​  ### USER PROVIDED VALUES ARE REQUIRED BELOW   ###
  ​​​​  #################################################
  ​​​​  #################################################
  ​​​​  ### REPLACE <username> WITH GH USERNAME         ###
  ​​​​  AZURE_CONTAINER_APP_NAME: <username>-ttt-app
  ​​​​  #################################################
  
  ​​​​jobs:
  ​​​​  setup-up-azure-resources:
  ​​​​    runs-on: ubuntu-latest
  
  ​​​​    if: contains(github.event.pull_request.labels.*.name, 'spin up environment')
  
  ​​​​    steps:
  ​​​​      - name: Checkout repository
  ​​​​        uses: actions/checkout@v2
  
  ​​​​      - name: Azure login
  ​​​​        uses: azure/login@v1
  ​​​​        with:
  ​​​​          creds: ${{ secrets.AZURE_CREDENTIALS }}
  
  ​​​​      - name: Create Azure resource group
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az group create --location ${{env.AZURE_LOCATION}} --name ${{env.AZURE_RESOURCE_GROUP}} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
  ​​​​#       - name: Create Azure app service plan
  ​​​​#         if: success()
  ​​​​#         run: |
  ​​​​#           az appservice plan create --resource-group ${{env.AZURE_RESOURCE_GROUP}} --name ${{env.AZURE_APP_PLAN}} --is-linux --sku F1 --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
  ​​​​#       - name: Create webapp resource
  ​​​​#         if: success()
  ​​​​#         run: |
  ​​​​#           az webapp create --resource-group ${{ env.AZURE_RESOURCE_GROUP }} --plan ${{ env.AZURE_APP_PLAN }} --name ${{ env.AZURE_WEBAPP_NAME }}  --deployment-container-image-name nginx --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
  ​​​​#       - name: Configure webapp to use GitHub Packages
  ​​​​#         if: success()
  ​​​​#         run: |
  ​​​​#           az webapp config container set --docker-custom-image-name nginx --docker-registry-server-password ${{secrets.GITHUB_TOKEN}} --docker-registry-server-url https://docker.pkg.github.com --docker-registry-server-user ${{github.actor}} --name ${{ env.AZURE_WEBAPP_NAME }} --resource-group ${{ env.AZURE_RESOURCE_GROUP }} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
  ​​​​      - name: Install the Azure Container Apps extension for the CLI
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az extension add --name containerapp --upgrade 
  ​​​​      - name: Register the Microsoft.App namespace
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az provider register --namespace Microsoft.App 
  ​​​​      - name: Create the container app environment
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az containerapp env create --location ${{env.AZURE_LOCATION}} --resource-group ${{env.AZURE_RESOURCE_GROUP}} --name ${{env.AZURE_CONTAINERAPPS_ENVIRONMENT}} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}} 
  ​​​​      - name: Create a container app
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az containerapp create --name ${{env.AZURE_CONTAINER_APP_NAME}} --resource-group ${{env.AZURE_RESOURCE_GROUP}} --environment ${{env.AZURE_CONTAINERAPPS_ENVIRONMENT}} --image nginx --target-port 80 --ingress 'external' --query properties.configuration.ingress.fqdn
  ​​​​  destroy-azure-resources:
  ​​​​    runs-on: ubuntu-latest
  
  ​​​​    if: contains(github.event.pull_request.labels.*.name, 'destroy environment')
  
  ​​​​    steps:
  ​​​​      - name: Checkout repository
  ​​​​        uses: actions/checkout@v2
  
  ​​​​      - name: Azure login
  ​​​​        uses: azure/login@v1
  ​​​​        with:
  ​​​​          creds: ${{ secrets.AZURE_CREDENTIALS }}
  
  ​​​​      - name: Destroy Azure environment
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az group delete --name ${{env.AZURE_RESOURCE_GROUP}} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}} --yes
  

• Start commit and new a branch named azure-configuration
  

  

• No need to create pull request

Activity 3: Edit deploy-staging file

• Edit the .github/workflows/deploy-staging.yml file at staging-workflow branch to use some new actions.
  ​​​​name: Deploy to staging
  
  ​​​​on:
  ​​​​  pull_request:
  ​​​​    types: [labeled]
  
  ​​​​env:
  ​​​​  IMAGE_REGISTRY_URL: ghcr.io
  ​​​​  AZURE_RESOURCE_GROUP: cd-with-actions
  ​​​​  ###############################################
  ​​​​  ### Replace <username> with GitHub username ###
  ​​​​  ###############################################
  ​​​​  DOCKER_IMAGE_NAME: <username>-azure-ttt
  ​​​​  AZURE_CONTAINER_APP_NAME: <username>-ttt-app
  ​​​​  ###############################################
  
  ​​​​jobs:
  ​​​​  build:
  ​​​​    if: contains(github.event.pull_request.labels.*.name, 'stage')
  
  ​​​​    runs-on: ubuntu-latest
  
  ​​​​    steps:
  ​​​​      - uses: actions/checkout@v1
  ​​​​      - name: npm install and build webpack
  ​​​​        run: |
  ​​​​          npm install
  ​​​​          npm run build
  ​​​​      - uses: actions/upload-artifact@main
  ​​​​        with:
  ​​​​          name: webpack artifacts
  ​​​​          path: public/
  
  ​​​​  Build-Docker-Image:
  ​​​​    runs-on: ubuntu-latest
  ​​​​    needs: build
  ​​​​    name: Build image and store in GitHub Container Registry
  ​​​​    steps:
  ​​​​      - name: Checkout
  ​​​​        uses: actions/checkout@v1
  
  ​​​​      - name: Download built artifact
  ​​​​        uses: actions/download-artifact@main
  ​​​​        with:
  ​​​​          name: webpack artifacts
  ​​​​          path: public
  
  ​​​​      - name: Log in to GHCR
  ​​​​        uses: docker/login-action@v1.14.1
  ​​​​        with:
  ​​​​          registry: ${{ env.IMAGE_REGISTRY_URL }}
  ​​​​          username: ${{ github.actor }}
  ​​​​          password: ${{ secrets.GITHUB_TOKEN }}
  
  ​​​​      - name: Extract metadata (tags, labels) for Docker
  ​​​​        id: meta
  ​​​​        uses: docker/metadata-action@v3.7.0
  ​​​​        with:
  ​​​​          images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}
  ​​​​          tags: |
  ​​​​            type=sha,format=long,prefix=
  ​​​​      - name: Build and push Docker image
  ​​​​        uses: docker/build-push-action@v2.10.0
  ​​​​        with:
  ​​​​          context: .
  ​​​​          push: true
  ​​​​          tags: ${{ steps.meta.outputs.tags }}
  ​​​​          labels: ${{ steps.meta.outputs.labels }}
  
  ​​​​  Deploy-to-Azure:
  ​​​​    runs-on: ubuntu-latest
  ​​​​    needs: Build-Docker-Image
  ​​​​    name: Deploy app container to Azure
  ​​​​    steps:
  ​​​​      - name: "Login via Azure CLI"
  ​​​​        uses: azure/login@v1
  ​​​​        with:
  ​​​​          creds: ${{ secrets.AZURE_CREDENTIALS }}
  
  ​​​​      - uses: azure/docker-login@v1
  ​​​​        with:
  ​​​​          login-server: ${{env.IMAGE_REGISTRY_URL}}
  ​​​​          username: ${{ github.actor }}
  ​​​​          password: ${{ secrets.GITHUB_TOKEN }}
  
  ​​​​#           - name: Deploy web app container
  ​​​​#             uses: azure/webapps-deploy@v2
  ​​​​#             with:
  ​​​​#               app-name: ${{env.AZURE_WEBAPP_NAME}}
  ​​​​#               images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{ github.sha }}
  
  ​​​​      - name: Set up Azure extension installation
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​         az config set extension.use_dynamic_install=yes_without_prompt  
  ​​​​      - name: Deploy to app container
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az containerapp update -n ${{env.AZURE_CONTAINER_APP_NAME}} -g ${{env.AZURE_RESOURCE_GROUP}} --image ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{github.sha}}
  ​​​​      - name: Azure logout
  ​​​​        run: |
  ​​​​          az logout
  

• Click Start commit and commit to the staging-workflow branch.
  
  

Activity 3: Preparing staging-test branch

• New a staging-test branch based on main
  
  
• Under staging-test branch, modify index.html
  ​​​​    <meta name="viewport" content="width=device-width, initial-scale=1">
  ​​​​    <title>TicTacToe - DevOps Day</title>
  
  ​​​​    <link href="public/index.css" type="text/css" rel="stylesheet" />
  

• After edit the title of page, click commit
  
  

Step 3: Spin up an environment based on labels

Activity 1: Set up a personal access token (PAT)
Personal access tokens (PATs) are an alternative to using passwords for authentication to GitHub.

• Use a PAT to allow your web app to pull the container image after your workflow pushes a newly built image to the registry. Navigate to Personal profile > Settings
  
  
• Under Developer settings, click Personal access tokens > Generate new token
  
  

• Create a personal access token with the repo and read:packages scopes.
  

  

• Once you have generated the token we will need to store it in a secret so that it can be used within a workflow. Create a new repository secret named CR_PAT and paste the PAT token in as the value.
  

  

Activity 2: Apply labels to create resources

• Apply the spin up environment label to your open pull request. Wait for the GitHub Actions workflow to run and spin up your Azure environment.
  
  
  
  
• After apply the label to pull request, the workflow would be triggered
  
  

Step 4: Deploy to a staging environment based on labels

Activity 1: Set up production-deployment-workflow branch

• Navigate to Actions > New workflow > set up a workflow yourself
  
  
• Use the workflow as below
  ​​​​name: Deploy to production
  
  ​​​​on:
  ​​​​  push:
  ​​​​    branches:
  ​​​​      - main
  
  ​​​​env:
  ​​​​  IMAGE_REGISTRY_URL: ghcr.io
  ​​​​  AZURE_RESOURCE_GROUP: cd-with-actions
  ​​​​  ###############################################
  ​​​​  ### Replace <username> with GitHub username ###
  ​​​​  ###############################################
  ​​​​  DOCKER_IMAGE_NAME: <username>-azure-ttt
  ​​​​  AZURE_CONTAINER_APP_NAME: <username>-ttt-app
  ​​​​  ###############################################
  
  ​​​​jobs:
  ​​​​  build:
  ​​​​    runs-on: ubuntu-latest
  
  ​​​​    steps:
  ​​​​      - uses: actions/checkout@v1
  ​​​​      - name: npm install and build webpack
  ​​​​        run: |
  ​​​​          npm install
  ​​​​          npm run build
  ​​​​      - uses: actions/upload-artifact@main
  ​​​​        with:
  ​​​​          name: webpack artifacts
  ​​​​          path: public/
  
  ​​​​  Build-Docker-Image:
  ​​​​    runs-on: ubuntu-latest
  ​​​​    needs: build
  ​​​​    name: Build image and store in GitHub Container Registry
  ​​​​    steps:
  ​​​​      - name: Checkout
  ​​​​        uses: actions/checkout@v1
  
  ​​​​      - name: Download built artifact
  ​​​​        uses: actions/download-artifact@main
  ​​​​        with:
  ​​​​          name: webpack artifacts
  ​​​​          path: public
  
  ​​​​      - name: Log in to GHCR
  ​​​​        uses: docker/login-action@v1.14.1
  ​​​​        with:
  ​​​​          registry: ${{ env.IMAGE_REGISTRY_URL }}
  ​​​​          username: ${{ github.actor }}
  ​​​​          password: ${{ secrets.GITHUB_TOKEN }}
  
  ​​​​      - name: Extract metadata (tags, labels) for Docker
  ​​​​        id: meta
  ​​​​        uses: docker/metadata-action@v3.7.0
  ​​​​        with:
  ​​​​          images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}
  ​​​​          tags: |
  ​​​​            type=sha,format=long,prefix=
  ​​​​      - name: Build and push Docker image
  ​​​​        uses: docker/build-push-action@v2.10.0
  ​​​​        with:
  ​​​​          context: .
  ​​​​          push: true
  ​​​​          tags: ${{ steps.meta.outputs.tags }}
  ​​​​          labels: ${{ steps.meta.outputs.labels }}
  
  ​​​​  Deploy-to-Azure:
  ​​​​    runs-on: ubuntu-latest
  ​​​​    needs: Build-Docker-Image
  ​​​​    name: Deploy app container to Azure
  ​​​​    steps:
  ​​​​      - name: "Login via Azure CLI"
  ​​​​        uses: azure/login@v1
  ​​​​        with:
  ​​​​          creds: ${{ secrets.AZURE_CREDENTIALS }}
  
  ​​​​      - uses: azure/docker-login@v1
  ​​​​        with:
  ​​​​          login-server: ${{env.IMAGE_REGISTRY_URL}}
  ​​​​          username: ${{ github.actor }}
  ​​​​          password: ${{ secrets.GITHUB_TOKEN }}
  
  ​​​​#       - name: Deploy web app container
  ​​​​#         uses: azure/webapps-deploy@v2
  ​​​​#         with:
  ​​​​#           app-name: ${{env.AZURE_WEBAPP_NAME}}
  ​​​​#           images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{github.sha}}
  
  ​​​​      - name: Set up Azure extension installation
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​         az config set extension.use_dynamic_install=yes_without_prompt  
  ​​​​      - name: Deploy to app container
  ​​​​        if: success()
  ​​​​        run: |
  ​​​​          az containerapp update -n ${{env.AZURE_CONTAINER_APP_NAME}} -g ${{env.AZURE_RESOURCE_GROUP}} --image ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{github.sha}}
  ​​​​      - name: Azure logout
  ​​​​        run: |
  ​​​​          az logout
  

• Save the file named deploy-prod.yml
• Click Start commit with create a new branch named production-deployment-workflow
  
  
• No need to create pull request

Activity 2: Apply labels to deploy to staging

• Apply the stage label to your open pull request of staging-test to main
  
  
• Wait for the GitHub Actions workflow to run and deploy the application to your Azure environment
  
  

Step 5: Deploy to a production environment based on labels

• Click Merge pull request and leave this tab open as we will be applying a label to the closed pull request in the next step.
  

  
  
  

• Apply the destroy environment label to your merged production-deployment-workflow pull request. If you have already closed the tab with your pull request, you can open it again by clicking Pull requests and then clicking the Closed filter to view merged pull requests.
  

  

Issue

Reference

• 今日課程官方教學文件
• Install extensions automatically