どうもこんにちは。

今回は、ローカル環境で動かしているアプリケーションとAPI Gatewayでやりとりするための方法をメモとして残しておきたいと思います。

環境

今回使用する環境はこちらです。

ローカル環境
- Next.js(Vercel V0で作成したアプリケーションを元にしています。)
AWSサービス
- API Gateway
- Lambda（python3.12）

Vercel V0については、以下の記事で紹介しています。

前提

今回は、ローカル環境のアプリケーションとLambda関数の作成は省略します。

API GatewayでAPIを作成

1. APIの作成

1-1. 作成画面へ

API一覧画面の右上にある「APIの作成」ボタンをクリックします。

1-2. APIの種類を選択

今回はREST APIを選択します。
REST APIの「構築」ボタンをクリックします。

1-3. 必要事項を入力

「新しいAPI」を選択して、API名を入力します。
このAPIはアプリケーション単位で作成した方が良い気がしています。（API内で複数のリソース・メソッドが作成できるため、アプリケーション1つに対してAPIは1つで良いということです。）

2. リソースを作成

次にリソースを作成します。

2-1. 作成画面へ

左上の方に「リソースを作成」ボタンがあるので、クリックします。

2-2. 必要事項を入力

リソース名には、機能名を入れると良いと思います。
（例：ユーザ管理に関する機能であればusers）

また、「CORS (クロスオリジンリソース共有)」の項目にチェックを入れておきます。

2-3. リソースができているか確認

作成したリソースが作成されているか確認します。

3. メソッドの作成

ここから、GETやPOSTなどのメソッドを作成します。
また、Lambda関数が作成されていることが前提となっている手順となります。

3-1. 作成画面へ

画面の右の方にある「メソッドを作成」をクリックします。

3-2. 必要事項を入力

以下のように入力をします。

項目名	値
メソッドタイプ	以下のいずれかを選択・GET ・POST ・PUT ・PATCH ・HEAD ・DELETE ・ANY
統合タイプ	Lambda関数を選択（VPC内に存在している場合はVPCリンクを選択？）
Lambdaプロキシ統合	ON
Lambda関数	API Gatewayと紐付けるLambda関数のARNを入力

メソッドが作成されたら、以下のようにリソースの下にメソッドが表示されます。

4. 統合リクエストの確認

4-1. 統合リクエストの設定画面へ

作成したメソッドの詳細画面に以下のような画面があるので、右上の「統合リクエスト」をクリックします。

クリックすると画面の下が統合リクエストの画面に切り替わります。

Lambdaプロキシ統合がTrueになっていることを確認してください。

5. リソースのCORSを有効にする

5-1. CORSの設定画面へ遷移

以下の画面のリソース部分（画像だと/chats）をクリックします。

画面の右側に「CORSを有効にする」ボタンが表示されているので、クリックします。

5-2. 必要項目にチェック

「ゲートウェイのレスポンス」「Access-Control-Allow-Methods」に全てチェックを入れます。
「Access-Control-Allow-Origin」に*が入力されていることを確認します。（ローカル環境での使用であれば、http://localhost:3000などと入力してもOKです。*はワイルドカードを意味しています。）

6. APIをデプロイ

これらが全て完了したらAPIをデプロイします。

6-1. デプロイ画面へ遷移

「APIをデプロイ」ボタンをクリックします。

6-2. ステージを設定

今回は新しいステージを作成します。

「新しいステージ」を選択して、ステージ名に「dev」と入力します。

入力したら「デプロイ」をクリックしましょう。
これでAPIを使用できる準備が整いました。

しかし、これだけではまだ不十分です。
Lambda関数のコード内でレスポンスヘッダーにも設定を入れる必要があります。

7. Lambda関数に設定

7-1. レスポンスヘッダーを修正

Lambda関数のコードのreturn部分でheadersを以下のように設定します。

def lambda_handler(event, context):
    # 何かしらの処理
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        },
        'body': json.dumps({
            'result': 'OK'
        })
    }

これでローカル環境からAPIを呼び出してLambda関数で処理を実行することができるはずです。

7-2. ちゃんとtry...catchはできるようにしておこう

上記のコードでうまくレスポンスが返ってこなかった場合にすぐに原因を特定できるようにはしておきましょう。

コード内では、以下のようにコードを書けばAPIのレスポンスが返ってきた時に異変に気づけます。

def lambda_handler(event, context):
    try:
        # 何かしらの処理
        return {
            'statusCode': 200,
            'headers': {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
            },
            'body': json.dumps({
                'result': 'OK'
            })
        }
    except Exception as e:
        print(f"Error: {str(e)}")
        return {
            'statusCode': 500,
            'headers': {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
            },
            'body': json.dumps({'message': 'Internal server error'})
        }

まとめ

ローカル環境からAPI Gatewayを通じてAPIを呼び出すためには、以下の2点の設定を忘れないようにしましょう。

CORSを有効にする
- Access-Control-Allow-Originを適切に設定
Lambda関数でheadersを設定

以上