[Functions] GraphQL - Azure - Memo

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

• 目次: Azure Development

環境

• Windows 11 (+ Ubuntu on WSL)
• VSCode (+ Azure Tools plugin)
• Azure CLI
• Azure Functions Core Tool

コード

Azure公式サンプルの追試

準備

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を作成(パラメタ注意: Node.jsとLinuxを選択)
VSCodeで Azure ➔ RESOURCE ➔Sunction App ➔ デプロイしたいFunctionApp名 ➔ [Deploy to Function App...] (数分かかる、output windowをチェック)
➔ [Functions] ➔ [graphql] ➔ [Copy Function Url] FunctionのURLを取得し、ブラウザで開く

クエリ発行

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のデプロイスクリプト

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!"}}

次回

参照