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" 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 hosted on Azure, along with its corresponding GitHub repository.
Project Objectives
This project consists of series of challenges:
- Development of a Website: Utilizing HTML, CSS, and JavaScript to showcase resume details.
- Integration of a Visitor Counter: Implementing a JavaScript-based visitor counter interacting with a database via an Azure Function in Python.
- Python Code Testing: Inclusion of unit tests for the Python code.
- GitHub Repository: Storage of all code within a GitHub repository.
- Automated Deployment: Configuration of GitHub Actions for automated deployment of code changes to the production environment upon each commit.
- 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 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 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 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 was a new and interesting experience, made easy with the help of the Azure Storage extension in VS Code.
Getting a domain name
You can search for a free domain name and buy it from any of multiple domain providers such as Namecheap, Godaddy etc.
Custom Domain Configuration
To set up a custom domain and enable HTTPS, I used Azure CDN. 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.
After that, I connected the custom domain to the CDN endpoint. The last step was turning on HTTPS by choosing and validating a certificate.
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.
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.
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 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 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.
The backend workflow, tailored for Python code and testing, also benefited from Microsoft's documentation 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.
After some troubleshooting and experimentation, the error was resolved by removing his underline part from my file.
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:
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.
Top comments (0)