Azure Cloud Resume Challenge

Jordan Mccowan — Wed, 24 Jul 2024 20:04:45 +0000

In the ever-evolving world of technology, standing out as a professional requires not only theoretical knowledge but also Hands-on experience.
The Cloud Resume Challenge offers a unique opportunity to showcase these skills by building and deploying a fully functional, cloud-based resume website. In this article, I will walk you through my journey of completing the Cloud Resume Challenge using Microsoft Azure.
From setting up a static website and implementing a visitor counter with Azure Functions, to Implementing CI/CD Automation with GitHub Actions and securing a custom domain with HTTPS, this challenge not only enhanced my technical expertise but also demonstrated my ability to solve real-world problems using cloud technologies.

HTML/CSS

Staring this Section out, I am nowhere near a Web Developer so I found my Template from HTML5up and started tweaking the template within Visual Studio Code.

Tweaking the code, I wanted to view the changes I made as I progressed, and in my research, I found the Live Server VSC Extension to deploy the site Locally and edited the Code to my liking. (PS. If you are unsure how to edit HTML & CSS for the creation of the website, ChatGPT or Copilot are great resources to use to not only gain the knowledge, but implement it's recommendations to learn how to interact with these resources.)

Static Website

With my index.html file ready and styled to my liking, the next step was to deploy it as a static website on Azure. To achieve this, I created an Storage Account specifically configured to host static websites. Azure Storage provides a robust and scalable solution for hosting static content, ensuring that my resume website would be highly available and performant. Within the storage account, I enabled static website hosting and uploaded my index.html & it's assets to the designated $web container. This container acts as the root directory for the static website, allowing Azure to serve my resume directly to users.

DNS/HTTPS

Using Azure DNS Zone, I was able to implement a Custom Domain for my site for a better user experience. I achieved this by purchasing my domain from NameCheap configuring the DNS Zone with this Article

After configuring the Domain, the next essential step was to secure it with HTTPS. To achieve this, I utilized Azure's Content Delivery Network (CDN) service. I did this by linking a CDN Endpoint to my Static Site URL as its Origin. Once Complete I was able to point to my custom domain to this endpoint. For SSL Encryption to use HTTPS I used a Certificate from ZeroSSL and Imported the .pfx file into Azure Key vault and linked the Certificate to the Domain.

Database

For the Visitor Counter, I chose Azure CosmosDb for Table as it is ideal for storing structured, non-relational data, making it a perfect fit for tracking simple metrics like tracking Visitors to my Site.

API

This was without a doubt the most Painful / Rewarding part of this challenge, I don't even want to think about the amount of time I put in to complete this Section.

I went about this by reviewing the QuickStart Guide to setup my VSC to work with Python HTTP Triggers. After I used Python tables Package to call my CosmosDB Table. Lastly, I used This Article to understand how to call my CosmosDbConnectionSetting Variable within local.settings.

import azure.functions as func

app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS)

@app.route(route="http_trigger")

def main(req: func.HttpRequest) -> func.HttpResponse:

    import logging
    from azure.data.tables import TableClient, UpdateMode
    import os

    logging.info('Python HTTP trigger function processed a request.')

    conn_str = os.getenv("CosmosDbConnectionSetting")
    table_client = TableClient.from_connection_string(conn_str=conn_str, table_name="Visitors")
    entity = table_client.get_entity(partition_key="PageViewCount", row_key='1')
    entity['Count'] += 1
    table_client.update_entity(mode=UpdateMode.REPLACE, entity=entity)

    return func.HttpResponse(f"{entity['Count']}")

Javascript

To make the visitor counter functional and dynamic, integrating JavaScript into my index.html was the next step in this process. JavaScript enabled me to fetch and display the visitor count in real-time, enhancing the interactivity of my resume website. I wrote a script that made an request to the Function URL which triggered the Python Function listed in the previous section.

const counter = document.querySelector(".counter-number");
async function updateCounter() {
    let response = await fetch(<"Function URL">);
    let data = await response.json();
    counter.innerHTML = ` Views: ${data}`;
}

updateCounter();

I reference this code in my HTML by doing the following:

<li><div class="counter-number"></div></li>
<script src="Path to JavaScript"></script>

Source Control / Infrastructure as Code

Source control played a pivotal role in managing the development and deployment of my Cloud Resume Challenge project. By using GitHub, I ensured that all changes to my project files were tracked, versioned, and easily revertible if needed. I created a repository named Azure_Cloud_Resume_Project, where I stored my index.html, CSS files, JavaScript scripts, and infrastructure as code (IaC) configurations.

For the IaC, I have the ARM Templates for the resources I deployed and created a baseline so if I need to rollback or make edits, I can do so using code.
I plan to expand this section in the future using Terraform.

CI/CD

Implementing Continuous Integration and Continuous Deployment (CI/CD) was an interesting part of the Challenge to simplify my deployment when I decide to make changes in the future. I utilized GitHub Actions to create a CI/CD pipeline, which streamlined the process of deploying changes from my GitHub repository to Azure. The pipeline was configured to trigger on every push to the main branch, running a series of actions that included validating the HTML, CSS, and JavaScript, logging in as a dedicated Service Principal account, and deploying the updated files to my Storage Account.
I also added code to the action to Purge the CDN Endpoint to retrieve the latest code and display as expected to my viewers.

Budget & Final Thoughts

The Cost of this Project using Serverless For CosmosDB & Azure Functions You can expect the Cost per month to be under $1 as is and it may vary depending how many request are generated to your site but in such case I would Highly recommend setting up Cost Alerts to monitor the Azure Spend and adjust accordingly.

The Domain was purchased under $10 from Namecheap and in the future I do Plan to implement a SSL Certificate once the ZeroSSL Certificate expires which should cost around $10-$15.

To wrap it up, As someone who uses Azure Daily for work, This Project provide me with a better insight into the services I support for clients and was indeed a Challenge. I look to expand on this in terms of Security and Terraform for IaC and will provide updates accordingly. I recommend anyone interested in Cloud either early in their career or looking to expand their knowledge to take on the challenge to put themselves to the test.

Here are the Links to my Resume Site, Github Repo, & my Linkedin. Feel free to reach out if you have any questions as I am happy to help!

Forem: Jordan Mccowan