Skip to content

Commit 5bca384

Browse files
Update to 3 in STEP and README.md
1 parent a59e751 commit 5bca384

File tree

2 files changed

+99
-129
lines changed

2 files changed

+99
-129
lines changed

.github/steps/-step.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2
1+
3

README.md

Lines changed: 98 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -14,178 +14,148 @@ _Create two deployment workflows using GitHub Actions and Microsoft Azure._
1414
</header>
1515

1616
<!--
17-
<<< Author notes: Step 2 >>>
17+
<<< Author notes: Step 3 >>>
1818
Start this step by acknowledging the previous step.
1919
Define terms and link to docs.github.com.
2020
-->
2121

22-
## Step 2: Set up an Azure environment
22+
## Step 3: Spin up an environment based on labels
2323

24-
_Good job getting started :gear:_
24+
_Nicely done! :heart:_
2525

26-
### Nice work triggering a job on specific labels
26+
GitHub Actions is cloud agnostic, so any cloud will work. We'll show how to deploy to Azure in this course.
2727

28-
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:
28+
**What are _Azure resources_?** In Azure, a resource is an entity managed by Azure. We'll use the following Azure resources in this course:
2929

30-
- [`actions/checkout`](https://github.com/actions/checkout)
31-
- [`actions/upload-artifact`](https://github.com/actions/upload-artifact)
32-
- [`actions/download-artifact`](https://github.com/actions/download-artifact)
33-
- [`docker/login-action`](https://github.com/docker/login-action)
34-
- [`docker/build-push-action`](https://github.com/docker/build-push-action)
35-
- [`azure/login`](https://github.com/Azure/login)
36-
- [`azure/webapps-deploy`](https://github.com/Azure/webapps-deploy)
30+
- A [web app](https://docs.microsoft.com/en-us/azure/app-service/overview) is how we'll be deploying our application to Azure.
31+
- A [resource group](https://docs.microsoft.com/en-us/azure/azure-resource-manager/management/overview#resource-groups) is a collection of resources, like web apps and virtual machines (VMs).
32+
- An [App Service plan](https://docs.microsoft.com/en-us/azure/app-service/overview-hosting-plans) is what runs our web app and manages the billing (our app should run for free).
3733

38-
### :keyboard: Activity 1: Store your credentials in GitHub secrets and finish setting up your workflow
34+
Through the power of GitHub Actions, we can create, configure, and destroy these resources through our workflow files.
3935

40-
1. In a new tab, [create an Azure account](https://azure.microsoft.com/en-us/free/) 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.
41-
> **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](https://education.github.com/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.
42-
1. Create a [new subscription](https://docs.microsoft.com/en-us/azure/cost-management-billing/manage/create-subscription) in the Azure Portal.
43-
> **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.
44-
1. Install [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) on your machine.
45-
1. In your terminal, run:
46-
```shell
47-
az login
48-
```
49-
1. 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:
50-
```shell
51-
No Subscription name Subscription ID Tenant
52-
----- ------------------- ------------------------------------ -----------------
53-
[1] * some-subscription f****a09-****-4d1c-98**-f**********c Default Directory
54-
```
55-
1. In your terminal, run the command below.
36+
### :keyboard: Activity 1: Set up a personal access token (PAT)
5637

57-
```shell
58-
az ad sp create-for-rbac --name "GitHub-Actions" --role contributor \
59-
--scopes /subscriptions/{subscription-id} \
60-
--sdk-auth
38+
Personal access tokens (PATs) are an alternative to using passwords for authentication to GitHub. We will use a PAT to allow your web app to pull the container image after your workflow pushes a newly built image to the registry.
6139

62-
# Replace {subscription-id} with the same id stored in AZURE_SUBSCRIPTION_ID.
63-
```
40+
1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.
41+
2. Create a personal access token with the `repo` and `write:packages` scopes. For more information, see ["Creating a personal access token."](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
42+
3. 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.
43+
4. With this done we can move on to setting up our workflow.
6444

65-
> **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.
66-
67-
1. Copy the entire contents of the command's response, we'll call this `AZURE_CREDENTIALS`. Here's an example of what it looks like:
68-
```shell
69-
{
70-
"clientId": "<GUID>",
71-
"clientSecret": "<GUID>",
72-
"subscriptionId": "<GUID>",
73-
"tenantId": "<GUID>",
74-
(...)
75-
}
76-
```
77-
1. Back on GitHub, click on this repository's **Secrets and variables > Actions** in the Settings tab.
78-
1. Click **New repository secret**
79-
1. Name your new secret **AZURE_SUBSCRIPTION_ID** and paste the value from the `id:` field in the first command.
80-
1. Click **Add secret**.
81-
1. Click **New repository secret** again.
82-
1. Name the second secret **AZURE_CREDENTIALS** and paste the entire contents from the second terminal command you entered.
83-
1. Click **Add secret**
84-
1. 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:
45+
**Configuring your Azure environment**
46+
47+
To deploy successfully to our Azure environment:
48+
49+
1. Create a new branch called `azure-configuration` by clicking on the branch dropdown on the top, left hand corner of the `Code` tab on your repository page.
50+
2. Once you're in the new `azure-configuration` branch, go into the `.github/workflows` directory and create a new file titled `spinup-destroy.yml` by clicking **Add file**. Copy and paste the following into this new file:
8551
```yaml
86-
name: Deploy to staging
52+
name: Configure Azure environment
8753

8854
on:
8955
pull_request:
9056
types: [labeled]
9157

9258
env:
9359
IMAGE_REGISTRY_URL: ghcr.io
60+
AZURE_RESOURCE_GROUP: cd-with-actions
61+
AZURE_APP_PLAN: actions-ttt-deployment
62+
AZURE_LOCATION: '"East US"'
9463
###############################################
9564
### Replace <username> with GitHub username ###
9665
###############################################
97-
DOCKER_IMAGE_NAME: <username>-azure-ttt
9866
AZURE_WEBAPP_NAME: <username>-ttt-app
99-
###############################################
10067

10168
jobs:
102-
build:
103-
if: contains(github.event.pull_request.labels.*.name, 'stage')
104-
69+
setup-up-azure-resources:
10570
runs-on: ubuntu-latest
106-
71+
if: contains(github.event.pull_request.labels.*.name, 'spin up environment')
10772
steps:
108-
- uses: actions/checkout@v4
109-
- uses: actions/setup-node@v4
110-
with:
111-
node-version: 16
112-
- name: npm install and build webpack
113-
run: |
114-
npm install
115-
npm run build
116-
- uses: actions/upload-artifact@v4
117-
with:
118-
name: webpack artifacts
119-
path: public/
120-
121-
Build-Docker-Image:
122-
runs-on: ubuntu-latest
123-
needs: build
124-
name: Build image and store in GitHub Container Registry
125-
steps:
126-
- name: Checkout
73+
- name: Checkout repository
12774
uses: actions/checkout@v4
12875

129-
- name: Download built artifact
130-
uses: actions/download-artifact@v4
76+
- name: Azure login
77+
uses: azure/login@v2
13178
with:
132-
name: webpack artifacts
133-
path: public
79+
creds: ${{ secrets.AZURE_CREDENTIALS }}
13480

135-
- name: Log in to GHCR
136-
uses: docker/login-action@v3
137-
with:
138-
registry: ${{ env.IMAGE_REGISTRY_URL }}
139-
username: ${{ github.actor }}
140-
password: ${{ secrets.CR_PAT }}
81+
- name: Create Azure resource group
82+
if: success()
83+
run: |
84+
az group create --location ${{env.AZURE_LOCATION}} --name ${{env.AZURE_RESOURCE_GROUP}} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
14185
142-
- name: Extract metadata (tags, labels) for Docker
143-
id: meta
144-
uses: docker/metadata-action@v5
145-
with:
146-
images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}
147-
tags: |
148-
type=sha,format=long,prefix=
86+
- name: Create Azure app service plan
87+
if: success()
88+
run: |
89+
az appservice plan create --resource-group ${{env.AZURE_RESOURCE_GROUP}} --name ${{env.AZURE_APP_PLAN}} --is-linux --sku F1 --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
14990
150-
- name: Build and push Docker image
151-
uses: docker/build-push-action@v5
152-
with:
153-
context: .
154-
push: true
155-
tags: ${{ steps.meta.outputs.tags }}
156-
labels: ${{ steps.meta.outputs.labels }}
91+
- name: Create webapp resource
92+
if: success()
93+
run: |
94+
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}}
15795
158-
Deploy-to-Azure:
96+
- name: Configure webapp to use GHCR
97+
if: success()
98+
run: |
99+
az webapp config container set --docker-custom-image-name nginx --docker-registry-server-password ${{secrets.CR_PAT}} --docker-registry-server-url https://${{env.IMAGE_REGISTRY_URL}} --docker-registry-server-user ${{github.actor}} --name ${{ env.AZURE_WEBAPP_NAME }} --resource-group ${{ env.AZURE_RESOURCE_GROUP }} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}}
100+
101+
destroy-azure-resources:
159102
runs-on: ubuntu-latest
160-
needs: Build-Docker-Image
161-
name: Deploy app container to Azure
103+
104+
if: contains(github.event.pull_request.labels.*.name, 'destroy environment')
105+
162106
steps:
163-
- name: "Login via Azure CLI"
107+
- name: Checkout repository
108+
uses: actions/checkout@v4
109+
110+
- name: Azure login
164111
uses: azure/login@v2
165112
with:
166113
creds: ${{ secrets.AZURE_CREDENTIALS }}
167114

168-
- uses: azure/docker-login@v1
169-
with:
170-
login-server: ${{env.IMAGE_REGISTRY_URL}}
171-
username: ${{ github.actor }}
172-
password: ${{ secrets.CR_PAT }}
115+
- name: Destroy Azure environment
116+
if: success()
117+
run: |
118+
az group delete --name ${{env.AZURE_RESOURCE_GROUP}} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}} --yes
119+
```
120+
1. Click **Commit changes...** and select `Commit directly to the azure-configuration branch.` before clicking **Commit changes**.
121+
1. Go to the Pull requests tab of the repository.
122+
1. There should be a yellow banner with the `azure-configuration` branch where you can click **Compare & pull request**.
123+
1. Set the title of the Pull request to: `Added spinup-destroy.yml workflow` and click `Create pull request`.
173124

174-
- name: Deploy web app container
175-
uses: azure/webapps-deploy@v3
176-
with:
177-
app-name: ${{env.AZURE_WEBAPP_NAME}}
178-
images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{ github.sha }}
125+
We will cover the key functionality below and then put the workflow to use by applying a label to the pull request.
179126

180-
- name: Azure logout via Azure CLI
181-
uses: azure/CLI@v2
182-
with:
183-
inlineScript: |
184-
az logout
185-
az cache purge
186-
az account clear
187-
```
188-
1. After you've edited the file, click **Commit changes...** and commit to the `staging-workflow` branch.
127+
This new workflow has two jobs:
128+
129+
1. **Set up Azure resources** will run if the pull request contains a label with the name "spin up environment".
130+
2. **Destroy Azure resources** will run if the pull request contains a label with the name "destroy environment".
131+
132+
In addition to each job, there's a few global environment variables:
133+
134+
- `AZURE_RESOURCE_GROUP`, `AZURE_APP_PLAN`, and `AZURE_WEBAPP_NAME` are names for our resource group, app service plan, and web app, respectively, which we'll reference over multiple steps and workflows
135+
- `AZURE_LOCATION` lets us specify the [region](https://azure.microsoft.com/en-us/global-infrastructure/regions/) for the data centers, where our app will ultimately be deployed.
136+
137+
**Setting up Azure resources**
138+
139+
The first job sets up the Azure resources as follows:
140+
141+
1. Logs into your Azure account with the [`azure/login`](https://github.com/Azure/login) action. The `AZURE_CREDENTIALS` secret you created earlier is used for authentication.
142+
1. Creates an [Azure resource group](https://docs.microsoft.com/en-us/azure/azure-resource-manager/management/overview#resource-groups) by running [`az group create`](https://docs.microsoft.com/en-us/cli/azure/group?view=azure-cli-latest#az-group-create) on the Azure CLI, which is [pre-installed on the GitHub-hosted runner](https://help.github.com/en/actions/reference/software-installed-on-github-hosted-runners).
143+
1. Creates an [App Service plan](https://docs.microsoft.com/en-us/azure/app-service/overview-hosting-plans) by running [`az appservice plan create`](https://docs.microsoft.com/en-us/cli/azure/appservice/plan?view=azure-cli-latest#az-appservice-plan-create) on the Azure CLI.
144+
1. Creates a [web app](https://docs.microsoft.com/en-us/azure/app-service/overview) by running [`az webapp create`](https://docs.microsoft.com/en-us/cli/azure/webapp?view=azure-cli-latest#az-webapp-create) on the Azure CLI.
145+
1. Configures the newly created web app to use [GitHub Packages](https://help.github.com/en/packages/publishing-and-managing-packages/about-github-packages) by using [`az webapp config`](https://docs.microsoft.com/en-us/cli/azure/webapp/config?view=azure-cli-latest) on the Azure CLI. Azure can be configured to use its own [Azure Container Registry](https://docs.microsoft.com/en-us/azure/container-registry/), [DockerHub](https://docs.docker.com/docker-hub/), or a custom (private) registry. In this case, we'll configure GitHub Packages as a custom registry.
146+
147+
**Destroying Azure resources**
148+
149+
The second job destroys Azure resources so that you do not use your free minutes or incur billing. The job works as follows:
150+
151+
1. Logs into your Azure account with the [`azure/login`](https://github.com/Azure/login) action. The `AZURE_CREDENTIALS` secret you created earlier is used for authentication.
152+
1. Deletes the resource group we created earlier using [`az group delete`](https://docs.microsoft.com/en-us/cli/azure/group?view=azure-cli-latest#az-group-delete) on the Azure CLI.
153+
154+
### :keyboard: Activity 2: Apply labels to create resources
155+
156+
1. Edit the `spinup-destroy.yml` file in your open pull request and replace any `<username>` placeholders with your GitHub username. Commit this change directly to the `azure-configuration` branch.
157+
1. Back in the Pull request, create and apply the `spin up environment` label to your open pull request
158+
1. Wait for the GitHub Actions workflow to run and spin up your Azure environment. You can follow along in the Actions tab or in the pull request merge box.
189159
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
190160

191161
<footer>

0 commit comments

Comments
 (0)