Building my online resume on Azure — “Cloud resume challenge”
Tags: python, azure, azurefunctions, webdev
Published: 2023-11-21 14:29:52

After switching careers in 2022, I spent the past year working as a Data Engineer. This job provided me with lots of chances to learn new skills. Looking for a project to improve my abilities, I found the "[Cloud Resume Challenge Guidebook-Azure](https://cloudresumechallenge.dev/)" by Forrest Brazeal. This challenge seemed perfect for two main reasons: it would help me brush up on my Web Development skills and also let me learn more about Azure and Python.

Taking on this project was quite challenging, especially because of the complex steps involved in installing, configuring, and fixing compatibility issues. I'll talk more about these challenges in a bit.

In the end, I successfully completed the project, and now I have [My Resume](https://www.nevenkalukic.com/) hosted on Azure, along with its corresponding [GitHub repository](https://github.com/nenalukic/azure-resume).


## Project Objectives

This project consists of series of challenges:



1. **Development of a Website**: Utilizing HTML, CSS, and JavaScript to showcase resume details.
2. **Integration of a Visitor Counter**: Implementing a JavaScript-based visitor counter interacting with a database via an Azure Function in Python.
3. **Python Code Testing**: Inclusion of unit tests for the Python code.
4. **GitHub Repository**: Storage of all code within a GitHub repository.
5. **Automated Deployment**: Configuration of GitHub Actions for automated deployment of code changes to the production environment upon each commit.
6. **Testing Process Integration:** Establishing a testing process for API code with automated testing integrated into GitHub Actions.


## Preparation

Before starting the project, some tools needs to be installed and configured:

- Visual Studio Code with Azure Extensions

- The Azure CLI

- Configuration of the local Python environment for Azure

- Azure Functions Core Tools for local development of serverless functions

- An active Azure Account

This [guiding video](https://www.youtube.com/watch?v=ieYrBWmkfno) from A Cloud Guru helped me a lot, despite the project being done in C#.


## Web Development

If you want to make web pages quickly or you're not too familiar with HTML and CSS, [Bootstrap](https://startbootstrap.com/?showAngular=false&showVue=false&showPro=false) provides free templates that are handy to start with. You can then customize them to suit your own style.

Next step was making a [Storage Account](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal) on Azure and enabling the Static Website feature. This allowed me to create a special container called $web. Putting my resume online as an [Azure Storage Static Website](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website) was a new and interesting experience, made easy with the help of the Azure Storage extension in VS Code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r32hp3iyg5o1mpmkrc4e.jpeg)


## Getting a domain name

You can search for a free domain name and buy it from any of multiple domain providers such as [Namecheap](https://www.namecheap.com/), [Godaddy](https://www.godaddy.com/en-uk) etc.


## Custom Domain Configuration

To set up a custom domain and enable [HTTPS](https://learn.microsoft.com/en-us/azure/cdn/cdn-custom-ssl?tabs=option-1-default-enable-https-with-a-cdn-managed-certificate), I used [Azure CDN](https://learn.microsoft.com/en-us/azure/cdn/cdn-create-new-endpoint). The first thing was getting the custom domain set up through the DNS provider. This step was needed, but it might take up to 48 hours for everything to get set up.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g5db7txfn3u69dks88k.jpeg)

After that, I connected the custom domain to the CDN endpoint. The last step was turning on HTTPS by choosing and validating a certificate.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7bej7xcyazvllxiiqmh.jpeg)

## Building the API

To make a JavaScript-based visitor counter work, I had to create a Cosmos DB on Azure with a special container to keep track of visitor numbers. The bridge between the website and the database was an Azure Function written in Python. However, I ran into problems because of the specifications of my system, which is a Mac Pro with an M1 chip and Python 3.11. It took a lot of effort to overcome these issues, and I wrote about the whole process in a [blog](https://medium.com/@nenamilkov/solving-azure-functions-compatibility-challenges-on-mac-m1-a-step-by-step-guide-a84d181c98f1).

After that, I improved the function to meet the project's needs, counting visitors and showing the count on the web page. Making sure the Azure function could connect with Cosmos DB was done using a feature called binding, made easy with the Azure Functions extension in VS Code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzvn2scd0yhfba5u5q63.jpeg)

## Front-end / Back-end Integration:

The ultimate goal is to achieve seamless updates for both the back-end API and the front-end website, involving the concept of continuous integration and deployment (CI/CD). To accomplish this, [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions#the-components-of-github-actions) were utilized. GitHub provides Linux, Windows, and macOS virtual machines to execute workflows, which are defined by a YAML file in the .github/workflows directory of a repository. A repository can have multiple workflows, and in this case, two were created: frontend.main.yml and backend.main.yml. 

The frontend workflow is designed for the deployment of the static website in Azure storage. Microsoft offers comprehensive [documentation](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blobs-static-site-github-actions?tabs=userlevel) and even a template for this workflow. However, a peculiar issue arose during the workflow execution. Although the build was successful, the "Upload to blob storage" section displayed multiple errors, all indicating "BlobAlreadyExists." The suggested solution was to add "--overwrite" to the command, which resolved the issue.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9hakvzmhhxmja3jauyf.png)

The backend workflow, tailored for Python code and testing, also benefited from Microsoft's [documentation](https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-github-actions?tabs=linux%2Cpython&pivots=method-template) and template. Two adjustments were necessary to make it functional. 

**1**. An error occurred: "No module named 'azure'." This was perplexing because the module was specified in the requirement.txt file.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq09qlz70p1rx4p1s842.png)


After some troubleshooting and experimentation, the error was resolved by removing his underline part from my file.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh4z31hmvlosgyt0z2nm.png)


**2**. The Microsoft template lacked a section for testing, requiring manual implementation. The crucial aspect here was ensuring the correct path, which took the following form:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yc5pt3zxw8cz11wouru.png)



## Conclusion

Doing the "Cloud Resume Challenge Guidebook-Azure" was a big journey for me as a Data Engineer. This project helped me refresh my web development skills and learn more about Azure and Python, which was great for my job.

From figuring out how to install and set things up to making a working online resume and API, each step taught me a lot. Even though I faced some problems, like my computer not liking certain things, I didn't give up and found solutions.

While I know there's still more I can improve and automate, what I have now shows how much I've learned and how far I've come. As I keep working on making updates happen smoothly through GitHub Actions, I'm sure this experience will be a good base for future projects and my career.

In the end, this project isn't just a resume online. It's a reminder that facing challenges is a chance to get better, and I'm excited about what comes next.