DEV Community: KM Cloud Tech

Azure Weather Web App AZ-204 Project 1

KM Cloud Tech — Tue, 29 Aug 2023 18:04:00 +0000

Introduction

In today's digital age, cloud services are the backbone of many applications. Azure, Microsoft's cloud platform, offers a plethora of services to get applications up and running in no time. In this post, I’ll share my journey in creating a weather application using Azure's array of services.

The Github repository for this project is Github
The actual web app page is http://weather.kmcloud.tech

This is the first part of four related to MadeByGPS’s AZ-204 related projects found in this video.
I’ll be making some small adjustments along the way but I want to present what I’ve learned related to the following items:

Azure App Service Web App
Azure Container Registry
Azure Container Instance
Azure Container Apps
Azure Functions

Create an Azure App Service Web App

Azure App Service is like a toolbox from Microsoft that makes it easy to put web apps on the internet without worrying about all the technical stuff in the background. At the start of this project, I used this toolbox to set up the web app. I like to think of this as setting up my own little space on the internet where the weather app can live and be visited by people.

Creating and setting up a Flask application with Python would be straightforward and with some configuration of the Azure App Service, I would be able to get this application up and accessible to the internet.

Developing the basic Weather Application

Before I started using Azure's many tools, I first needed the heart of the project: a simple web application that could talk to weather APIs. I used Python and Flask to create a simple web page with a text field that accepts input, along with a route that would search when the button is pressed. Functionality was needed when the button was pressed, the site would call a weather API and be able to display the relevant information.

The weather API I picked was the OpenWeatherMap API for this. It's straightforward and accessible, making it easy for us to get basic weather details. This choice was important because it meant the main app would work well, even as I added more features with Azure.

def get_weather_data(city_name):
    if not city_name:
        return None

    # OpenWeather API details
    API_URL = "http://api.openweathermap.org/data/2.5/weather"
    API_KEY = os.environ.get("WEATHER_API_KEY")

    # Full URL Adding units=metric to get temperature in Celsius.
    full_url = f"{API_URL}?q={city_name}&appid={API_KEY}&units=metric"

    try:
        response = requests.get(full_url)
        data = response.json()

        # Check for valid response from OpenWeather API
        if data.get("cod") != 200:
            return None

        # Process and return the data
        return {
            "city": data["name"],
            "temperature": data["main"]["temp"],
            "description": data["weather"][0]["description"]
        }

    except Exception as e:
        # Handle any exception that arises when making the API call
        print(e)
        return None

Containerization

To ensure the web application was isolated and portable, I containerized it. Using Docker, I was able to package the application with all its dependencies, ensuring that it could run consistently across different environments.

This step is vital, especially when working with cloud platforms like Azure, because it eliminates the "it works on my machine" problem. By containerizing the application, I made it easier to manage, deploy, and scale. After containerizing the app, I pushed the Docker image to Azure Container Registry, ensuring a secure and private storage for the container image(s).

This approach streamlined the deployment process, particularly when I decided to test the application using Azure Container Instance and, later on, deploy it to Azure Container Apps. This ensured that the application, from development to deployment, was efficient, consistent, and cloud-ready.

FROM python:3.8-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .

CMD ["flask", "run", "--host=0.0.0.0", "--port=80"]

Azure Container Registry

As mentioned in the last section, the ACR was where I would store the Docker Image. The registry streamlines the process of storing and managing those images, ensuring that they're kept in a secure environment. The added benefit of ACR is its seamless integration with other Azure services.

With the image in the set-up Azure Container Registry I was able to test the application using Azure Container Instance first for testing before deploying it to Azure Container Apps. Not only did it make deployments and testing quicker, but it also ensured that I had a centralized and consistent version of the app ready for deployment when needed.

Azure Container Instance

After containerizing the web application and storing it in Azure Container Registry (ACR), it was essential to test it before a full-scale deployment. For this, I used Azure Container Instance (ACI). Unlike traditional container orchestrators which might require complex setup and configuration, ACI presents a simpler approach. It's designed to run containers without the complexity of managing underlying infrastructure or orchestrating multiple container instances.

