eh0wey's Blog

A Cloud Guru - Azure Resume Challenge

A Cloud Guru - Azure Resume Challenge

First, why did I take on this challenge?

I took on this challenge because it interested me. I've been wanting to get more hands on with cloud technologies and I saw this as an awesome opportunity to get started. I really wanted to get into something that put me in a position to push myself and a challenge where I could learn concepts and cloud skills. I work better with hands on approaches versus studying concepts from a book and this was a perfect fit. I really had fun with this one! Here are some resources and steps that helped me create and finish the project some of which I got from acloudguru's original post.

My Azure-Resume --->View it live here

Link to original #acloudguru challenge post here

Prerequisites

Front-end resources

The front-end is a static site with HTML, CSS, and JavaScript. It's static and has a visitor counter. The visitor counter data fetched via an API call to an Azure Function.

  • I used a template to create my site since the focus of this project wasn't around web design and development.
  • This article explains well and in a simple way how to use it to make an API call.
  • For the API, I created a serverless one with an HTTP trigger.
  • Below is an example of the JavaScript code I wrote that needed to interact with a database via an API and add a visitors counter to the website. Note: Don't forget to add the main.js script to the index.html file. At one point during the challenge I couldn't understand why my counter wasn't displaying below was the trick.
<script src="main.js"></script>
window.addEventListener('DOMContentLoaded', (event) =>{
    getVisitCount();
})

const functionApiUrl = 'https://exampleuser.me.azure/api/?GetResumeCounter=*';
const localFunctionApi = 'http://localhost:7071/api/GetResumeCounter';

const getVisitCount = () => {
    let count = 30;
    fetch(functionApiUrl).then(response => {
        return response.json();
    }).then(response => {
        console.log("Website called function API.");
        count = response.count;
        document.getElementById("counter").innerText = count;
    }).catch(function(error){
        console.log(error);
    });
    return count;
}
  • Deploy the website to Azure Blob storage and enable HTTPS and custom domain support.
  • Point your custom domain to your static website and make sure HTTPS is enabled. You can do this with Azure CDN.
  • This is how you can deploy static site to blob storage.

Back-end resources

The back-end is an HTTP triggered Azure Functions with Cosmos DB input and output binding. The Function is triggered, it retrieves the CosmosDB item, adds 1 to it, and saves it and returns its value to the caller.

CI/CD Resources

Issues!

  • I ran into one issue with getting the Azure API function to work in production. I was getting a "Error: Azure Functions Runtime is unreachable(service unavailable)" when trying to run the (localFunctionApi) for testing and I found this doc below helpful to work through it. I believe I had the wrong connection string from my storage accounts Azure keys. https://docs.microsoft.com/en-us/azure/azure-functions/functions-recover-storage-account
#azure#cloud#javascript#functions#apis
 
Share this