Azure Resume Challenge

'A Cloud Guru' challenge

Hi guys 👋👋👋

this is the repository for my first A Cloud Guru Challenge to create a web resume using Azure infrastructure!

The site url is resume.giorgiolasala.space.

Thanks to all users in Discord "A Cloud Guru" channel and Amen.pt for the free domain used in this challenge! 🙏🙏

Infrastructure as Code

In order to manage Azure infrastructure resources, I have used a template based on Bicep, that provides a transparent abstraction of Azure Resource Manager (ARM) template.

In our use-case:

Bicep template is composed of following resources:

• CosmosDb (Account, database, container)
• Storage Account
• Function with Consumption Plan
• Application Insights

A Bicep template could be easily deployed to an Azure Resource Group using Azure CLI

az deployment group create --resource-group AZURE_RESOURCEGROUP_NAME --template-file BICEP_TEMPLATE

Unfortunately some configuration cannot be directly applied from Bicep/ARM deployment template, such as Static Website configuration. But... 🚀 GitHub Workflows are the rescue!

Moreover in order to create workflows completely indipendent from specific resource names, I have exported some output variables from Bicep template itself to be used directly in GitHub Workflow.

Indeed, at the begininnig of Bicep template, resource names are "randomized", generating a deterministic unique string based on Resource Group name:

param rndSuffix string = uniqueString(resourceGroup().id)
param appName string = 'resume${rndSuffix}'

and at the end of file, there are all exported values used during deployment phase; in particular I have:

• StorageAccountName to deploy resume static files after NuxtJs build
• FunctionUrl to deploy Azure Function
• Cdn information to purge after deployment

Azure Deployment button

During creation of Bicep template, I have learned that Azure Button can be attached only to ARM templates. Maybe this issue will be solved in the future (Bicep templates are quite young :) ), but in the meantime I have created a CI build that generates automatically ARM template and a 🤖 GitHub Bot user commits JSON file directly into the repository.

Finally, it's possible to link Json ARM file to a Deployment button such as:

This button is not needed for Azure Resume challenge project, but however I would like sharing this 'pork-around' 🐷!

GitHub Workflow

Under workflows folder there are 3 pipelines:

1. bicep.yml: to create ARM file for Azure Deploy.

   After install Bicep build tools

   - name: Install Bicep build
     run: | 
       curl -Lo bicepinstall https://github.com/Azure/bicep/releases/latest/download/bicep-linux-x64
       chmod +x ./bicepinstall
       sudo mv ./bicepinstall /usr/local/bin/bicep
       bicep --help

   this workflow generates a JSON file

   - name: Run Bicep build
     run: |
       bicep build deploy/*.bicep

   and commits to repository using Add & Commit GitHub Action:

   - uses: EndBug/add-and-commit@v7.0.0
     with:
       author_name: github-actions
       author_email: 41898282+github-actions[bot]@users.noreply.github.com
       message: 'Update Bicep-ARM template'
       add: 'deploy/*.json'

2. ci.yml: to lint Typescript source files

    - name: Run linter 👀
      run: npm run lint

3. build_deploy.yml: manual workflow to deploy function and site.

Last workflow is composed of three jobs, splitted in two phases

• Azure Infrastructure
  • Deploy Azure Template job
• Azure Code
  • Azure Function job
  • Nuxt job

Azure Function

Azure Function is developed in C# using CosmosDb bindings to write a simple record and tracking visitor. In particular I have used two bindings (maybe uesd only one of these?):

• IAsyncCollector : to create a new document
• DocumentClient : to count all visitors in CosmosDb container

Moreover I have attached Application Insights for logging and monitoring:

Resume Template

Resume template is based on beautiful resume NuxtJs code developed by Ivan Greve and StartBootstrap Theme.

I developed a custom Vue component (source) in order to do an HTTP request to Azure Function and show a Toast notification using @nuxtjs/toast plugin.

Conclusion

What are your biggest takeaways?

This challenge was the opportunity to start with new technologies and to go deeper with others. It was the first time I have used Bicep template and NuxtJs framework, two very interesting technologies and at the same time I have played with CDN and Azure Static WebSite!

As regards Bicep templates, in the past I have used different IaC frameworks, but this time I was surprised to see Microsoft documentation (for each ARM code in Microsoft site there is the equivalent Bicep template) and to find many examples on this GitHub repository.

Instead as regards NuxtJs, I have learned only some basic concept and I would like to broaden my knowledge about it.

Surely the most important "lesson learned" was the opportunity to orchestrate all these technologies using GitHub workflows!

What was the hardest part?

During development of all services I have encountered some challenging parts:

• Testing GitHub pipeline: to be sure it works correctly, all changes must be committed; I have read about Act project, but I haven't success to start it locally... surely I will investigate about this choice.
• CDN configuration: I have never used CDN, so I have found some issues to check if it's correctly works (why obtain 404 response? purge works?). Also CDN TLS configuration is quite confused to troubleshoot. Finally, I switched from Akamai to Microsoft CDN to support purge all easily because of Akamai does not support wildcard purge.
• Domain configuration: DNS configuration (in my specific case) must be done manually on Register control panel, so initially I have created it (with a static endpoint name) and then I run ARM pipeline to create Azure resources.

Links

• Challenge rules
• DNS Propagation Checker
• Azure Cloud Adoption Framework - Naming Convention
• Free Domain Amen.pt