12/10 Azure Static Web Apps

이 글은 Serverless Hello World Advent Calendar 2020 열흘째다.
Azure Static Web Apps를 사용하여 HTTP API를 설치합니다.
아래 참조API 추가로 소개합니다.

함수 만들기

Azure Static Web Apps는 보통 React와 Anglar 등의 복제품을 기반으로 하는데 이번에는 정적 파일이 필요 없어 갑자기 함수를 적었다.그러나 최소한 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를 구성합니다.
depro는 GiitHub을 거쳐 진행되기 때문에 미리 개인 액세스 토큰 획득 진행해야 한다.권한은 필요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은 출력된 JSONdefaultHostname에 있습니다.

$ 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 함수를 프로그래밍할 수 있습니다.