Welcome to my Cloud Resume Challenge for Azure project! ☁️
Are you ready to embark on an exciting journey into the world of cloud computing with Microsoft Azure? I sure was! After nearly a decade in various IT roles, I felt the need to evolve with the rapidly changing tech landscape, especially the shift towards the cloud.
Initially, I dipped my toes into AWS, but quickly realized I needed a more gradual entry point. That's when Azure caught my attention. I decided to start from the fundamentals and earned my AZ-900 Azure Fundamentals certification in July 2023. After taking a well-deserved break, I committed myself to the Cloud Resume Challenge for Azure.
Over the course of two intense weekends, totaling around 30-40 hours (including some weeknight sessions), I poured my heart and soul into this project. If you're just beginning this challenge, my advice is simple: take your time, absorb the material thoroughly, and document your progress meticulously. Most importantly, relish every moment of this transformative journey.
Whether you're a seasoned pro or a newbie to Azure, I hope my project inspires and helps you on your own cloud computing adventure. Let's dive in together!
- Configure a Static Website via Azure Storage with a custom domain and HTTP
- Write your resume in HTML and formatting it with CSS
- Setup Azure Storage account and enable Static Website
- Configure GitHub Actions for CI/CD with Azure Storage
- Enable CDN for HTTPS access to your website and custom domain
- Use Azure Functions App to interact with CosmosDB API to update a visitor counter
- Write javascript to capture the result of the visitor counter function and display it on the site
- Write a blog entry to document the journey
- The front-end is a static website using HTML, CSS, and JavaScript. I used this template and modified it
- JavaScript is used to fetch data from CosmosDB via an API call. I walked thru this tutorial by Digital Ocean
- I added to the main.js to determine and append the appropriate suffix based on what number visitor is currently viewing the site
- I followed Microsoft's documentation on how to Host a static website on Blob Storage
- I kept going with Microsoft's docs to Create an Azure CDN profile and endpoint as a CDN endpoint is used to deliver the site via HTTPS
- And finally I followed this to Configure HTTPS on an Azure CDN custom domain get HTTPS enabled for the custom domain
- Optionally, you can buy a PositiveSSL cert from Namecheap, configure DNS in Cloudflare, and use a CNAME record to point the root domain to your CDN endpoint via CNAME Flattening
- This will require importing the certificate into the Azure Key Vault
- Azure requires a .pfx file when importing the cert, and my SSL email only contained .crt and .ca-bundle files. I had to extract the private key from the .crt file, save it as private.key, then use Chocolatey to install openssl and then use openssl to create the .pfx file
- If you do this, you may also want to setup an HTTPS redirect rule within your CDN to ensure all requests resolve to HTTPS. My blog post explains how to do this
The visitor counter uses an Azure Function with an HTTP Trigger and a CosmosDB input and output binding. Each time the site is visited, the function is triggered, retrieves the CosmosDB item, adds 1 to it, saves it, and returns the value as a .json
- I started off by creating an Azure CosmosDB account, database, container, and items within the portal. This can also be done via CLI
- I tried creating the function within the Portal and using the Interaction submenu to do the bindings, but I could not for the life of me get this to work. So I used Visual Studio Code to create the API and Azure Function
- grinntec's guide was a lifesaver for both creating the API and creating the API Function within Python
- I will note that I had problems deploying the code from my azure-resume/backend/api folder like I initially planned. I think there was something leftover from when I tried to do this in C# that it just wouldn't deploy. So I copied the folder created for the Python script to another directory, and deployed it from there with Visual Studio
- This requires using bindings for Azure Functions in order to retrieve an item from the CosmosDB and write back to it
- Once all of that has been setup and I was finally receiving "HTTP response code 200 OK" from GET requests, I had to allow origins within CORS
- You must add the URL for for the Function app (so https://my-function-app.azurewebsites.net), but I also included my custom domain (with www and without), the CDN endpoint (https://my-cdn-endpoint.azureedge.net), and the URL for the storage container endpoint (https://my-storage-account.z13.web.core.windows.net)
- Be sure to check Enable Access-Control-Allow-Credentials
Once I had the storage container and static website setup, it was really nice to be able to push updates via GitHub and have a Workflow automatically update the contents of the container. Plus this workflow purges the CDN cache so that any updates you make are immediately reflected.
- I followed Microsoft's docs on Using GitHub Actions workflow to deploy a static website in Azure Storage which was mostly straightfoward.
- I used this quick guide to learn how to update my GitHub repo from my local drive
- I didn't implement this yet, but this guide documents Using GitHub Actions for deploying to Azure Functions