This made ACI an excellent choice for my use case; it allowed me to quickly spin up the container and see the application in action in a real-world Azure environment. By testing with ACI, I ensured that the application was ready for the challenges of a live environment, along with ensuring its stability and performance. This step was critical as it provided insights and highlighted any potential issues, ensuring a smoother transition when I decided to deploy the app on Azure Container Apps.

Azure Function

Delving deeper into Azure's capabilities, I decided to give the application an expanded feature by using an Azure Function. This serverless solution allowed us to build an alerting mechanism that triggered whenever specific weather conditions were met, Specifically the web page would show if the temperature was under 20° celsius triggering a ‘Sweater Alert’.

The beauty of Azure Functions lies in its event-driven nature, making the application not just informative based on the search but also proactive in providing insight into weather conditions and proactively alerting..

Integration of the Azure Function

Using Flask, I was able to enhance the basic web application to introduce the dynamic ‘Sweater Alert’ mechanism. With just a few tweaks in Flask routes and templates, I seamlessly integrated the alert into the web page.

Azure Container Apps

To get the Container Apps up and running, I started by leveraging the Azure CLI. After logging into Azure using az login, I navigated to the specifics of the project with az containerapp create. Following the initial setup, I pointed the application to the image in Azure Container Registry using the --image parameter.

Compared to Container Instances, Container Apps have more granular control with the use of environments. For example you can adjust Network settings or have applications share a log analytics workspace in the same environment. Having the environment setup was a necessity for having the Container App set up and running.

From there I was provided a URL that was where the Container App was up and running but I wanted to include the site into my ‘kmcloud.tech’ ecosystem. From the Azure portal, I created a ‘custom domain’ entry and validated the DNS with my DNS provider.

Push to GitHub

To implement version control and make the CI/CD processes make more sense I put the codebase up to Github. This also opens up opportunities for collaboration with other developers and engineers to look at my code, potentially give advice or even contribute to this project.


Git add .
Git commit -m “First commit”
Git push

CI/CD Implementation

To streamline the deployment process, I implemented CI/CD pipelines, automating the process from the codebase to the live application. Using GitHub Actions, I developed a two-pronged approach to address both Docker and Azure Functions.

Before this could be completed with best practices, I needed to create a service principal account that would interact with the Azure services. This would allow a programmatic way to use services in the Subscription without providing user/admin credentials.

The Docker process .yml file was structured to build a Docker image from the included Dockerfile in the repo.. This .yml file facilitates the setting up the environment and installs dependencies. It then pushes the fresh container image to Azure Container Registry. To facilitate this, I stored credentials (including the service principal) as secrets within the GitHub repository. This ensures security while allowing GitHub Actions to authenticate with Azure services programmatically.

For the Azure Function, I developed a separate .yml pipeline. This .yml file starts with setting up the environment then using the stored secrets (along with the service principal) in the GitHub repository, the Github Actions logs into Azure, allowing the pipeline to deploy the Azure Function programmatically. Finally, the GitHub action cleans up by logging out of Azure.

By integrating these CI/CD pipelines, reinforced with the stored secrets, I’m able to optimize the deployment workflow. This ensured that the Web App, Container Image and Azure Function stayed synchronized with the latest changes.

Documentation

Last but not least, I wrote out this blog post to document what I had done to get everything up and running. This should make it easier for others to replicate this process, understand design choices, and contribute to the project.

Conclusion

Spinning up this project and associated Azure resources was a fantastic learning experience. I was able to learn a ton about Azure Containers including the Registry, Instances and Apps along with a deeper knowledge of Azure Functions. I was also able to learn more about the az cli tool where I could deploy services with a single command instead of clicking around in the Azure portal.

In the near future, I will be returning to this project and implementing IaC with Terraform to allow even more granular control of cloud resources. One other thing I could implement is the CI/CD splitting of the Test and Prod environments. I know there's a way to differentiate when a test image is uploaded and when a prod image is uploaded but that would take some research.

I hoped you learned something through my journey, This was a lot of trial and error before getting everything up and running properly. Using the skills and resources from this project I will be moving onto "Azure Document Vault with Expiry & CDN Integration (Develop for Azure storage)"

Stay tuned for that blog post.
Thanks for reading,
-Kenton

