12/10 Azure Static Web Apps

この記事は、Serverless Hello World Advent Calendar 2020の10日目です。

Azure Static Web Appsを使ってHTTP APIを実装します。
APIの追加を参考にすすめていきます。

関数の作成

Azure Static Web Appsでは通常ReactやAngularなどのレポジトリをベースにしますが、今回は静的ファイルは不要なのでいきなり関数を書いていきます。ただし、最低でもひとつHTMLが必要である仕様とのことなので、空の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 ..

認証を不要に設定

生成されたテンプレートそのままだと、Azureにデプロイすると関数毎に設定されたキーが必要となります。認証が不要となるようにhello/function.jsonを修正し、authLevelをanonymousにします。

api/hello/function.json

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

      ...(省略)...

    }
  ]
}

デプロイ

リソースグループを作成し、その中にAzure Static Web Appsを構築します。
デプロイはGitHub経由で行うため、あらかじめ個人用アクセストークンを取得しておく必要があります。権限はrepoのほかにデプロイ設定用のworkflowも必要です。
ロケーションはまだ日本に来ていないので東アジア(eastasia)にします。

$ 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個人用アクセストークン>
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"
}

デプロイされたURLは出力されたJSONのdefaultHostnameにあります。

$ 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)

...(省略)...

> 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.%

Azure上にhello関数をデプロイできました。