設定の概要

やることは以下の通りです。

Lamdbda
- バージョンやエイリアスを作成する
- API Gateway の呼び出し許可のためにリソースベースのポリシーを作成する
API Gateway
- Lambda 関数名に {stageVariables.version} や {stageVariables.alias} を含める
- ステージ変数を追加する

手順

Lambda

バージョンやエイリアスを作成する

ここではバージョンを作成します。

「新しいバージョンを発行」をクリックします。

「発行」をクリックします。

API Gateway の呼び出し許可のためにリソースベースのポリシーを作成する

これは次の API Gateway の手順の途中で設定します。API Gateway の ID やステートメント ID という API Gateway が発行する ID が必要であるためです。

API Gateway

Lambda 関数名に {stageVariables.version} や {stageVariables.alias} を含める

メソッドは POST でも GET でも問題ありません。ポップアップが出てきたとき注意してください。Lambda のリソースベースのポリシーに必要な値です。

ポップアップ

「OK」は Lambda のリソースベースのポリシーを設定するまで押しません。

新しいタブで Lambda 関数のアクセス権限を開きます。

上記のポップアップの各値を以下のように設定します。

その後「OK」をクリックし、ポップアップを閉じます。

ステージ変数を追加する

CORS を有効化し、API をデプロイします。その後、「ステージ変数」タブでステージ変数を追加します。ここには Lambda 関数のバージョンを入力します。

最後に「設定」タブをクリックし、「変更を保存」をクリックします。

エイリアスの場合も同じ手順です。

テスト

以下のコードで動作確認を行いました。

index.html

<!DOCTYPE html>
<html>
<body>
  <button onclick="myFetch()">click</button>
  <script>
    function myFetch() {
      const raw = JSON.stringify({test: 'hello'});
      const myHeaders = new Headers();
      myHeaders.append('Content-Type', 'application/json');
      const requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
      };
      fetch('https://API_GATEWAY_ID.execute-api.ap-northeast-1.amazonaws.com/ver', requestOptions)
        .then(response => response.text())
        .then(result => {
          console.log(result);
        })
        .catch(error => {
          console.log(error);
        });
    }
  </script>
</body>
</html>

参考記事