概要
- Bubble の API Connector から呼び出す先のAPIを作成する
- サンプルとして、名前と回数を受け取り、挨拶を返すAPIを作成する
- Bubbleからのパラメタは
queryStringParameters
に入る - AWSを使う
- Lambdaを使うと、サーバのことを考えずにコードを実行できる
- API Gatewayを使うと、APIの構築、デプロイ、管理ができる。URLを割り当ててくれる。
- (本番運用の際はセキュリティを考慮する)
Lambda関数の作成(Python)
関数の作成
- Lambdaの画面を開く
- 「関数の作成」ー「一から作成」
- 以下で作成
- 名前: greeting
- ランタイム: Python 3.8
- 関数コードを以下で作成 (lambda_function.py)
import json
def lambda_handler(event, context):
if not 'queryStringParameters' in event:
return {
'statusCode': 200,
'body': json.dumps({'description': 'no query found.'})
}
query = event['queryStringParameters']
name = query['name']
count = query['count']
description = f'{name} say hello {count} times.'
greeting = name + ': ' + 'hello ' * int(count)
return {
'statusCode': 200,
'body': json.dumps({
'description': description,
'greeting': greeting,
})
}
テストイベントの追加とテスト
- 右上の「テスト」の左にある欄をクリックし、「テストイベントの設定」
![image02.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F9e785e6e-ae6a-e4b6-b4e7-b93c65790a13.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=083d21eb8b824f0012bf8f1e70c0ac37)
- テストイベントを以下で作成
- 新しいテストイベントの作成
- イベントテンプレート: hello-world
- 名前:greetingTest01
- jsonは以下の通り
{
"queryStringParameters": {
"name": "jansnap",
"count": "3"
}
}
![image03-2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F74ebe475-67ab-7623-8863-4611e89fbbd1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=35c03bd54fdfd7cbf5da97d5851d726e)
![image03-3.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2Fdc333bd4-a6b6-45d1-2337-122d0e6d3de4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ffe1f4e5e46e8d1b6badbdad35f936cb)
- 「テスト」をクリックして、テストを実施
statusCode
に200(OK)が返ってくること
body
に想定通りの文字列が返ってくること ![image04.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F1240b62d-51b4-81bd-a0bc-26eb4c39b240.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1cc7e572f540244d14e072c787f6dc3a)
API Gateway の設定
トリガの設定
- 下の方のデザイナの欄で、「トリガーを追加」をクリック
![image05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F7dc11c2c-65d6-2878-7ebb-690ac3ca0f1f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5eb6faf08b0118d5d1376362929870ac)
- 以下で設定
- トリガーを選択: API Gateway
- API: APIを作成する
- APIタイプ: HTTP API
- セキュリティ: オープン
- API名: greeting-API
- デプロイされるステージ: default
![image06.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F47072102-89bd-de9c-f84a-c906d157fe8d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c966153202ba174cfc1c6b71155e9b88)
![image07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F61f8e526-da9a-8454-eda2-17d9e8d505c6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0d77739661c00f533b9068fa8d81c76d)
![image08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2Fca0a648f-a455-351e-c503-cc4af66d38c3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e4be0ea0e3d2af7625939d46d12eed47)
- デザイナ画面に戻り、API Gatewayが追加されているのを確認する
![image09.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F85535b09-4fd6-2f4b-94ad-e2c19ce83c11.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=432c635d0dbd10d6eb87e10f7dba81ae)
API Gateway のURLの確認
- 下にスクロールして、API Gatewayをクリックし、「APIエンドポイント」のURLをコピーしておく(Bubbleで呼び出す際に使う)
![image10-2.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F142577%2F4efb0c9c-6332-dfcc-233d-a280a0a966bf.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6fae2bc00b76ca744c9920e54a7a6e1c)
続いて、APIを呼び出す設定をBubble側で行います。
参考URL