Photo by Kat Stokes on Unsplash
The Challenge
Do you know about A Cloud Guru' challenges?
This time the "My Resume in Azure" one hit me in the middle of my afternoon. I was going for a break after two productive hours when I saw the Gwyneth Peña S. post.
I'll quickly have a look...
The goal is to publish a personal website, your online resume, based on Azure technologies and practice your Cloud skills in the process. You can see it as a hands-on lab where you need to do your research in order to make it happen.
I had very little experience building with Azure even if some theory was here somewhere in my head. This could be an opportunity to level up a bit.
Some time ago, I did part of the same challenge on the AWS side and despite being more confident, I still learnt about some topics.
So, no more thinking, I decided to go for it and try to learn a few things along the way!
This article won't be a detailed tutorial but it will give some guidance and remarks about the path I followed to complete the challenge, but also about some experiments to test and learn with some "side quests" along the way.
If you want to have a look at the result, here are the interesting links:
The first view of my Azure hosted resume
Prerequisites
- Free Azure account
https://azure.microsoft.com/fr-fr/free/
Free GitHub account
I already had a GitHub account
A domain from any DNS provider
florianclanet.fr was ready!
A text editor like Visual Studio Code
Who do you think I am!
But still... Here is the link because I don't know who you are 😄
Azure Functions Visual Code extensions (if you use Visual Studio Code)
Install it from the Visual Studio Code extension market
This list and a dose of motivation should guide you to the end of the challenge.
If you are ready, let's start immediately!
The steps
Here is what Gwyneth suggested:
But here is what I decided to explore during the first step:
Then, when the job was done, I went back to the original idea and migrated my Azure Static Web App to some Blob storage + CDN + Azure function.
1. Create a GitHub repository for the project
This step is really easy.
I just need to connect to my GitHub account and go to this url.
I fill the name and choose my options (at least Readme) and click on "Create Repository".
From here I can clone the repository on my local machine and start developing (more on how to clone here).
2. Inside of the GitHub repo, create the website
Now that we have the repository cloned in local, I can start organizing the project.
I split the folder into two subfolder:
- front --> for the html, js and css user interface static files
- backend --> for the Azure Function code to retrieve the user counter
At this point I spent some time searching for a nice theme and trying to fill it with my information.
Here is the link for the template if you need some inspiration (no affiliation here!).
When this step is completed, we have a pretty nice website that could be deployed and used "as-is".
Let's talk a bit about the backend and how to add some dynamic information.
3. Add a visitors counter to the website
I choose to use CosmosDB (SQL mode), Azure Functions and Python (3.8) to code this part.
So first step is of course setting up the database.
I created a CosmosDB account using the azure portal. I choose to use the serverless mode that allows you to pay "as you use" and is very useful when you are not going to use the database in heavy production workflows.
Next I created a Cosmos container / database and added a record with "id" and "usersCounter" values.
Little digression here to highlight that you need to select Core SQL mode and not any other option like MongoDB for example. Only Core SQL supports binding configuration we will use later to interact from the Function to CosmosDB.
4. Deploying to Azure Static Web App
I know, Gwyneth clearly specified not to use it to understand fully what we are doing and to dive into some details. But I was curious to see how easy it would be...
And I wasn't disappointed!
It's really easy and with just some very simple steps, you have your resume online without even noticing you clicked on the Create button.
Azure Static Web App will deploy your frontend, your backend and will even create a GitHub action workflow for you.
If you want more details, here is the tutorial I followed.
Photo by Aziz Acharki on Unsplash
5. Migrate from Static Web App to Blob storage + Azure Function
When my resume was online and the code part was validated by the Static Web App deployment, I decided to continue the challenge by removing the Static Web App part and migrating the website to Azure Blob storage and Azure Functions solution.
Blob storage
I followed this Tutorial without any big issue. I stopped on the way to have a look at the different storage solutions and if you also want to take a look, here is a good starting point
I used some commands in order to have an overview of the az command-line and I think you should also go for it! It will save you a lot of time if you need to replicate what you did.
Here are some examples:
az storage blob service-properties update --account-name myresume --static-website --404-document error.html --index-document index.html
az storage blob upload-batch -s ./front -d '$web' --account-name myresume
I already had a domain name, I just configured a CNAME entry to point to my Azure static resource and asked Azure CDN to use HTTPS. If you are looking for some good resources here, you should follow this Tutorial and this one too.
You will find a very useful way to avoid any downtime during DNS migration using cdnverify...
Azure Function
Azure Functions is supporting a lot of different runtimes such as C#, Javascript, Java, Python, Powershell... Find the complete list here.
On a first guess, I gave a try to the Python 3.9 runtime but as everything was not supported yet on Azure tooling, I came back to the 3.8 version.
To support the development as well as the first deployments, I installed the Visual Studio Code extension and the Core Tools.
It makes it possible to test your Azure Functions on your local environment, helps you to create, manage and deploy your functions.
Here are the basic steps I followed to write my counter function:
Configure a new HTTPTrigger
Create CosmosDB account from portal or command line (serverless mode)
Create a Cosmos container
Create a document containing the counter property
Add CORS policy for the static website to be able to call the Azure function
And one last thing, don't forgot to also upload your function parameters!
6. GitHub Actions
If you know me a bit, you can probably guess I quickly felt bad about the static and function manual deployments! If you don't know me yet, I'm telling you now: I enjoyed it for... something like 1,5 times!
As our project is already on GitHub, why not using GitHub Actions to automate this?
Our Action is probably going to access the Azure resources, we need to get and store a secret into GitHub Secret feature.
For the static website, we can for example retrieve the deployment credential with command line:
az ad sp create-for-rbac --name {myStaticSite} --role contributor --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} --sdk-auth
Then we will create a new workflow under .github/workflows/.
Note: if you are using Azure Static Web Apps, the workflow file is already generated and ready to be used.
This workflow file will contain several sections:
When to launch the Action (on push on main, on pull requests...)
Where to run the script (Ubuntu...)
What to run (action modules, custom commands...)
The goal is to automate everything that can be automated: build, tests, deployment...
On my side, I choose to automate the deployment of the static part and the build, test and the deployment of the Azure function whenever I'm pushing to the main branch.
This process is clearly sufficient for my use case but you could also add more branching customization, launch specific tests on pull requests... The automation and complexity are totally up to you and trust me, it feels great when it's working while you are going to grab a cup of coffee or tea!
At this point, you have a working static website, displaying the number of view thanks to the Azure Function requesting CosmosDB and you have a nice pipeline set up to be able to deploy without risk your brand new awesome website!
I think you can celebrate and prepare yourself to share with people what you learn through a blog article, a video or any other form of content you might enjoy creating!
Photo by Alasdair Elmes on Unsplash
Analysis
Here are just some final thoughts about this enjoyable journey.
The hardest part
Staying focus on the goal was definitely a hard part! I felt like I was willing to explore every rabbit hole I found along the way!
That's a classic feeling when you find yourself exploring new topics. My advice about this might be to stay focus as much as possible by writing down on a side paper/file every interesting topic you can find along the way that is not directly related to the initial goal of the learning session.
This way, you can come back later and learn about all these topics in an efficient way.
What I enjoyed
I liked a lot the idea to have a real project to work on while I was learning about Azure services. It clearly helped to stay focus and keep the motivation spinning!
Finding a free design to use was helping, I didn't spend too much time on any CSS or HTML structure and preferred to focus on the Cloud part itself but anyone interested to learn the end to end process will love the challenge. Working on your online resume exciting at all and is actually dealing with a lot of different topics.
My Biggest takeaway
Just start building!
I mean... What are you waiting for?
Cloud is great in the sense that you can start using it and learning about the several services and providers very quickly. And this is even true when you are building for a corporate client or a start up: go quickly to market strategy, fail fast, iterate often...
Those are not just marketing slogans but can also be experimented at your scale.
So, whatever the provider, the time or experience you have, you should start building right after reading this article!
Go to the challenge page, read the article, start your repository and share what happens next with the world using the #CloudGuruChallenge tag!
Feel free to reach me on Twitter (@FlolightC) to tell me about your resume on Azure journey or to ask me questions ! I’m always happy to discuss with you!
