How to deploy Single Web Page with Azure-Function

Photo by Dell on Unsplash

How to deploy Single Web Page with Azure-Function

What is Azure-Function?

Azure Functions is a serverless solution that allows you to write less code, maintain less infrastructure, and save on costs. Instead of worrying about deploying and maintaining servers, the cloud infrastructure provides all the up-to-date resources needed to keep your applications running.

Here are some key features of Azure Functions:

  1. Event-based computing: Azure Functions supports event-based computing that can be triggered by events such as changes in database entries, the arrival of messages, timers, and many more. These events are handled by functions that execute a specific task or process.

  2. Multiple languages support: Azure Functions support many languages such as C#, Python, Java, and Node.js. This increases the flexibility for developers to choose the language of their preference.

  3. Pay-per-use model: Azure Functions follow a pay-per-use model, which means that you pay only for the time your code runs. This makes Azure Functions a cost-effective solution for smaller applications.

  4. Scalability: Azure Functions is designed to support automatic scale-out based on the number of incoming requests. This ensures the application can handle a high load of incoming requests without crashing.

  5. Integration with other Microsoft services: Azure Functions can integrate with many other Microsoft services such as Azure Storage, Azure Cosmos DB, Azure Event Grid, and Azure Service Bus. This enables you to create complex architectures and solutions.

Prerequisites

  1. Azure account

  2. Azure Functions Core Tools

  3. Python

  4. Visual Studio Code

  5. Python extension

  6. Azure Functions extension

Create your local project

  1. Create the workspace:

  2. Select -

    • Choose the folder location

    • HTTP trigger

    • Enter provide function name (Azure-Blog-Website)

    • Anonymous

    • Now the function is created

  3. After Creating the function, run the function locally:

     func host start
    

    Click on the Url: http://localhost:7071/api/Azure-Blog-Website

    Now the function runs perfectly!

Add the Code

  1. Update the code in _ini_.py

    ```python import os import logging

    import azure.functions as func

def main(req: func.HttpRequest) -> func.HttpResponse: logging.info('Python HTTP trigger function processed a request.')

Get the path to the requested file

file_name = req.route_params.get('file_name', 'index.html') file_path = os.path.join(os.getcwd(),'Azure-Blog-Website','Content', file_name)

try:

Open the requested file and read its contents

with open(file_path, 'r') as f: file_contents = f.read()

Return the contents of the file as the HTTP response body

return func.HttpResponse(file_contents, mimetype='text/html')

except FileNotFoundError:

If the requested file does not exist, return a 404 error

return func.HttpResponse("File not found", status_code=404)


2. Add the HTML code in Azure-Blog-Website/Content/index.html location:

    ```python
    <!DOCTYPE html>
    <html>
    <head>
        <title>My Blog</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
            /* Global styles */

    body {
        margin: 0;
        font-family: Arial, sans-serif;
        color: #333;
        background-color: #f7f7f7;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Header styles */

    header {
        background-color: #139977;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    header h1 {
        margin: 0;
        font-size: 32px;
    }

    nav {
        float: right;
    }

    nav ul {
        display: flex;
    }

    nav li {
        padding-bottom: 40px;
        margin-left: 60px;
        font-size: 20px;
        font-weight:500;
    }

    /* Main styles */

    main {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .post {
        margin-bottom: 40px;
    }

    .post h2 {
        margin-top: 0;
    }

    /* Footer styles */

    footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }

    @media only screen and (max-width: 600px) {
        /* Small devices (phones) */
        header h1 {
            font-size: 24px;
        }
        nav {
            float: none;
            margin-top: 20px;
        }
        nav ul {
            display: block;
            margin: 0;
            padding: 0;
        }
        nav li {
            padding-bottom: 20px;
            margin-left: 0;
            font-size: 16px;
        }
        main {
            max-width: 100%;
            padding: 10px;
        }
    }

        </style>
    </head>
    <body>
        <header>
            <h1>My Blog</h1>
        </header>

        <main>
            <section class="post">
                <h2>What is Serverless</h2>
                <h3>Overview</h3>


                <p>
                    Serverless Computing is a way of building and running applications and services without having infrastructure. This means that you don't have to worry about maintaining servers to run your code, as an infrastructure managed by a cloud provider(aws, azure, gcp cloud).

                    Serverless doesn't mean that they don't have servers. There are still servers but they are abstracted away from app development. It means that you don't need to maintain, provision, or scale servers, you only need to focus development side. This can save time and money, and allow developers to focus on writing code.

                    Serverless computing uses event-triggered stateless containers to host your services. They can scale out and in to meet demand as needed.
                </p>

                    <h3>How does it work?</h3>
                    In a serverless architecture, you write and deploy your code as functions. These functions are executed in response to events, such as an HTTP request, a database write, or a message published to a message queue. When an event occurs, the cloud provider runs the functions and returns the result to the client.
                </p>
                <h3>Benefits of serverless architecture</h3>
                    Cost-effective: You only pay for the resources that your functions use when they are executing.

                    Scalability: Your functions can automatically scale up or down based on demand, so you don't have to worry about capacity planning.

                    Flexibility: You can write code in any language as suits you best.

                    Speed: You can deploy and update your functions quickly.

                    Simplicity: You don't have to worry about infrastructure, so you can focus on writing code and building your applications.</p>

                    <h3>Drawbacks</h3>
                <p>
                    Complexity: Serverless architectures can be more complex to design and build, especially if you are using multiple functions and triggers. This can make it more difficult to debug and troubleshoot issues.

                    Higher cost: While serverless architectures can be cost-effective at lower scales, they can become more expensive as the scale increases.

                    Cold starts: When a function is triggered for the first time, or after it has been idle for a while, there can be a delay before the function starts executing.</p>

                    <h3>conclusion</h3>
                    Overall, Serverless computing is a powerful technology to build and deploy applications. If you are looking to build and deploy an application quickly, serverless computing would be worth considering.</p>

            </section>


        </main>

        <footer>
            <p>&copy; 2023 My Blog</p>
        </footer>

    </body>
    </html>
  1. Save the file and Run `` func host start ```

Deploy to Azure-Function

  1. Go to the Azure portal and Select Function App :

  2. Create the function app:

    Choose the Resource Group, Function App name, Python runtime stack, version 3.9, region(acc. to you) and Consumption (Serverless).

  3. Click Review and Create.

  4. Click Deploy to Function App...

  5. Now the function is deployed, you can see this Url on the OUTPUT: https://blog-website.azurewebsites.net/api/Azure-Blog-Website

Wow, that's awesome! We now have the web page up and running with the Azure function. I hope you all enjoy it!

Connect with me

Did you find this article valuable?

Support Sachin Parihar by becoming a sponsor. Any amount is appreciated!