LambdaでサーバレスWebアプリ構築

こんにちは、ITエンジニアのz_a_k_iです！^^

昨今では、サーバレスサービスを使ってアプリケーションを構築する手法がトレンドとなっています。

本記事ではAWSのサーバレスサービスであるLambdaを利用してWebアプリを作成する方法をご紹介します。

AWS Lambdaとは
Lambdaでのサーバレスプログラミング
Lambdaの公開
Lambdaを呼び出すフロントエンド
1. フロントエンドアプリの作成
2. Webアプリのテスト
まとめ
1. LambdaでのWebアプリ開発のまとめ

AWS Lambdaとは

AWS Lambdaは、サーバーのプロビジョニングや管理をせずにコードを実行できるサービスです。

サーバーやOSの構築や保守をすることなく、アプリを開発できます。

Lambdaを利用する際、ユーザーはLambdaがサポートしている言語を選んでコードを開発できます。

Lambdaは、高負荷の場合は自動的にスケーリングし、コードが実行されていない時は料金が発生しません。これにより、開発者の運用と管理の負担が減り、コードの作成に集中できます。

詳細は、公式サイト（AWS Lambda とは – AWS Lambda (amazon.com)）を参照ください。

Lambdaでのサーバレスプログラミング

作成するWebアプリ

以下のWebアプリを作成していきます。

利用者が入力した名前に前方一致した結果を返却するWebアプリを構築していきます。

Lambdaの作成

Managementコンソール（ブラウザ）から、作成していきます。

Lambdaのメニューを選択し、「関数の作成」ボタンからLambdaを作成していきます。

「一から作成」を選択し、関数名の入力と、ランタイムを選択していきます。

今回は、関数名を「getUserData」とし、開発言語は「Python」としています。

内容に問題なければ「関数の作成」ボタンをクリックします。

関数作成時は、以下のようにHello from Lambda! というデータを返却するコードとなっています。

今回のWebアプリに合わせて、以下のコードに変更します。

処理の内容は、配列に持たせた人のデータからリクエストに合致した情報を返却するコードです。

今回、検索対象のデータをコード上で保持していますが、本格的なアプリ構築時は、データベースに持たせる必要があります。

今回はLambdaの紹介のため、データベースからのデータ取得の内容は割愛しています。

import json

# ユーザーデータリスト
users_data = [
    {'name': '山田太郎', 'age': 25, 'email': 'taro@example.com'},
    {'name': '鈴木一郎', 'age': 30, 'email': 'ichiro@example.com'},
    {'name': '佐藤花子', 'age': 22, 'email': 'hanako@example.com'}
]

def lambda_handler(event, context):
    # フロントエンドから送信された名前を取得
    name_to_search = event['queryStringParameters']['name']
    
    # 前方一致するユーザーデータを検索
    matching_users = [user for user in users_data if user['name'].startswith(name_to_search)]
    
    # 結果を返却
    return {
        'statusCode': 200,
        'headers': {
            'Content-Type': 'application/json'
        },
        'body': json.dumps(matching_users)
    }

上記コードを貼り付けて、「デプロイ」ボタンをクリックします。

作成したLambdaの実行確認

作成したLambdaが正常に動作するか確認します。

「Tests」タブをクリックし、テスト用の画面に移動します。

イベントJSONに、今回作成したコードに合致するリクエストパラメータを貼り付けます。
貼り付けるパラメータは以下です。

{
  "queryStringParameters": {
    "name": "山田"
  }
}

貼り付け後、テストボタンをクリックします。

以下の画面のように成功となり、レスポンスが返却されていれば成功です。

Lambdaの公開

API Gatewayの設定

Lambdaのコードは作成しただけだと、フロントエンドからアクセスできません。

作成したLambdaのコードをインターネットに公開する必要があります。公開には、API Gatewayを利用します。

マネジメントコンソールで API Gatewayのメニューに遷移し、「REST API」用のAPIを作成します。

API名を「aws-lambda-web-api」という名前を入力し、「APIを作成」ボタンをクリックします。