Kenton's API v1

KM Cloud Tech — Fri, 27 May 2022 15:48:04 +0000

Hello, In this blog post I will be talking about how I set up my Cloud Resume Challenge website to include REST API functionality.

As a bit of preface, I always viewed REST APIs as a gateway for my Powershell skills to be able to reach out and interact with the internet. When Powershell was first presented to me, it was described as a tool to make Windows administration tasks quicker and more efficient. It's very useful for Windows server and specifically Server Core but what good is a modern computer if it can't connect to the internet?

First it was web scraping with Invoke-Webrequest but this didn't give the exact information that I wanted. There was too much HTML included after drilling down past the status codes and raw content. In came Invoke-Restmethod. What a game changer, I could interact with HTTP endpoints in a familiar way and chain other commands based on information from those endpoints.

I drummed up some ideas about what information would be relevant to provide by JSON. To me, my resume made the most sense.

What are the steps that I need for this?

Node js and Express js to host the REST API
- Endpoints
- JSON file for Resume
- Basic Authentication
Host on Github for CI/CD
Host on Azure to have a public endpoint

Node js and Express js to host the REST API

What did I need to do to set this up?
I used Javascript in the main Cloud Resume Challenge so I started there, maybe there was a framework that had REST API functionality that would be built in?

I found it, Express js on top of Node js.

Endpoints

After following a couple guides I was able to spin up a local instance of Node js that I could make an invoke-Restmethod call to and get the information that I set up to serve.

app.get('/api', (req, res) => {

res.send('🔥🔥🔥');

})

JSON file for Resume

What's next? Well, Let's find a template for my resume in JSON.

I copied from the jsonresume.org schema and made some tweaks to get them more inline with my skills.

I needed to add that JSON as an endpoint. Instead of putting the whole JSON in the response, everywhere I looked said to have a separate file and have the main file reference the JSON file.

Two things needed to be added for that, fs and the path as a const.

const fs = require("fs")

const resume = require("./resume.json")

app.get('/resume', (req, res) => {
    res.header("Content-Type",'application/json');
    res.sendFile('resume.json' , {root :__dirname});   
});

The JSON template included a place to put a picture. I knew that pictures can't exactly be served by JSON but I figured that I could have an endpoint that shows a picture if you go to it in a browser.

I first thought about adding the image to the Github repo but then I realized that the image is already in Azure Blob storage. What if I just have a separate page that linked back to that image.

With some research I determined that an endpoint can just be linked to a different HTML page. From that HTML page we can display the linked picture.

app.get('/resume/image', (req, res) => {
    res.sendFile(__dirname + '/image.html');
});

<img src="https://azureresumekm.blob.core.windows.net/$web/images/km.jfif" alt="My_Picture"></img>

There I am and accessible at the /resume/image endpoint.

Basic Authentication

One last piece of the puzzle to make this unique, Authentication.
Previously, I was able to host a REST API but I didn't like that you could just go to the website and see the information. I wanted there to be a hoop to jump through to access the information. I understand that Basic authentication isn't used that much and putting it right in the code that is going on Github is insecure but this is only to demonstrate.

That said, I set up a couple Basic authentication accounts in the index file that will kick back a 401 if the credentials are not inputted correctly. I have also added a challenge so that if the website is visited by a browser and doesn't include credentials it will ask for them.

app.use(basicAuth({
    users: {'user': "resume" },
    challenge: true
}))

So I have all my files ready, I run node . on my VSCode instance and try the endpoints. Success, At least on localhost. I also try accessing through Powershell but I hit a bump. Invoke-restmethod wouldn't work with basic authentication. I do some research and find the official documentation for the command and it has the -authentication parameter. I didn't see that available in my version of Powershell so I decided to give the shell an update.
Right after the update we were able to use the -cred, -authentication and the -allowunencryptedauthentication parameters to initiate a call.

Invoke-RestMethod http://localhost:8080/resume -cred resume 
-authentication Basic -AllowUnencryptedAuthentication

Host on Github for CI/CD

From what I could recall from the original CRC and website, getting the Github repo set up for this shouldn't have been an issue.
git init
git add -A
git commit -m "first commit"
git push

Looking back, I'm not sure that anything past the init was necessary but I was lost in VSCode and doing all the commands didn't hurt.

Next, I used a Github tutorial that had the proper az cli commands to get started and had the correct YAML file to make the connection.

I had a bit of trouble with the first run of Github actions, The npm test was failing and I wasn't sure why. I looked into it and my package.json file literally had an error code built in.
"test": "echo \"Error: no test specified\" && exit 1"
I'm not sure the purpose of it but the complete removal of the test attribute seemed to work.

I ran into another issue, I copied over the secret key like the guide suggested but I noticed that I copied in the name that didn't match the YAML file. I corrected that and I was able to make a connection with Github Actions.

Hosting on Azure

Through the Github tutorial I used the az cli to create a new app service plan and web app to host the node app. From there I wanted to add a custom domain. In the past when I tried hosting an endpoint on my website I had trouble with the static web app. The specific limitation I ran into was that only the 'index' page was accessible, I couldn't find a way to have a /resume added onto this web app. Instead of migrating away from the static web app, I decided to implement a sub domain.

rest.kmcloud.tech

This is something I will probably change in the future, When I look up best practices for REST APIs I see that it makes more sense to have endpoints be on the root of the webpage.

Conclusion

Finally, All the pieces are working together to serve my resume in JSON to anyone on the internet.

curl rest.kmcloud.tech/resume -u user:resume

Invoke-RestMethod http://rest.kmcloud.tech/resume -cred user -authentication Basic -AllowUnencryptedAuthentication

Through Github actions I can also make changes locally, quickly test them and push them all the way to Azure. There’s no tinkering with files or settings, it just works.

The Github repo for this project is here.
https://github.com/Kenseventy/Resume-API

In the future I hope implement a ‘counter’ just like the website and also a ‘guestbook’ of some sort that stores actual responses in a database.

Thanks for checking out this blog post, I know it’s long and maybe has some incorrect information but I see this blog as a place to write down my thoughts and record some of my work.

If this helps even one person that would be great.

Thanks,
-Kenton

Kenton's Cloud Resume Challenge

KM Cloud Tech — Tue, 19 Apr 2022 20:53:51 +0000

This is my blog post about the completed Cloud Resume Challenge.

My completed site is http://kmcloud.tech

I decided to take the Azure flavour of this challenge as I had the Azure Administrator certification.

There were a lot of technologies that I was able to work with that sharpened my Azure skills.

Frontend

For the frontend I was able to implement Azure Storage and Static Web Apps, Azure CDN and Git.

I made some modifications to an existing HTML site along with the accompanying CSS files, I may try to make more adjustments in the future.

One big thing I needed to figure out was how to initiate steps on the web page being loaded.
Javascript was the best option because of the eventlisteners it had and how it could see the ContentLoaded event of the webpage.
From there we could call an app that would host a counter.

Backend

For the backend I was able to implement CosmosDB, Azure Functions, Azure Storage and Github Actions.

For the backend I created a C# function that connected into CosmosDB and got the current number for visitors and updated it into the same database.

From VSCode I was able to deploy the function to Azure and host it there.
I did all the coding and designing in VS Code which was new for me. I had some trouble getting the function deployed to Azure for a while because the folder I had open in VS Code wasn't the root where the function was. I eventually opened the backend folder and things started to flow.

CI/CD and Git

This was probably the part that got me the most excited. I could host something locally and push it to the internet and the repo would make the changes automatically. I used GitHub Actions for this and with a small number of tweaks to Microsoft's template files, things were running moving smoothly.

Being able to make a small change and not have to worry about moving files around or making sure you have the right file in the right place was exciting for me.

Next Steps

I think the next thing I wanted to implement was a REST api interface, specifically where I can invoke-restmethod in Powershell and get a response.

This isn't a 'next step' at this point but when I started the challenge I also wanted to get the Azure Solutions Architect Expert certification and I completed that on April 5th.

Thanks

I wanted to give a quick shout out to Forrest Brazeal for writing the Cloud Resume Challenge book. I also wanted to thank Gwyn Peña-Siguenza for the guide video related to Azure and the rest of her Cloud/Azure content.