Hey Guys!
Today's blog is covering a challenge. Yep, presented by A Cloud Guru! In this challenge, you are to build a resume.
Seems simple enough, right? If only...
Lets get started:
A Cloud Guru Presents: "Azure Cloud Resume Challenge of 2021"
The challenge was dropped by none other than Gwyneth Pena-Siguenza over at A Cloud Guru. The challenge required you to create a hundred percent Azure-hosted version of your resume. Part of the requirements is to build it in HTML or CSS, create a JavaScript code with a API that interacts with a database. The website must be hosted in Azure Blob Storage, must have enabled HTTPS and custom domain support and finally, must have Github Actions running.
website: https://acloudguru.com/blog/engineering/cloudguruchallenge-your-resume-in-azure?utm_source=discord&utm_medium=social&utm_campaign=cloudguruchallenge
Why take the challenge
Currently, work in AWS as a consultant and manager service provider at the company I work for. I have little experience with Azure Cloud and felt that this challenge was a great way to build my skills in Azure. I'm also someone that is continuing to learn upon DevOps and scripting skills, so I felt this was a great opportunity to build on those skillsets as well.
Completing the Challenge
Having never worked in Azure, I completed this challenge by first understanding the Azure Environment. I took the AZ-900 Azure Fundementals course in A Cloud Guru and found similiarities between Azure and AWS. I also went ahead and took the certification exam and passed it.
After doing this, I had a basic understanding of the components within Azure.
I started off first by creating myself a Resource Group where all of my services would reside in. Next, I broke down the services I would need to complete the challenge. I broke this down between the backend counter and frontend website.
Backend - Visitcount Counter:
- CosmosDB (Serverless, NOSQL database)
- Azure Functions (Node.js, LTS 12)
- API Gateway
- Script (node.js)
Frontend - Website
- HTML/CSS
- Blob Storage
- CDN
- Domain
- DNS
Backend - Visitcount Counter
CosmosDB
For this challenge, I chose to use CosmosDB. Cosmos DB is a serverless, NOSQL database that is simple to use and easy to configure. The challenge did not require anything overly complex, such as MongoDB, postgresql or MySQL.
CosmosDB does require some understanding on how to be deployed. First, I need to create the CosmosDB Account. This will identify what type of API (Core (SQL), Azure COsmosDB for MOngoDB APi, Cassandra, Azure Table, Gremlin) you will be using, Capacity mode (Provisioned throughput, serverless) and other options.
For API, I used Core SQL and for Capacity mode, I chose Serverless.
After creating the account, you'll needed to create the database. To do this, you'll need to create a Container. At the time of creating the container, you will need to give a name for the database id, container id and partition key.
After creating the container and database, you will need to create a Item within the database.
New Item:
{
id:"id name",
count: 0
}
And that is it
Azure Functions
For Azure Functions, I decided to create a very basic script using node.js, LTS 12. Creating a Function is not straight forward and does require some research.
I created the Function within Portal over using Visual Studio Code or CLI. I found working with VSC and CLI was difficult and for this challenge, the visualization with Integration and manual adding/adjusting the Code in Code+Test was easier.
When creating the function, you can give identify the runtime stack and verison. In this case, I used node.js and 12 LTS. This will create the basic function account where your function will live. I used HTTP Trigger and for authorization level, used anonymous.
After creating the function, Inputs and outputs had to be added. To this, I went through the Integration section of my script. I created a Input and output to CosmosDB databse I created earlier.
Scripts
For the script, I used a basic js script to count.
Code Deployed:
module.exports = async function (context, req, data) {
context.log('JavaScript HTTP Trigger function processed a request.');
context.bindings.outputDocument = data[0];
context.bindings.outputDocument.count += 1;
context.res = {
body: data[0].count
};
}
API Gateway
With Azure Functions, there isn't a need to create a API Gateway. In the Code + Test, there is a Get Function URL button. With this URL, we can add it to a main.js script for the frontend to call on the API.
FrontEnd - Website
HTML/CSS
For this challenge, I used a template CSS with slight modifications to the css code
Blob Storage
CDN
Your CDN Endpoints will live in a CDN profile. You will create a new CDN Profile, giving it a name and selecting the pricing tier. During profile creation, you can also create the CDN endpoint with its origin and origin hostname.
After this is created, then it is setting up a custom domain.
Domain, DNS and SSL Certificate
I own the domain connaker.org. With Azure, there isn't a need to do any certificate management as this will be handled by the CDN. Your first step will be to add the endpoint hostname as a CNAME record to the subdomain you wish to use (such as acgarc). Once this is created, you can go to the CDN you created earlier, click on it and add a custom domain. my custom domain is acgarc.connaker.org. Azure DNS should recongize this from the CNAME. After that, you can set it up to allow HTTPS on custom domains, create a CDN managed Certificate using TLS 1.2. Azure CDN will the create a certificate for you.
What was the Hardest Part
The hardest part for this challenge was configuring the Azure Functions. It was difficult as I have no practical experience or knoweldge in creating custom scripts. I also tried to complete the challenge using Visual Studio Code and had a lot of issues. I originally tried using Gwyn's C# code and found it difficult to modify and update to my needs.
Settling on a simple node.js script file was the easier solution. Secondly was using Portal to create the integrations and adding the Code block.
Which Part did I enjoy?
I enjoyed everything about this. It was fun diving and working on these particular services from scratch.
My Submission
website: https://acgarc.connaker.org
github: https://github.com/mconnaker/Azurechallenge
diagram:
