Cloud Resume Challenge - Finished

Christian Medina — Sat, 17 Dec 2022 23:06:21 +0000

In October of this year I received my AZ-900 certification. That's when I decided to take on the Cloud Resume Challenge. The Challenge is composed of 15 steps (16 including this blog post), and it took me about two months to complete.

I'm going to divide the blog post into three parts: the front-end, the back-end, and tying it all together. So, without further ado:

The Front-end

For anyone who has taken and completed the challenge, I think it can be universally agreed that the initial steps are by far the easiest part of the challenge. These steps are very approachable by beginners and serve as a good build-up to the true difficulty in the challenge.

The HTML, CSS, and JavaScript were all fairly easy for me as I've previously designed websites before. Similarly with setting up DNS. HTTPS posed quite a challenge as this was the first time I dipped my toes into cloud technology. I needed to learn how to use Azure Storage, Azure CDN, and Azure DNS Zones to get my website online. Thankfully this only took a bit of tweaking and was straightforward to do in the portal.

The difficulty, however, significantly ramps up in the following steps.

The Back-end

This is where the Cloud Resume Challenge really shows its difficulty. The database was simple enough to create. But the API is where I would wager a vast majority of challengers simply don't make it through. This portion required a rather significant time investment in studying exactly how Azure worked--particularly, setting up a local development environment. In retrospect, it would have been much better if I had set up CI/CD at this point, as I feel the development process was much easier in terms of testing code rather than deploying to the portal from VS Code.

There was also a long time spent on Terraform and learning Infrastructure-as-Code. I like that the challenge had me deploy a fully functioning environment before attempting this step as it made switching to Terraform much easier, though now I could start with Terraform from scratch having learned it.

Tying it all together

Another tricky portion of the challenge is actually having the back-end communicate with the front-end. This involved a lot of troubleshooting CORS issues.

Then, finally, there was deploying the code to GitHub for CI/CD. Despite not taking as much time as the API, this one seriously stumped me for quite a bit due to problems with Cypress integration. After a couple of days, I finally got GitHub actions functional on both the front-end and back-end repositories, though.

Final thoughts

Despite having quite a bit of background in coding and development, it still took me quite a while to piece together all the different parts of the challenge. I learned a ton and feel much more prepared to pursue a career in the cloud.

Here is the final website: https://cjmedina.dev
The front-end repo: https://github.com/cjmedina95/crc-frontend
And the back-end: https://github.com/cjmedina95/crc-backend

Day 1 - Azure and DNS | Cloud Resume Challenge

Christian Medina — Tue, 18 Oct 2022 04:56:55 +0000

Introduction

To start off my blog, I figured it would be better to do a day-by-day and wrap everything up at the end. Prior to the challenge, I completed the AZ-900, allowing me to add it to my resume and complete step 1.

Steps 2 and 3 - HTML and CSS

I spent a couple hours of my first day designing the website itself. The HTML is a fairly basic single page, two-column layout using Bootstrap 5. While there's still some refining touches to be made, I'm ultimately happy with how it turned out. For color palette, I went with MaterialUI's recommendations by overlaying an 8% opacity hue of blue on top of a #121212 color to give a nice accent to the left column.

Bootstrap did take some learning with getting responsiveness functioning when the browser scales which required me studying up on the difference between col-lg, col-md, and col-xs. I do plan to go back and make some adjustments, but left it as is since I felt I dawdled too long on these steps.

Step 4 - Deploying the website and Azure Storage accounts

I love that Azure is so intuitive to navigate. I had a storage account up and running in 15 minutes having never created one before. Creating the static website was equally as fast, requiring only a couple of button clicks.

After getting Azure Storage Explorer up and running on my Desktop, I was able to upload my single index.html and main.css files to my storage account and access them through a brand new URL which was very exciting.

Steps 5 and 6 - DNS and HTTPS

This step was really, really difficult for me, perhaps unnecessarily. After purchasing my domain from Google for this step (cjmedina.dev) I quickly deployed an Azure CDN resource and Azure DNS resource to get the domain active.

After a couple of hours, I managed to get the nameservers converted on Google's end to the Azure DNS zone nameservers, had the records all specified and pointing to the CDN endpoint, and everything was perfect until I went to flip the switch for HTTPS.

As it turns out, Azure no longer supports CDN-managed (or never did) HTTPS for apex domains--in other words, domains such as https://cjmedina.dev rather than https://www.cjmedina.dev. This meant https://cjmedina.dev actually gave an insecure error if you tried connecting to it and the only way I could fix it through Azure DNS was providing a totally separate SSL key through Azure Key Vault.

I decided against that route, and instead opted to migrate to Cloudflare. The process involved switching custom nameservers to Cloudflare's, then re-adding the CNAME, MX, and TXT (DMARC and SPF) records into Cloudflare and letting it generate a certificate.

After some time and many CTRL+F5 presses later, the website started reflecting Cloudflare's new certificate, and both https://cjmedina.dev and https://www.cjmedina.dev function as expected.

Now to plan for Javascript and CosmosDB.

DEV Community: Christian Medina