REST API としてAWS Lambda関数を呼び出す

## REST API とは

- APIをインターネットへ公開し、JavaScript等から呼び出すしくみです。
- 呼び出しのパラメータ及び戻り値はJSONが使われる場合が多いです。

## API Gateway とは

- [AWS Lambda関数](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/welcome.html)をインターネット経由でREST API として呼び出すことができます。
- [Amazon API Gateway の概念](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-basic-concept.html)

## この記事の目的

- AWS API Gatewayを経由してLambda関数を呼び出すよう構成します。
- Angularのタイプスクリプトから定義したAPIを呼び出します。

## Lambda関数を作成

- 関数を作成します。  
![image](https://user-images.githubusercontent.com/38905609/176989981-393117ef-baef-48ee-abfb-dd072dcb73a9.png)

&nbsp;  

- Pythonで作成します。  
![image](https://user-images.githubusercontent.com/38905609/176990022-248a2555-b73b-473e-bb50-76e03021a137.png)

&nbsp;  

- 入力イベントをそのまま返却するテストコードにします。  
- return の記述はCORS対策です。  

[`lambda_function.py`]

```python:lambda_function.py
import json

def lambda_handler(event, context):

    print("event")
    print(event)

    return_data = event

    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': '*'
        },
        'body': json.dumps(return_data)
    }

```

![image](https://user-images.githubusercontent.com/38905609/176990145-1ad47a74-29a2-4cbc-89be-7079d8791895.png)

## API Gatewayを作成

- APIを作成します。  
![image](https://user-images.githubusercontent.com/38905609/176990238-dbfb8a45-098c-4016-bd2b-c7fe6337d833.png)

&nbsp;  

- REST API を作成します。  
![image](https://user-images.githubusercontent.com/38905609/176990255-ac93289c-f0e8-4f07-a9ab-c78535bc8cb6.png)

&nbsp;  

- API名はLambda関数名と合わせておくと分かりやすいです。(別でも可)
![image](https://user-images.githubusercontent.com/38905609/176990321-5bb3adff-1765-4761-b2ea-2cf1c15ceb28.png)

## API Gatewayを設定

- メソッドの作成を選択します。  
![image](https://user-images.githubusercontent.com/38905609/176991076-782aaa7f-e35f-4a53-bd68-b586f62a9b98.png)

&nbsp;  

- Lambdaプロキシ統合の使用をチェックします。
- Lambda関数名を指定します。
![image](https://user-images.githubusercontent.com/38905609/176991148-8246265b-9e20-4d68-a2c1-8ffb34269302.png)

&nbsp;  

- CORSを有効化します。  
![image](https://user-images.githubusercontent.com/38905609/177022098-e36c34c4-0358-4798-84a4-3189e816fb50.png)
![image](https://user-images.githubusercontent.com/38905609/177022136-055c33ce-9bbc-4041-b040-92edc2371084.png)

&nbsp;  

- APIをデプロイします。  
![image](https://user-images.githubusercontent.com/38905609/177019653-a0b4ec15-dba8-459e-a908-c015cd91f807.png)
![image](https://user-images.githubusercontent.com/38905609/177019686-27766cc6-c659-4519-a06d-6467a4682137.png)

## APIのURLを取得

- APIをデプロイするとURLが発行されるため、これを取得します。  
![image](https://user-images.githubusercontent.com/38905609/177022661-1b0ff43f-edb6-4c09-b83e-a6dca0749cf6.png)

## 👇以下は"Angular Material 標準コンポーネント構成"を前提とします。詳細は以下記事参照下さい

- [Angular Material 標準コンポーネント構成の作成](https://docusaurus.plant11.com/angular/base_components)

## API呼び出し処理組み込み

- HttpClientを組み込みます。  
[`main.component.ts`]

```ts:main.component.ts
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

...

export class MainComponent implements OnInit {

  constructor(
    private commonService:CommonService,
    private http: HttpClient,
  ) { }

```

- API呼び出し処理を記載します。
- `https://xxxxxxxxxx1.execute-api.ap-southeast-1.amazonaws.com/v1`の箇所に上記"APIのURLを取得"で取得したURLを記載します。  
[`main.component.ts`]

```ts:main.component.ts
  button02Click(){

    let httpHeaders = new HttpHeaders({
      'Content-Type' : 'application/json',
    });
    let get_params = new HttpParams()
      .set("param1","aaa");

    let options = {
      headers: httpHeaders,
      params: get_params,
    };
    const url = "https://xxxxxxxxxx1.execute-api.ap-southeast-1.amazonaws.com/v1";

    this.http.get<any>(url, options).subscribe({
      next:(data) => {
        console.log("OK");
        console.log(data);
      },
      error:(e) =>{
        console.log("NG");
        console.error(e);
      },
      complete: () => {
        console.log("complete");
      }
    })

  }

```

[`main.component.html`]

```html:main.component.html
<button mat-raised-button color="primary" (click)="button02Click()">Call Func</button>
```

## 動作確認

- ローカルサーバを起動します。

```ps
PS C:\home\git\material.angular.github> ng s --o
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   5.67 MB |
polyfills.js          | polyfills     | 315.34 kB |
styles.css, styles.js | styles        | 285.62 kB |
main.js               | main          |  86.13 kB |
runtime.js            | runtime       |   6.54 kB |

                      | Initial Total |   6.35 MB

Build at: 2022-07-03T03:09:03.507Z - Hash: c139c2d3e9ea05af - Time: 4156ms

Warning: C:\home\git\material.angular.github\src\app\common.service.ts depends on 'buffer'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

√ Compiled successfully.
```

- "Call Func"をクリックして、コンソールに"OK"と表示されることを確認します。  
![image](https://user-images.githubusercontent.com/38905609/177025133-b30e30aa-2923-4442-a556-56f970c39955.png)

## 👇前提記事

- [Angular Material 標準コンポーネント構成の作成](https://docusaurus.plant11.com/angular/base_components)

## 👇関連記事

- [AWS Cognito ユーザープールを認証制御に利用してLambda関数を呼び出す](https://docusaurus.plant11.com/AWS/cognito_auth)

## 👇参考URL

- [AWS Lambda とは](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/welcome.html)
- [Amazon API Gateway の概念](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-basic-concept.html)