[Functions] GraphQL - Azure - Memo

(自分用メモ)
GraphQLを試す。

- [目次: Azure Development](https://qiita.com/search?sort=&q=tag%3AAzure+tag%3Adevelopment+user%3Ashokkaa)

## 環境
- Windows 11 (+ Ubuntu on WSL)
- VSCode (+ Azure Tools plugin)
- [Azure CLI](https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli-linux?pivots=apt)
- [Azure Functions Core Tool](https://learn.microsoft.com/ja-jp/azure/azure-functions/functions-run-local?tabs=v4%2Clinux%2Ccsharp%2Cportal%2Cbash)

## コード
https://github.com/kyoya-p/az-grpql/releases/tag/Release_day4

## [Azure公式サンプル](https://learn.microsoft.com/ja-jp/azure/developer/javascript/how-to/with-web-app/graphql/azure-function-hello-world?tabs=visualstudiocode)の追試

### 準備

VSCodeの場合 F1➔Remote-WSL WSL環境に切り替えておく
※Windowsでも動作はするがdateコマンドとかで一時停止させられる

> sudo apt install -y curl
> curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
> sudo apt install nodejs -y
> node -v // version確認 v16.17.0
> sudo apt install azure-cli -y

> git clone https://github.com/Azure-Samples/js-e2e-azure-function-graphql-hello.git

### ローカルで実行

> npm i
> npm run build
> npm run start:local

ブラウザで `http://localhost:7071/api/graphql` を開く➔
```:クエリをこれに差し替えてRun
{
    hello
}
```

```:期待する応答
{
  "data": {
    "hello": "Hello from our GraphQL backend!"
  }
}
```

### クラウドにデプロイ
AzureにFunctionAppを作成([パラメタ注意](https://learn.microsoft.com/ja-jp/azure/developer/javascript/how-to/with-web-app/graphql/azure-function-hello-world?tabs=visualstudiocode#create-your-azure-function-resource-from-vs-code): Node.jsとLinuxを選択)
VSCodeで Azure ➔ RESOURCE ➔Sunction App ➔ デプロイしたいFunctionApp名 ➔ [Deploy to Function App...] (数分かかる、output windowをチェック)
➔ [Functions] ➔ [graphql] ➔ [Copy Function Url] FunctionのURLを取得し、ブラウザで開く
```bash:クエリ発行
curl --request POST \
  --header 'content-type: application/json' \
  --url 'https://shokkaa0922a.azurewebsites.net/api/graphql' \
  --data '{"query":"query { hello }"}'
```
```:期待する応答
{"data":{"hello":"Hello from our GraphQL backend!"}}
```


## GitHub Actionsでデプロイ
### GitHub Action設定ファイルの修正
```: FunctionApp名、GithubActionに設定したsecretを合わせる
jobs:
  build-and-deploy:
    steps:
      // ...
      - name: 'Run Azure Functions Action'
        with:
          app-name: ${{ env.AZURE_FUNCTIONAPP_NAME }}
          publish-profile: ${{ secrets.AZURE_FUNCTIONAPP_PUBLISH_PROFILE }}
```

- [github/workflows/*.yml がGitHub Actionのデプロイスクリプト](https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions)

https://qiita.com/shokkaa/items/9d44a6043dd9b3907748

### Commit/Push
### 検証
Azure ➔ FunctionApp ➔ Function ➔ 関数のURLの取得(https://{FunctionApp名}.azurewebsites.net/api/graphql)
➔ ブラウザでURLを開く ➔ GraphQLクライアントツールが表示される ➔ Query your server ➔ Queryを入力しRun
```:Query
{
    hello
}
```

または、
```:コマンドライン
curl https://$FunctionAppName.azurewebsites.net/api/graphql -H 'content-type: application/json' --data-raw '{"query":"{hello}"}'
```
```:期待の結果
{"data":{"hello":"Hello from our GraphQL backend!"}}
```


## 次回

https://qiita.com/shokkaa/items/9593cf1b5794104271f6

## 参照

https://learn.microsoft.com/ja-jp/azure/developer/javascript/how-to/with-web-app/graphql/azure-function-hello-world?tabs=visualstudiocode

https://techblog.ap-com.co.jp/entry/2022/08/29/173417

https://medium.com/credera-engineering/how-to-build-a-serverless-graphql-api-with-cosmos-db-9dc67ac82703

https://opentdb.com/

https://qiita.com/shokkaa/items/9d44a6043dd9b3907748

https://qiita.com/shokkaa/items/3e46e1b9ae24e05d818e

https://qiita.com/shokkaa/items/ee33b6d7736e81119be7