Deploy to Azure

Create two deployment workflows using GitHub Actions and Microsoft Azure.

Step 2: Set up an Azure environment

Good job getting started ⚙️

Nice work triggering a job on specific labels

We won't be going into detail on the steps of this workflow, but it would be a good idea to become familiar with the actions we're using. They are:

• actions/checkout
• actions/upload-artifact
• actions/download-artifact
• docker/login-action
• docker/build-push-action
• azure/login
• azure/webapps-deploy

⌨️ Activity 1: Store your credentials in GitHub secrets and finish setting up your workflow

1. In a new tab, create an Azure account if you don't already have one. If your Azure account is created through work, you may encounter issues accessing the necessary resources -- we recommend creating a new account for personal use and for this course.

   Note: You may need a credit card to create an Azure account. If you're a student, you may also be able to take advantage of the Student Developer Pack for access to Azure. If you'd like to continue with the course without an Azure account, Skills will still respond, but none of the deployments will work.

2. Create a new subscription in the Azure Portal.

   Note: your subscription must be configured "Pay as you go" which will require you to enter billing information. This course will only use a few minutes from your free plan, but Azure requires the billing information.

3. Install Azure CLI on your machine.

4. In your terminal, run:

   az login

5. Select the subscription you just selected from the interactive authentication prompt. Copy the value of the subscription ID to a safe place. We'll call this AZURE_SUBSCRIPTION_ID. Here's an example of what it looks like:

   No     Subscription name    Subscription ID                       Tenant
   -----  -------------------  ------------------------------------  -----------------
   [1] *  some-subscription    f****a09-****-4d1c-98**-f**********c  Default Directory

6. 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.

   Note: The \ character works as a line break on Unix based systems. If you are on a Windows based system the \ character will cause this command to fail. Place this command on a single line if you are using Windows.

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

   {
     "clientId": "<GUID>",
     "clientSecret": "<GUID>",
     "subscriptionId": "<GUID>",
     "tenantId": "<GUID>",
     (...)
   }

8. Back on GitHub, click on this repository's Secrets and variables > Actions in the Settings tab.

9. Click New repository secret

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

11. Click Add secret.

12. Click New repository secret again.

13. Name the second secret AZURE_CREDENTIALS and paste the entire contents from the second terminal command you entered.

14. Click Add secret

15. Go back to the Pull requests tab and in your pull request go to the Files Changed tab. Find and then edit the .github/workflows/deploy-staging.yml file to use some new actions. The full workflow file, should look like this:

    name: Deploy to staging
    
    on:
      pull_request:
        types: [labeled]
    
    env:
      IMAGE_REGISTRY_URL: ghcr.io
      ###############################################
      ### Replace <username> with GitHub username ###
      ###############################################
      DOCKER_IMAGE_NAME: <username>-azure-ttt
      AZURE_WEBAPP_NAME: <username>-ttt-app
      ###############################################
    
    jobs:
      build:
        if: contains(github.event.pull_request.labels.*.name, 'stage')
    
        runs-on: ubuntu-latest
    
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: 16
          - name: npm install and build webpack
            run: |
              npm install
              npm run build
          - uses: actions/upload-artifact@v4
            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@v4
    
          - name: Download built artifact
            uses: actions/download-artifact@v4
            with:
              name: webpack artifacts
              path: public
    
          - name: Log in to GHCR
            uses: docker/login-action@v3
            with:
              registry: ${{ env.IMAGE_REGISTRY_URL }}
              username: ${{ github.actor }}
              password: ${{ secrets.CR_PAT }}
    
          - name: Extract metadata (tags, labels) for Docker
            id: meta
            uses: docker/metadata-action@v5
            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@v5
            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@v2
            with:
              creds: ${{ secrets.AZURE_CREDENTIALS }}
    
          - uses: azure/docker-login@v1
            with:
              login-server: ${{env.IMAGE_REGISTRY_URL}}
              username: ${{ github.actor }}
              password: ${{ secrets.CR_PAT }}
    
          - name: Deploy web app container
            uses: azure/webapps-deploy@v3
            with:
              app-name: ${{env.AZURE_WEBAPP_NAME}}
              images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{ github.sha }}
    
          - name: Azure logout via Azure CLI
            uses: azure/CLI@v2
            with:
              inlineScript: |
                az logout
                az cache purge
                az account clear

16. After you've edited the file, click Commit changes... and commit to the staging-workflow branch.

17. Wait about 20 seconds then refresh this page (the one you're following instructions from). GitHub Actions will automatically update to the next step.

---

Get help: Post in our discussion board • Review the GitHub status page

© 2023 GitHub • Code of Conduct • MIT License