Bubble用のAPIを AWSで Lambda と API Gateway を使って作成する

# 概要
- Bubble の API Connector から呼び出す先のAPIを作成する
    - サンプルとして、名前と回数を受け取り、挨拶を返すAPIを作成する
- Bubbleからのパラメタは`queryStringParameters`に入る
- AWSを使う
    - Lambdaを使うと、サーバのことを考えずにコードを実行できる
    - API Gatewayを使うと、APIの構築、デプロイ、管理ができる。URLを割り当ててくれる。
- (本番運用の際はセキュリティを考慮する)


# Lambda関数の作成(Python)

## 関数の作成
- Lambdaの画面を開く
- 「関数の作成」ー「一から作成」
- 以下で作成
    - 名前: greeting
    - ランタイム: Python 3.8

![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/d849335d-ed83-61ed-bf64-e021e0aee439.png)



- 関数コードを以下で作成 (lambda_function.py)

```python
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-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/9e785e6e-ae6a-e4b6-b4e7-b93c65790a13.jpeg)



- テストイベントを以下で作成
    - 新しいテストイベントの作成
    - イベントテンプレート: hello-world
    - 名前：greetingTest01
    - jsonは以下の通り

```json
{
  "queryStringParameters": {
    "name": "jansnap",
    "count": "3"
  }
}
```

![image03-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/74ebe475-67ab-7623-8863-4611e89fbbd1.png)
![image03-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/dc333bd4-a6b6-45d1-2337-122d0e6d3de4.png)


- 「テスト」をクリックして、テストを実施
    - `statusCode`に200(OK)が返ってくること
    - `body`に想定通りの文字列が返ってくること
![image04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/1240b62d-51b4-81bd-a0bc-26eb4c39b240.jpeg)

# API Gateway の設定

## トリガの設定

- 下の方のデザイナの欄で、「トリガーを追加」をクリック

![image05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/7dc11c2c-65d6-2878-7ebb-690ac3ca0f1f.png)

- 以下で設定
    - トリガーを選択: API Gateway
    - API: APIを作成する
    - APIタイプ: HTTP API
    - セキュリティ: オープン
    - API名: greeting-API
    - デプロイされるステージ: default

![image06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/47072102-89bd-de9c-f84a-c906d157fe8d.png)
![image07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/61f8e526-da9a-8454-eda2-17d9e8d505c6.png)
![image08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/ca0a648f-a455-351e-c503-cc4af66d38c3.png)


- デザイナ画面に戻り、API Gatewayが追加されているのを確認する
![image09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/85535b09-4fd6-2f4b-94ad-e2c19ce83c11.png)


# API Gateway のURLの確認
- 下にスクロールして、API Gatewayをクリックし、「APIエンドポイント」のURLをコピーしておく(Bubbleで呼び出す際に使う)

![image10-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/4efb0c9c-6332-dfcc-233d-a280a0a966bf.jpeg)


続いて、[APIを呼び出す設定をBubble側で行います](https://note.com/jansnap/n/nf41daf8717e2)。



# 参考URL

- [【Bubble x AWS】Bubble API Connector + AWS Lambda + Amazon API Gatewayで連携](https://qiita.com/takahiro-kato/items/c07b4f92795ab2f4c397)