Create two deployment workflows using GitHub Actions and Microsoft Azure.
Good job getting started ⚙️
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/checkoutactions/upload-artifactactions/download-artifactdocker/login-actiondocker/build-push-actionazure/loginazure/webapps-deploy
-
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.
-
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.
-
Install Azure CLI on your machine.
-
In your terminal, run:
az login
-
Copy the value of the
id:field to a safe place. We'll call thisAZURE_SUBSCRIPTION_ID. Here's an example of what it looks like:[ { "cloudName": "AzureCloud", "id": "f****a09-****-4d1c-98**-f**********c", # <-- Copy this id field "isDefault": true, "name": "some-subscription-name", "state": "Enabled", "tenantId": "********-a**c-44**-**25-62*******61", "user": { "name": "mdavis******@*********.com", "type": "user" } } ] -
In your terminal, run the command below.
az ad sp create-for-rbac --name "GitHub-Actions" --role contributor \ --scopes /subscriptions/{subscription-id} # 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. -
Copy the entire contents of the command's response, we'll store it as secrets to authorize in Azure. Here's an example of what it looks like:
{ "appId": "<GUID>", "displayName": "GitHub-Actions", "password": "<GUID>", "tenant": "<GUID>", (...) } -
Back on GitHub, click on this repository's Secrets and variables > Actions in the Settings tab.
-
Click New repository 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 repository secret again.
-
Name the second secret AZURE_CLIENT_ID and paste the value from the
appId:field from the second terminal command you entered. -
Click Add secret
-
Click New repository secret again.
-
Name the third secret AZURE_TENANT_ID and paste the value from the
tenant:field from the second terminal command you entered. -
Click Add secret
-
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.ymlfile 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.GITHUB_TOKEN }}
- 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:
client-id: ${{ secrets.AZURE_CLIENT_ID }}
tenant-id: ${{ secrets.AZURE_TENANT_ID }}
subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
- 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@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- After you've edited the file, click Commit changes... and commit to the
staging-workflowbranch. - 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