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

• GitHub account
• Azure account
• Azure CLI
• .NET Core 3.1 LTS
• Azure Functions Core Tools
• Visual Studio Code
• Visual Code Extensions
  • Azure Functions Extensions
  • C# Extension
  • Azure Storage Extension

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.

• Create a Cosmos DB account via command line or from the portal.
• Create an HTTP triggered Azure Function in Visual Studio Code.
• Azure Functions Cosmos DB bindings
• Retrieve a Cosmos DB item with Functions binding.
• Write to a Cosmos DB item with Functions binding.
• You'll have to enable CORS with Azure Functions locally and once it's deployed to Azure for you website to be able to call it.
• Cross-Origin Resource Sharing (CORS) is an HTTP feature that enables a web application running under one domain to access resources in another domain. Web browsers implement a security restriction known as same-origin policy that prevents a web page from calling APIs in a different domain. CORS provides a secure way to allow one domain (the origin domain) to call APIs in another domain. Once you set the CORS rules for your Azure Cosmos account, a properly authenticated request made to the service from a browser client will be evaluated to determine whether it is allowed according to the rules you have specified. Specify a comma-separated list of origins that will be allowed to make cross-origin calls to your Cosmos DB account.

CI/CD Resources

• Anytime you want to make changes to your website or to your API, those changes can be automatically deployed using GitHub actions.
• This is how you can deploy a blob storage static site with GitHub actions.
• This is how you can deploy an Azure Function to Azure with GitHub Actions.
• Implement .NET testing in GitHub Actions.

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