S3 + API Gatewayを使ってLambdaを動かす

今回はAPI Gatewayを使ってLambdaを発火させることができたので、その方法をメモしておきます。
こちらは前回の続きです。

suguru-no-rururu.hatenablog.com

Lambda関数の作成

AWSコンソールでLambdaを開きます。右上の「関数の作成」を選択。 f:id:katttsu105:20210430220729p:plain

すると、関数の作成画面が出てくるので、

任意の関数名を入力します。今回はtestFunctionとしました。
ランタイムはNode.js 14.xにしました。
ここは自由に選んで良いと思いますが、ネットの情報を見る感じ、PythonとNode.jsが多い印象なので、どちらかを選んでおくと無難です。

入力ができたら関数の作成ボタンを押す。 f:id:katttsu105:20210501001918p:plain

作成が完了するとこんな感じの画面になります。 f:id:katttsu105:20210501002910p:plain

コードを変更しておきましょう。
コードを選択し、サイドバーのindex.jsをopenにします。

f:id:katttsu105:20210501120400p:plain そして以下のようにコードを変更します。

exports.handler = (event, context, callback) => {
    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    callback(null, event);
};

変更ができたら必ずDeployを押してください。 f:id:katttsu105:20210501120635p:plain

続いてAPI Gatewayの設定に移ります。

API GatewayでAPIの開設

AWSコンソールからAPI Gatewayの画面を開きます。
そして右上のAPIの作成を選択。 f:id:katttsu105:20210501003304p:plain

今回はREST APIを選択しました。
「構築」を選択。 f:id:katttsu105:20210501003707p:plain

画像のように設定していきます。
ここでもAPI名は任意のもので大丈夫です。
入力が完了したら、「APIの作成」を選択。
f:id:katttsu105:20210501004225p:plain

すると、APIのページに遷移します。
左上のアクションから「リソースの作成」を選択。 f:id:katttsu105:20210501004428p:plain

リソース名を入力します。
ここも任意のもので大丈夫です。
入力ができたら「リソースの作成」を選択します。 f:id:katttsu105:20210501004802p:plain

続いて、アクションからメソッドの作成をします。 f:id:katttsu105:20210501005043p:plain

先ほど作成したリソースの下に小さくメソッドを選択するとことが出てきます。
今回はformから送信ボタンを押した際に動作するAPIを作成したいので、POSTにしました。
選択ができたら、右のチェックボタンをクリックします。

f:id:katttsu105:20210501005314p:plain

セットアップ画面が出るので、ここで先ほど作成したLambda関数を選択します。

f:id:katttsu105:20210501005603p:plain

保存をクリックすると、権限を追加する警告が出ますが、OKで大丈夫です。 f:id:katttsu105:20210501005737p:plain

f:id:katttsu105:20210501005843p:plain

忘れずにAPIのデプロイをしておきましょう。
忘れがちですが、これをしないと設定が反映されません。 f:id:katttsu105:20210501112705p:plain

今回はステージ名をtest_lambdaとしました。 f:id:katttsu105:20210501112851p:plain デプロイをすると、先ほどのAPIのパスが表示されるのでメモしておきます。 f:id:katttsu105:20210501113352p:plain

マッピングテンプレートの追加もしておきます。
リソース > POST > 統合リクエストの順でクリックしていきます。 f:id:katttsu105:20210501114918p:plain

一番下にマッピングテンプレートというところがあるので、Content-Typeのところにapplication/x-www-form-urlencodedと入力します。
入力ができたら右のチェックマークを押します。 f:id:katttsu105:20210501115149p:plain すると下に入力するフォームが出てくるので、以下を入力します。

{
  "body" : $input.json('$')
}

入力ができたら保存してください。 f:id:katttsu105:20210501115350p:plain

以上でAPI Gatewayの設定は完了です。

S3にフォームのHTMLをアップロード

続いて先ほどのAPIを叩くためのフォームを用意します。
formタグのactionのところに先ほどのパスを貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>

<h1>S3#index.html<h1>
  <form action="https://{先ほどメモしたパスを貼り付け}/test_lambda/form" method="post">
    <input type="submit" value="送信">
  </form>
</html>