「リソースを作成」ボタンをクリックします。

リソース名に「get-user-data」と入力し、CORSをチェックします。

これで「https://xxxxxxxxx/get-user-data」という名前でコードが公開されます。

以下の画面に遷移するので、今作成した「get-user-data」を選択し、「メソッドを作成」ボタンをクリックします。

以下の設定でメソッドを作成します。メソッドタイプをPOSTとし、上で作成したLambdaを選択します。

設定後、「メソッドを作成」ボタンをクリックします。

動作確認

API GatewayとLambdaの設定が正しいか確認します。POSTを選択し、「テスト」タブをクリックします。

リクエスト本文にLambdaの動作確認した時と同様のリクエスト内容を貼り付け、「テスト」ボタンをクリックします。

以下の結果となれば設定が正常です。

外部からアクセスを可能にするためにCORSを有効化する必要があります。

CORSとは他のドメインからアクセスする時に必要な設定となります。Webアプリの場合ほぼ必要になるため、有効化しておきます。

CORSの有効化は「CORSを有効化する」ボタンをクリックします。

枠部分を全てチェックし、「保存」ボタンをクリックします。

APIの公開

上記まででAPIの設定ができましたが、まだAPIを公開していない状況です。

外部に公開するためにAPI自体をデプロイします。「APIをデプロイ」ボタンをクリックします。

APIのデプロイは「ステージ」と呼ばれる単位で複数環境を作成することができます。テスト用、本番用というように用途目的で環境が作成できます。
今回はステージを「test」と名付け作成します。ステージ名を入力後、「デプロイ」ボタンをクリックします。

これでAPIが外部に公開されました。

上で作成した「get-user-date」を選択し、URLをコピーします。

注意点

APIをデプロイすると作成したAPIがインターネット上に公開されます。

本格的なサービスの場合は、それで良いのですが今回は検証のため、検証完了後APIのステージを削除し予期しない利用者からアクセスされないようにしてください。

API Gatewayには無料枠があるので検証程度だと料金はかかりませんが、リクエスト過多の場合だと課金されてしまいます。

もしくは、API Gatewayのリソースポリシーに以下を設定し、自分のIPアドレスからのみアクセスを許可するようにしてください。(例として「213.0.999.1」のみアクセス可能とするポリシーを記載)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "execute-api:Invoke",
            "Resource": "arn:aws:execute-api:<region>:<account-id>:<api-id>/*/*/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "203.0.113.1"
                }
            }
        },
        {
            "Effect": "Deny",
            "Principal": "*",
            "Action": "execute-api:Invoke",
            "Resource": "arn:aws:execute-api:<region>:<account-id>:<api-id>/*/*/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": "213.0.999.1"
                }
            }
        }
    ]
}

Lambdaを呼び出すフロントエンド

フロントエンドアプリの作成

Lambdaを呼び出すフロント側のプログラムを作成していきます。

Reactで作成していきます。開発環境はVSCodeです。

VSCodeでReactの開発環境の構築方法は以下記事に書いてありますので、環境構築がまだの方はこちらをご参照ください。

バックエンドとの通信にaxiosを利用するので、以下コマンドでプロジェクトに導入します。

nom install axios

App.jsに以下のコードを貼り付けます。

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [name, setName] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    try {
      // Lambda関数のエンドポイントにPOSTリクエストを送信
      const response = await axios({
        method: 'post',
        url: 'https://【利用するAPIのURL】/test/get-user-data',
        data: {
          queryStringParameters: {
            name: name
          }
        }
      });
      setResults(JSON.parse(response.data.body)); 
    } catch (error) {
      console.error('検索中にエラーが発生しました:', error);
    }
  };


  return (
    <div>
      <div>
        <label htmlFor="name">名前:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
        />
      </div>
      <div>
        <h2>検索結果:</h2>
        <ul>
          {results.map((user, index) => (
            <li key={index}>{user.name} - {user.age}歳 - {user.email}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;