API Gateway と Lambdaでお問い合わせフォームを作る #AWS

Gaiax Advent Calender 2016の25日目の記事です。AIRY事業部の三井です。

少し前に製品サイトの環境構築に携わりました。静的コンテンツのホスティングだけであればS3だけでよいと思うのですが、お問い合わせフォームを設けたかったのでサーバ立ててまっさらな状態から構築しました。しかし最近では動的コンテンツもAPI GatewayとLambdaを使うとサーバレスで実現できるそうなので試してみました。
今回は手元のお問い合わせフォームから送信した情報をAPI GatewayとLambdaを使ってS3に保存してみます。

公式のLambda 関数を公開するための API を作成するを参考に進めています。

構成

ユーザのリクエストをAPI Gatewayが受けて、それをトリガーにLamdaの関数が実行され、S3にデータが保存されるようにします。

Lambda関数の作成

Lambdaの管理画面で「Get Started Now」をクリックします。

左の「Configure function」をクリックします。
Nameに関数名を入力します。今回はcreateProposalとしました。
テキストエリアに処理の内容を記述します。Lambda上ではaws-sdkというnode向けのSDKが使え、それでS3を操作します。ちなみにリファレンスはこちらです。http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html

'use strict';

console.log('Loading function');

const AWS = require('aws-sdk');
AWS.config.update({
  accessKeyId: 'xxx',
  secretAccessKey: 'yyy',
  region: 'ap-northeast-1'
});

const s3 = new AWS.S3({ apiVersion: '2006-03-01' });

exports.handler = (event, context, callback) => {
  const params = {
    Bucket: 'Bucket Name',
    Key: 'File Name',
    Body: JSON.stringify(event),
    ACL: 'public-read'
  };

  s3.putObject(params, (err, data) => {
    if (err) {
      callback(null, { status: 'NG' });
    } else {
      callback(null, { status: 'OK' });
    }
  });
};

下にスクロールしてRoleの設定をします。マニュアルに倣って以下の値にしました。
Role: Create new role from template(s)
Role Name: execute_my_lambda

「Next」をクリックすると確認画面に遷移するので「Create Function」をクリックするとLambda関数が作成されます。

API Gateway作成

API Gatewayの管理画面で「今すぐ始める」をクリック。

「新しいAPI」を選択し、「API名」を入力、「APIの作成」をクリック。これでAPIが作成されるので、リソースとメソッドを追加し、Lambda関数とひも付けていきます。

「アクション」をクリックして、リソースの作成をクリックします。

「リソース名」と「リソースパス」を入力し、「リソースの作成」をクリックします。

リソースを追加したときと同様に「アクション」から「メソッドの作成」をクリックします。申し込み内容を保存するAPIなのでPOSTを選択し、右のチェックボタンをクリックします。

「アクション」から「APIをデプロイ」をクリックするとダイアログが立ち上がるので「ステージ名」を入力して「デプロイ」をクリック。

「ステージ」をクリックすると、作成したステージが表示されており、公開URLを確認できます。

お問い合わせフォーム作成

<script>
  $(function() {
    $('#form').on('submit', function(event) {
      event.preventDefault();

      var params = {};
      $($(this).serializeArray()).each(function(i, v) {
          params[v.name] = v.value;
      });

      $.ajax({
        url: "https://xxx.execute-api.ap-northeast-1.amazonaws.com/v1/proposal",
        method: "POST",
        data: JSON.stringify(params),
        success: function (res) { console.log(res) },
      });
    });
  });
</script>

こんな感じで作ってみました。送信をクリックすると

S3にファイルが作られていました。

{"company":"ガイアックス","name":"田中太郎","email":"sample@example.com","proposal":"メリークリスマス"}

中身はこんな感じで、送信されたデータを保存することができました。

感想

本番で使うとなると、更に細かく設定を見ていかないといけないと思うのですが、とても簡単にお申し込みフォームを作ることができました。アプリもこれでいいんじゃないかなと思いました。

それでは皆様一年間お疲れ様でした！よいお年を〜

参考

http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-create-resource-and-methods.html
http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/getting-started.html#getting-started-new-api
http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html