I am interested in Cloud technology and Infrastructure as a code so I go over many interesting websites related to cloud competencies development. One of the awesome pages is acloudguru.com.

Gwyneth Peña S. has announced a new cloud challenge called Your resume in Azure. Official Challenge link.

So it sounded good to me and I wanted to know more about it. I started reading the article and I saw technologies: GitHub repository, GitHub actions, Azure Blob storage, Azure CDN, Azure Functions, CosmosDB, and so on. Pretty nice...

Digram of application:

At first, I had to analyze my strengths and weaknesses

Strengths: DNS, custom domains, Azure portal, static websites (HTML, CSS, JavaScript), GitHub repository...

Weaknesses: Github Ci/CD, Azure Functions, CosmoDB.

I set a strategy, to start with strengths and after done, do some tests of weakness technologies.

1. Create a GitHub repository github.com/Radossus/CloudGuruChallenge-Resu...
2. Static website development - Visual Studio Code IDE, Bootstrap CSS framework, and coding
3. Deployment Azure Storage with a static website- Nice article docs.microsoft.com/en-us/azure/storage/blob.. I went over the article and deployed an easy index.html page for testing. Microsoft article describes mapping a custom domain to a static website URL as well. I have my own domain radek-slachta.com that I mapped to a static website as cname DNS attribute.
4. Enable HTTPS and custom domain support Security is security, I had to set HTTPS to my site. Useful Microsoft article is docs.microsoft.com/en-us/azure/storage/blob...

Many things are done but my resume still isn't in storage. I had to continue and start with weaknesses.

1. Github Ci/CD - uploading action to Azure Storage. This task wasn't so easy for me, I started finding some resources about uploading files to Azure blob storage and I found one github.com/bacongobbler/azure-blob-storage-...

name: Upload To Azure Blob Storage
on:
  push:
    branches:
      - master
jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: bacongobbler/azure-blob-storage-upload@v1.1.1
        with:
          source_dir: _dist
          container_name: www
          connection_string: ${{ secrets.ConnectionString }}
          extra_args: '--pattern *.tar.gz'
          sync: false

I didn't understand what exactly is source_dir: _dist.

I have a bit straggled with it and I tried to create a folder with the name front and with file test.txt. I set source_dir: front. After this change, file text.txt has been uploaded to Azure storage. I've reorganized my code and moved all files to the front folder. All static files have been uploaded to storage.

My GitHub action:

name: Upload To Azure Blob Storage
on:
  push:
    branches:
      - main
jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: bacongobbler/azure-blob-storage-upload@v1.1.1
        with:
          source_dir: 'front'
          container_name: '$web'
          connection_string: ${{ secrets.ConnectionString }}
          sync: true

My site is alive in Azure storage!

CosmosDB and Azure Functions

I' haven't challenge finished yet, right? Yes... it is time to start analyzing CosmosDB and Azure Function. lSome Youtube tutorials helped me to understand the concept of CosmosDB and Azure Functions.

Akande Bolaji has already taken the same challenge and so there is an inspiration on how to set CosmosDB and Azure Functions dev.to/therealbolaji/creating-a-serverless-... Thanks for the detailed article!

I did some Azure tests regarding Azure Functions connected to CosmosDB. Everything has been set with Azure portal so I could not use GitHub for it.

I installed Visual Studio Code extension and analyzed code from Azure Portal. I've written a second testing code directly in Visual Code.

GitHub action for Azure Function deployment

Next challenge has been related to GitHub action again. How can I deploy my Azure Function with CI/CD pipeline?

There is my GitHub action:

name: Build and Deploy Azure function

on:
  push:
    branches: 
        main

#Configuration
env:
  AZURE_FUNCTIONAPP_PACKAGE_PATH: 'backend'

jobs:

  build:

    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Use Node.js
      shell: bash
      run: |
        pushd '${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}'
        npm install
        npm run test --if-present
        npm test

    - name: Publish Azure Functions
      uses: Azure/functions-action@v1.3.2
      with:
        # Name of the Azure Function App
        app-name: Resume Page Counter
        # Path to package or folder. *.zip or a folder to deploy
        package: backend
        publish-profile: ${{ secrets.PUBLISH_PROFILE }}

Magic around PUBLISH_PROFILE. This article describes how to get publish profile and how to configure the repository. It is the same setting for Azure Function deployment.

Website counter works based on Azure Function and CosmosDB but it isn't implemented to the website, right? I think it is piece of cake.

Visitors counter <span id="counter" class="badge badge-light m-1"> </span>

<script>
    const apiAzureFunction = "https://resume-challenge-app.azurewebsites.net/api/HttpTrigger-Page-Counter?code=YOUR CODE"

    document.addEventListener("DOMContentLoaded", function(){

        fetch(apiAzureFunction, {
           mode: 'cors', 
       })
       .then(response => {
           return response.json()
       })
       .then(res => {
           const count = res;
           $('#counter').text(count)
       })

    });
</script>

Well done! Everything works as expected, take a break and enjoy coffee...

If you want to see the results, here are links:

• GitHub repository
• Resume website

I am looking for a new cloud challenge!