Day 12/10: Azure Static Web Apps

This article is for day 10 of the Serverless Hello World Advent Calendar 2020.

I will implement an HTTP API using Azure Static Web Apps.
I'll proceed by referring to Add an API.

Creating the Functions

Azure Static Web Apps usually base themselves on repositories for React, Angular, or similar frameworks, but since I don't need static files this time, I will jump straight into writing functions. However, the specification requires at least one HTML file, so I will place an empty index.html.

$ mkdir serverless-helloworld-azure-static-web-apps
$ cd serverless-helloworld-azure-static-web-apps
$ touch index.html
$ git init
$ func init api --worker-runtime node
$ cd api
$ func new -n hello -t 'HTTP trigger
$ cd ..

Configuring to Disable Authentication

With the generated template as is, a key configured for each function is required when deployed to Azure. I will modify hello/function.json to change the authLevel to anonymous so that authentication is not required.

api/hello/function.json

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",

      ...(omitted)...

    }
  ]
}

Deployment

I will create a resource group and build Azure Static Web Apps within it.
Since deployment is performed via GitHub, you need to obtain a personal access token in advance. In addition to repo permissions, the workflow permission is also required for deployment configuration.
The location will be set to East Asia (eastasia), as it is not yet available in Japan.

$ az group create --name adventcalendar10 --location japaneast
$ az staticwebapp create \
    -n serverless-helloworld \
    -g adventcalendar10 \
    -s https://github.com/nekoruri/serverless-helloworld-azure-static-web-apps \
    -l eastasia \
    -b main \
    --api-location /api \
    --token <GitHub Personal Access Token>
Command group 'staticwebapp' is in preview. It may be changed/removed in a future release.
{
  "branch": "main",
  "buildProperties": null,
  "customDomains": [],
  "defaultHostname": "jolly-cliff-076dd5600.azurestaticapps.net",
  "id": "/subscriptions/102e6d73-eb22-43bb-b8ff-ce13e58dc569/resourceGroups/adventcalendar10/providers/Microsoft.Web/staticSites/serverless-helloworld",
  "kind": null,
  "location": "East Asia",
  "name": "serverless-helloworld",
  "repositoryToken": null,
  "repositoryUrl": "https://github.com/nekoruri/serverless-helloworld-azure-static-web-apps",
  "resourceGroup": "adventcalendar10",
  "sku": {
    "capabilities": null,
    "capacity": null,
    "family": null,
    "locations": null,
    "name": "Free",
    "size": null,
    "skuCapacity": null,
    "tier": "Free"
  },
  "tags": null,
  "type": "Microsoft.Web/staticSites"
}

The deployed URL is found in the defaultHostname of the outputted JSON.

$ curl -v 'https://jolly-cliff-076dd5600.azurestaticapps.net/api/hello?name=world'                                                        <main 1:37>
*   Trying 52.175.36.249:443...
* TCP_NODELAY set
* Connected to jolly-cliff-076dd5600.azurestaticapps.net (52.175.36.249) port 443 (#0)

...(omitted)...

> GET /api/hello?name=world HTTP/2
> Host: jolly-cliff-076dd5600.azurestaticapps.net
> user-agent: curl/7.68.0
> accept: */*
> 
* Connection state changed (MAX_CONCURRENT_STREAMS == 100)!
< HTTP/2 200 
< content-length: 65
< content-type: text/plain; charset=utf-8
< date: Mon, 21 Dec 2020 16:37:39 GMT
< 
* Connection #0 to host jolly-cliff-076dd5600.azurestaticapps.net left intact
Hello, world. This HTTP triggered function executed successfully.%

I have successfully deployed the hello function on Azure.