Skip to content

Latest commit

 

History

History
151 lines (113 loc) · 5.02 KB

README.md

File metadata and controls

151 lines (113 loc) · 5.02 KB
Raw

Exercise 3 - Deploying the app to the cloud

📖 In this exercise we are going to use Azure Static Web Apps cloud service to deploy our application and make it available publicly on the internet.

You will learn:

  • How to configure the API-token needed for deploy using GitHub Secrets
  • Create a new deployment pipeline for automating web app deployment

3.1 Azure secret setup

📖 To avoid having to register an Azure account, we have prepared a an Azure environment where you can deploy your application.

✏️ Ask an instructor to provide you with a secret Azure API-token and a URL of the web application, if you haven't received it already.

❗❗ Do not share the Azure API-token with anyone else or commit it to the repository. ❗❗

📖 In order to deploy your application, you will need to make use of the API-token you received in order to gain deploy access to the Azure environment.

3.1.1 Adding the API-token secret as an GitHub Actions secret

📖 In order to avoid commiting your personal Azure API-token to your git repository (seriously, do NOT this!), we will store the API-token as a secret on GitHub. GitHub Actions secrets are environment variables that are encrypted.

✏️ Open the main page for your GitHub repository and select Settings

✏️ Select Secrets in the left hand menu, under Security, then Actions.

✏️ Select New repository secret

✏️ Set Name to AZURE_STATIC_WEB_APPS_API_TOKEN and Secret to your personal Azure API-token.

✏️ Select Add secret to save the Actions secret.

Deploying the app to Azure using GitHub Actions

📖 To automatically deploy our web app to Azure when we push new commits to GitHub, we will create a new GitHub Actions workflow job.

✏️ Open the main.yaml inside the ./github/workflows directory with the following contents.

name: Build and deploy

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./code
    steps:
      - uses: actions/checkout@v3
      
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - run: npm ci
      - run: npm run build
      - run: npm run lint
      - run: npm run test

      - name: Archive artifacts
        uses: actions/upload-artifact@v3
        with:
          name: artifact
          path: ./code/dist

+ deploy:
+   runs-on: ubuntu-latest
+   name: Deploy application to Azure Static Websites
+   needs: build
+   steps:
+     - name: Get artifact from build step
+       uses: actions/download-artifact@v3
+       with:
+         name: artifact
+     - name: Deploy
+       id: deploy
+       uses: Azure/static-web-apps-deploy@v1
+       with:
+         azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+         action: "upload"
+         app_location: "."
Click to view the file without the diff syntax 
name: Build and deploy

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./code
    steps:
      - uses: actions/checkout@v3
      
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - run: npm ci
      - run: npm run build
      - run: npm run lint
      - run: npm run test

      - name: Archive artifacts
        uses: actions/upload-artifact@v3
        with:
          name: artifact
          path: ./code/dist

  deploy:
    runs-on: ubuntu-latest
    name: Deploy application to Azure Static Websites
    needs: build
    steps:
      - name: Get artifact from build step
        uses: actions/download-artifact@v3
        with:
          name: artifact
      - name: Deploy
        id: deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "upload"
          app_location: "."

✏️ Let's have a look at what this workflow job does:

  • The step Get artifact from build step will download the artifact file from our build step and make its content available in the file system of the action runner.
  • It uses a premade Action called Azure/static-web-apps-deploy to deploy the artifact to Azure using the AZURE_STATIC_WEB_APPS_API_TOKEN as API-token.

✏️ Git commit and push these changes.

✏️ Open up the Actions tab on your main repository page on GitHub to view the result of the deployment job.

✏️ After the job completes succesfully, open up the URL you received from an instructor to see.

✏️ Did the workflow run fail ❌? Try reading the error message and figure out what´s wrong. Ask an instructor if you are stuck.

Go to exercise 4 ➡️