Skip to content

Latest commit

 

History

History
183 lines (137 loc) · 5.89 KB

README.md

File metadata and controls

183 lines (137 loc) · 5.89 KB
Raw

Exercise 3 - Deploying the app to the cloud

📖 In this exercise we are going to use the 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.

✏️ Open https://nerdschool-vending-machine.vercel.app/ and follow the instructions to receive an API-token via e-mail.

❗❗ 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 file main.yml inside the ./github/workflows directory and add the following content.

name: Build and deploy

on: [push]

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

      - name: Archive artifacts
        uses: actions/upload-artifact@v4
        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@v4
+       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@v4
      
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22.x
      - run: npm ci
      - run: npm run build
      - run: npm run lint
      - run: npm run test

      - name: Archive artifacts
        uses: actions/upload-artifact@v4
        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@v4
        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.

Making a change to the app

✏️ Go to the code/index.html file and make a change to the file. E.g. you can change the heading of the page. Push the change to Github, and see that the change is deployed to the live webpage after the Action has completed.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/style.css">
    <title>My Page</title>
  </head>
  <body>
    <div class="clock-container">
-     <h1>🕑</h1>
+     <h1>Welcome to my amazing time app</h1>

      <span>Current time</span>
      <h2 id="time"></h2>

      <span>Seconds left of year</span>
      <h2 id="seconds-left"></h2>

    </div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

Go to exercise 4 ➡️