TL;DR
I know that you've been waiting for this and you probably already know. acloudguru released another amazing cloud-based challenge on April 1st. Really it wasn't an April Fools joke; I double checked. The goal was to create a Resume and host it in Azure. Of course with the following caveats:
- Register a DNS name to navigate to the Resume
- Track Visitors using Azure Functions and Cosmos DB
- Use GitHub Actions to automate CI/CD
Unlike the other challenges that I've completed I felt more strongly about the quality of this application. That is because I intend to keep the site active and current as my living Resume as my skills evolve. Due to these feelings there is a chance that I may have gone above and beyond the laid out requirements.
Overview
- Angular 11 on the Frontend
- Azure Blob Storage for Static Website Hosting
- Azure CDN for Content Distribution
- Angular Material for Styling
- Angular NgRx for State Management
- GitHub Actions for Automation
- Java 11 Spring Boot with Azure Functions
- Route 53 as my DNS provider/registrar
- Serverless Cosmos DB to store Resume data
- Terraform to Create the Infrastructure
I had more on my wish list that I may still accomplish at some point, but I just simply ran out of time. You can check out my Resume and other resources below. Please let me know what you think if you have the time.
GitHub
https://github.com/wheelerswebservices/cgc-azure-resume
LinkedIn
https://www.linkedin.com/in/wheelerswebservices/
Website
https://www.wheelercloudguru.com/
Architecture
I wanted to talk about the architecture used here. The application is Serverless, which is a big deal to me since I don't want to be paying for idle time. I tried to stay 100% in Azure for this challenge, but unfortunately Azure is not a DNS registrar yet. I could've transferred my DNS name from AWS to Azure, although I would've needed AWS support help to do so since I just registered the DNS name specifically for this challenge. There's a rule in place that won't let me transfer a DNS name that has been registered for less than 60 days.
I created the following architecture diagram on Diagrams.net(formerly Draw.io). They have an incredible tool, I'd recommend you check it out.
To reiterate the important pieces stated above:
- Users go to Route 53 when they type in my DNS name.
- Then routed to Azure CDN.
- Azure CDN pulls the data from the origin if it doesn't have it and caches it on the Azure Edge network.
- Azure Blob Storage is acting as the origin using the Static Website Hosting feature.
- The Angular application calls to Azure Functions to track visitor information when first loaded.
- If the user opens any component on the page the data will call another Azure Functions endpoint to get the data and cache it in the NgRx store. This data is lazy loaded to avoid loading data that the user may never see.
- Finally the Azure Functions app interacts with a Serverless Cosmos DB to persist the data long-term.
This flexibility allows me to update my Resume data stored in the Cosmos DB with a variety of methods and see the changes reflected on my website instantly.
Design Decisions
There could be confusion around the technology that I chose. Here are some of the influencing reasons I designed this app the way I did.
Angular for the Website
It would've been easy to create a simple website using the traditional approach of HTML, CSS, and JavaScript. Except I didn't want "simple". In my latest position we've been using Angular, which a couple months ago I wasn't very strong in. Historically I have used, and preferred, React. Lately I have enjoyed working with Angular so much on my day-to-day job that I decided I would use it on this project as well.
The main benefit here was that I was able to learn Angular both during work hours and after hours allowing me to improve my quality in both aspects. Now I call that a Win-Win.
Java for the Serverless Backend
I have the most experience with Java; still when I check my GitHub repository I don't have any Java projects I've written. Why? Well I use Java for work so when I get the time to work on side projects I often challenge myself to learn something new. Although, it dawned on me when I was recently interviewing for a new job that I had no way to showcase my prior Java experience since my employers code is obviously private.
This is the sole reason I chose to use Java for the backend of this project. That may bring the concern of "Cold Starts" to some people and it did cross my mind. However, during my local testing I felt that the performance was perfectly fine for this use-case. First invocations were noticeably slower, yet in the middle of testing the invocations were responding lightning fast.
Terraform for the Infrastructure as Code
To be blunt Infrastructure as Code wasn't even called out as a requirement of this project. Still given my background in cloud architecture I couldn't see any reason not to leverage it. As you may recall from a previous post I didn't love the Azure Resource Manager (ARM) so I knew I didn't want to use that again. I always heard amazing things about Terraform, but never got the chance to learn it.
Knowing I had experience in CloudFormation and ARM I wasn't afraid to use it on this project without any prior experience as I was confident the skills were transferrable. In the end I would say the skills were as I didn't have any trouble with Terraform. In fact I found it surprisingly enjoyable. Watch out CloudFormation. 😉
Wish List
As stated earlier, I didn't finish everything I really wanted to. I would like to list them here in the hopes that it will motivate me to finish them at some point.
Cookie-based Visitor Count
Currently the Visitor Count functionality I implemented is based on page load, not user. That means that if one user sits on my website refreshing over and over they will be counted as multiple "Visitors". I didn't like this approach and was thinking that a Cookie-based approach would be much more telling.
I found this Angular library to implement that:
https://www.npmjs.com/package/ngx-cookie-service.
HTTP to HTTPS
To be fair I'm sure this one is simple! Currently when my website is navigated to with HTTP a lovely error is presented from Azure. Ideally I would like to redirect from HTTP to HTTPS, which is super simple with AWS CloudFront and not so crystal clear on Azure CDN. I hope to find that setting someday.
Skill Associations
I had the brilliant idea of associating Skills to the section of my Resume that I used that technology. I loved the idea so much I had to implement it and I did for Projects. Now the user will see chips with Skills that I leveraged on the Projects and clicking a Skill will filter that entry in the table.
Additionally the user can click on the filter icon on the Project itself to filter the Skill table by all of the skills used on a single project. This logic was harder to implement than I was initially expecting. No regrets.
Unfortunately I didn't have time to do this same functionality for the Certification, Education, and Experience sections of my Resume. Furthermore, I would've liked to make the Skill table filter back to the other components as well. Maybe someday...
Toggle Theme
Much like the beautiful Angular Material website I had high hopes of implementing a theme toggle on my website. This fell by the wayside with the hopes that I will come back to it later.
This is also why my website appears to be in Dark Theme. That's my personal preference and I never considered I wouldn't be able to implement the theme toggle functionality before the deadline. 😬
Zone Apex Routing
I was frustrated when I realized I couldn't route the DNS name wheelercloudguru.com to my Azure CDN because that's the "Zone Apex" name. I guess I have been spoiled by AWS's aliases. I was exploring some options for a couple days before moving on. I hope I can improve the routing so this website falls in line with other websites that I've created and hosted on AWS.
Conclusion
Yay you made it! Perhaps you're like me anxiously waiting to see what acloudguru will release next then maybe we should connect on LinkedIn or you could consider giving me a follow. I always appreciate any and all feedback.
Thanks for reading! Cheers!! 🥂🍾
Resources
GitHub
https://github.com/wheelerswebservices/cgc-azure-resume
Top comments (0)