|
| 1 | +<!-- |
| 2 | + <<< Author notes: Step 2 >>> |
| 3 | + Start this step by acknowledging the previous step. |
| 4 | + Define terms and link to docs.github.com. |
| 5 | +--> |
| 6 | + |
| 7 | +## Step 2: Set up an Azure environment |
| 8 | + |
| 9 | +_Good job getting started :gear:_ |
| 10 | + |
| 11 | +### Nice work triggering a job on specific labels |
| 12 | + |
| 13 | +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: |
| 14 | + |
| 15 | +- [`actions/checkout`](https://github.com/actions/checkout) |
| 16 | +- [`actions/upload-artifact`](https://github.com/actions/upload-artifact) |
| 17 | +- [`actions/download-artifact`](https://github.com/actions/download-artifact) |
| 18 | +- [`docker/login-action`](https://github.com/docker/login-action) |
| 19 | +- [`docker/build-push-action`](https://github.com/docker/build-push-action) |
| 20 | +- [`azure/login`](https://github.com/Azure/login) |
| 21 | +- [`azure/webapps-deploy`](https://github.com/Azure/webapps-deploy) |
| 22 | + |
| 23 | +### :keyboard: Activity 1: Store your credentials in GitHub secrets and finish setting up your workflow |
| 24 | + |
| 25 | +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. |
| 26 | + > **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. |
| 27 | +1. Create a [new subscription](https://docs.microsoft.com/en-us/azure/cost-management-billing/manage/create-subscription) in the Azure Portal. |
| 28 | + > **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. |
| 29 | +1. Install [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) on your machine. |
| 30 | +1. In your terminal, run: |
| 31 | + ```shell |
| 32 | + az login |
| 33 | + ``` |
| 34 | +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: |
| 35 | + ```shell |
| 36 | + No Subscription name Subscription ID Tenant |
| 37 | + ----- ------------------- ------------------------------------ ----------------- |
| 38 | + [1] * some-subscription f****a09-****-4d1c-98**-f**********c Default Directory |
| 39 | + ``` |
| 40 | +1. In your terminal, run the command below. |
| 41 | + |
| 42 | + ```shell |
| 43 | + az ad sp create-for-rbac --name "GitHub-Actions" --role contributor \ |
| 44 | + --scopes /subscriptions/{subscription-id} \ |
| 45 | + --sdk-auth |
| 46 | +
|
| 47 | + # Replace {subscription-id} with the same id stored in AZURE_SUBSCRIPTION_ID. |
| 48 | + ``` |
| 49 | + |
| 50 | + > **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. |
| 51 | + |
| 52 | +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: |
| 53 | + ```shell |
| 54 | + { |
| 55 | + "clientId": "<GUID>", |
| 56 | + "clientSecret": "<GUID>", |
| 57 | + "subscriptionId": "<GUID>", |
| 58 | + "tenantId": "<GUID>", |
| 59 | + (...) |
| 60 | + } |
| 61 | + ``` |
| 62 | +1. Back on GitHub, click on this repository's **Secrets and variables > Actions** in the Settings tab. |
| 63 | +1. Click **New repository secret** |
| 64 | +1. Name your new secret **AZURE_SUBSCRIPTION_ID** and paste the value from the `id:` field in the first command. |
| 65 | +1. Click **Add secret**. |
| 66 | +1. Click **New repository secret** again. |
| 67 | +1. Name the second secret **AZURE_CREDENTIALS** and paste the entire contents from the second terminal command you entered. |
| 68 | +1. Click **Add secret** |
| 69 | +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: |
| 70 | + ```yaml |
| 71 | + name: Deploy to staging |
| 72 | +
|
| 73 | + on: |
| 74 | + pull_request: |
| 75 | + types: [labeled] |
| 76 | +
|
| 77 | + env: |
| 78 | + IMAGE_REGISTRY_URL: ghcr.io |
| 79 | + ############################################### |
| 80 | + ### Replace <username> with GitHub username ### |
| 81 | + ############################################### |
| 82 | + DOCKER_IMAGE_NAME: <username>-azure-ttt |
| 83 | + AZURE_WEBAPP_NAME: <username>-ttt-app |
| 84 | + ############################################### |
| 85 | +
|
| 86 | + jobs: |
| 87 | + build: |
| 88 | + if: contains(github.event.pull_request.labels.*.name, 'stage') |
| 89 | +
|
| 90 | + runs-on: ubuntu-latest |
| 91 | +
|
| 92 | + steps: |
| 93 | + - uses: actions/checkout@v4 |
| 94 | + - uses: actions/setup-node@v4 |
| 95 | + with: |
| 96 | + node-version: 16 |
| 97 | + - name: npm install and build webpack |
| 98 | + run: | |
| 99 | + npm install |
| 100 | + npm run build |
| 101 | + - uses: actions/upload-artifact@v4 |
| 102 | + with: |
| 103 | + name: webpack artifacts |
| 104 | + path: public/ |
| 105 | +
|
| 106 | + Build-Docker-Image: |
| 107 | + runs-on: ubuntu-latest |
| 108 | + needs: build |
| 109 | + name: Build image and store in GitHub Container Registry |
| 110 | + steps: |
| 111 | + - name: Checkout |
| 112 | + uses: actions/checkout@v4 |
| 113 | +
|
| 114 | + - name: Download built artifact |
| 115 | + uses: actions/download-artifact@v4 |
| 116 | + with: |
| 117 | + name: webpack artifacts |
| 118 | + path: public |
| 119 | +
|
| 120 | + - name: Log in to GHCR |
| 121 | + uses: docker/login-action@v3 |
| 122 | + with: |
| 123 | + registry: ${{ env.IMAGE_REGISTRY_URL }} |
| 124 | + username: ${{ github.actor }} |
| 125 | + password: ${{ secrets.CR_PAT }} |
| 126 | +
|
| 127 | + - name: Extract metadata (tags, labels) for Docker |
| 128 | + id: meta |
| 129 | + uses: docker/metadata-action@v5 |
| 130 | + with: |
| 131 | + images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}} |
| 132 | + tags: | |
| 133 | + type=sha,format=long,prefix= |
| 134 | +
|
| 135 | + - name: Build and push Docker image |
| 136 | + uses: docker/build-push-action@v5 |
| 137 | + with: |
| 138 | + context: . |
| 139 | + push: true |
| 140 | + tags: ${{ steps.meta.outputs.tags }} |
| 141 | + labels: ${{ steps.meta.outputs.labels }} |
| 142 | +
|
| 143 | + Deploy-to-Azure: |
| 144 | + runs-on: ubuntu-latest |
| 145 | + needs: Build-Docker-Image |
| 146 | + name: Deploy app container to Azure |
| 147 | + steps: |
| 148 | + - name: "Login via Azure CLI" |
| 149 | + uses: azure/login@v2 |
| 150 | + with: |
| 151 | + creds: ${{ secrets.AZURE_CREDENTIALS }} |
| 152 | +
|
| 153 | + - uses: azure/docker-login@v1 |
| 154 | + with: |
| 155 | + login-server: ${{env.IMAGE_REGISTRY_URL}} |
| 156 | + username: ${{ github.actor }} |
| 157 | + password: ${{ secrets.CR_PAT }} |
| 158 | +
|
| 159 | + - name: Deploy web app container |
| 160 | + uses: azure/webapps-deploy@v3 |
| 161 | + with: |
| 162 | + app-name: ${{env.AZURE_WEBAPP_NAME}} |
| 163 | + images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{ github.sha }} |
| 164 | +
|
| 165 | + - name: Azure logout via Azure CLI |
| 166 | + uses: azure/CLI@v2 |
| 167 | + with: |
| 168 | + inlineScript: | |
| 169 | + az logout |
| 170 | + az cache purge |
| 171 | + az account clear |
| 172 | + ``` |
| 173 | +1. After you've edited the file, click **Commit changes...** and commit to the `staging-workflow` branch. |
| 174 | +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. |
0 commit comments