設定の概要
やることは以下の通りです。
- Lamdbda
- バージョンやエイリアスを作成する
- API Gateway の呼び出し許可のためにリソースベースのポリシーを作成する
- API Gateway
- Lambda 関数名に
{stageVariables.version}や{stageVariables.alias}を含める - ステージ変数を追加する
- Lambda 関数名に
手順
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>
参考記事