Azure Tips

Running an Azure Function

Azure functions are contained inside Function App resources, which are a kind of App Service. For example, the screenshot below shows a Function App called ccl-experiment-1. Drilling on its Functions from the sidebar reveals that there is one Azure function in this app, called HTTP_ccl_experiment_1, which is a kind of HTTP trigger.

../_images/azure_function_in_portal.PNG

To invoke the function, one uses the URL https://ccl-experiment-1.azurewebsites.net/api/HTTP_ccl_experiment_1 which is built out from the name of the app (ccl-experiment-1) as a subdomain from azurewebsites.net, and the actual function’s name HTTP_ccl_experiment_1.

This particular function takes a query parameter name and then returns a Hello <name> message. Here is a sample run:

../_images/invocation_of_azure_function.PNG

Using virtual environments with Azure functions

Visual Studio Code creates a virtual environment for Azure functions, in a folder called .venv. It has its own copy of Python, pip, and site libraries.

I haven’t found a successful way to activate this environment. Doing source .venv does not seem to work.

However, it seems that we can run install commands for this environment by doing a pip install as invoked as a script by the Python in the environment of interest. For example:

$ .venv/Scripts/python -m pip install --upgrade pip
Collecting pip
Using cached https://files.pythonhosted.org/packages/43/84/23ed6a1796480a6f1a2d38f2802901d078266bda38388954d01d3f2e821d/pip-20.1.1-py2.py3-none-any.whl
Installing collected packages: pip
Found existing installation: pip 19.2.3
    Uninstalling pip-19.2.3:
    Successfully uninstalled pip-19.2.3
Successfully installed pip-20.1.1

Deploy a static website to Azure

Simplest way is to host in Azure storage

Using as an example static website CCL Notebooks, one notes that we end up creating three endpoints, all of them pointing to the same content, in this order:

  • Azure Blob Storage endpoint: https://cclstaticsitesnodr001.z22.web.core.windows.net/ is created when the storage account cclstaticsitesnodr001 is configured to host a static website

  • Azure CDN endpoint: https://ccl-labnotebooks.azureedge.net/ is created when we map a custom domain name to the Azure Blob Storage endpoint

  • Nice CCL endpoint: https://notebooks.chateauclaudia-labs.com/ is created when we map a custom domain to the Azure CDN endpoint.

Below are the steps in this example, using the Azure Portal:

1. Create and name an Azure Storage resource

The name must be unique in Azure, and in our example it is chosen by combining these tokens:

  • ccl - since that is the organization owning the site (Chateau Claudia Labs, aka CCL)

  • staticsites - since this is meant to hold static web sites for CCL

  • nodr - since we chose a cheap configuration for the storage account, which includes no disaster recovery, not needed in this case since the content originates in a Sphinx project in source control kept off Azure

  • 001 - to support the possibility of multiple such accounts being created in the future

The storage account for CCL Notebooks was configured to be very cheap, an looks like this:

../_images/cheap_storage_account.PNG

2. Configure the Azure Storage to host a static website

As described in host in Azure storage

../_images/enable_static_website_in_storage_account.PNG

3. Upload of Content

This applies both to initial content as well as to a full update of the web site as its content evolves.

I prefer to do this from Visual Studio Code.

This is described in Deploy from Visual Studio Code

One selects the “Azure” icon on the left side of VS Code, which brings up some icons including an upload icon. Selecting it lets you choose the site to upload (which in this example should be build, since the Sphinx project built the site in that folder):

../_images/deploy_static_site_to_azure.PNG

4. Map custom domain to Azure Blob Storage endpoint

This is described in how to map custom domain to storage endpoint

This creates an Azure CDN endpoint in the Azure CDN Profile, highlighted in red in this picture:

../_images/azure_cdn_endpoint.PNG

5. Map custom domain to Azure CDN endpoints

Lastly, one has to create a CNAME with the domain provider (DreamHost in the example), as explained in How to add a custom domain to an Azure CDN endpoint

In DreamHost, the CNAME entry looks like this:

../_images/dreamhost_cname.PNG


It results in the Azure CDN endpoint being mapped to a CCL endpoint, like this, highlighted in red:

../_images/ccl_endpoint.PNG
Vue.js Tips People & Processs