DEV Community

Christian Medina
Christian Medina

Posted on

Day 1 - Azure and DNS | Cloud Resume Challenge

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.

Top comments (0)