「AWSサービスを使用して完全なウェブアプリケーションを構築する」

Build a full web application using AWS services.

はじめに

AWSを学び始めるとき、通常、いくつかのコアサービスのような一部の情報を学びます。AWSコンソールで作業し、新しいEC2インスタンスやS3バケットを作成し、そこに何かをアップロードできます。しかし、ほとんどの場合、これらのサービスを実際のアプリケーションに組み合わせることはできませんでした。私たちは学んできたさまざまなAWSサービスを知っていましたが、それらを実際の使えるものに組み合わせることはできませんでした。同じように感じている場合、正しい場所に来ました。この記事を終えると、AWSでホストされるパスワードマネージャーアプリケーションを構築できるようになります。このアプリケーションはAWSサーバーで計算を行い、ユーザーデータはAPI Gatewayを介してバックエンドサーバーに送信され、最終結果はブラウザでユーザーに表示され、データはAWSデータベースに保存されます。

さらに進む前に、AWSアカウントとコンソールへのアクセスがあることを確認してください。AWSの前の知識はこの記事に必要ではありませんが、基本的な理解があると有益です。もし知らない場合でも、私たちがアプリケーションを構築しているため、それに沿って進むことができるはずです。この記事はAWSのサービスの詳細について深く掘り下げることを意図しているわけではありませんが、それらをすべて組み合わせて動作するアプリケーションに結び付けることを意図しています。

学習目標

  • 異なるAWSサービスを統合してエンドツーエンドのWebアプリケーションを作成する。
  • AWS Amplifyを使用してWebアプリケーションをデプロイおよびホストする方法を学ぶ。
  • AWS Lambdaを使用してバックエンドサーバーを作成する方法を学ぶ。
  • フロントエンドとバックエンドのコンポーネント間のデータ転送にAPI Gatewayを使用する方法を学ぶ。
  • AWS DynamoDBデータベースからデータを保存および取得する方法を学ぶ。

構築するサービスとアプリケーションの概要

この記事では、上記の画像に示すように、5つのAWSサービスを使用してエンドツーエンドのWebアプリケーションをゼロから構築します。名前、長さ、およびパスワードのプロパティ（大文字、小文字、数字、特殊文字）を入力として受け取り、セキュアなパスワードを生成および保存するセキュアパスワードマネージャーアプリケーションを作成します。これはシンプルなアプリケーションですが、より大規模な実世界のアプリケーションを構築するために必要な主要なコンポーネントをすべて結び付けています。

このアプリケーションを構築するためには何をする必要がありますか？

1. ウェブページを作成してホストする必要があります。

2. パスワード生成機能を呼び出す方法が必要です。

3. 結果を返す計算を行う方法が必要です。

4. 結果を保存する方法が必要です。また、結果をユーザーに返す方法も必要です。

5. AWS内でこれらのサービスのパーミッションを処理する必要があります。

AWS Amplifyを使用してライブウェブページを作成およびデプロイする

AWSでは、実際にはいくつかの方法でこれを行うことができます。私たちはAWS Amplifyを選びます。Amplifyを使用すると、ウェブサイトを構築およびホストできます。特にフロントエンド開発者の場合、これは素晴らしいサービスです。私たちはHTMLページを作成し、Amplifyを使用してそのウェブページをデプロイおよびホストします。それでは、以下に、私たちがそれを開いたときに記事の名前を表示する単純なHTMLコードがあります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>セキュアパスワードマネージャー！</title>
</head>
<body>
    エンドツーエンドのAWSアプリケーションを作成しています。
</body>
</html>

ステップ1：このコードをindex.htmlという名前で保存し、このファイルを圧縮します。今、私たちはAWS Amplifyにこれをデプロイします。AWS管理コンソールに移動し、AWS Amplifyを検索します。

ステップ2：ここにウェブアプリをホストしたいので、Amplify Hostingを選択します。

ステップ3：Gitプロバイダはありませんので、「Gitプロバイダなしでデプロイ」を選択して続行します。

ステップ4：任意の名前をアプリケーションに付けます。私は「PasswordGeneratorFrontend」とします。環境名を指定します。ドラッグアンドドロップを選択し、以前に作成したzipファイルを取得して保存およびデプロイします。

デプロイが成功したことを確認し、ホストされたウェブページへのリンクを取得します。また、サイドバーのドメイン管理に移動することでいつでもこのリンクにアクセスできます。

ユーザーがアプリケーション内でナビゲートできるライブウェブページがあります。

アプリケーション内で計算を行うためのAWS Lambdaサービスの設定

おそらくご存知のように、ランバダ関数はトリガに応じて実行されるコードの一部です。たとえば、s3バケットに画像をアップロードすると、その画像をサムネイルに処理するためにランバダ関数がトリガされることがあります。これらはサーバーレスであり、コードを実行するためにサーバーを設定および管理する必要はありません。自動的にバックグラウンドで実行されます。したがって、必要な計算を行うためにPythonコードを記述します。

ステップ1：AWSコンソールに移動し、lambdaに移動します。

ステップ2：新しい関数を作成し、「スクラッチから作成する」を選択します（既定の設定のはずです）。関数名を指定し、ランタイム環境を選択します。最新の利用可能なPythonのバージョンを使用しましょう。それ以外の設定はそのままにして、関数を作成します。

ステップ3：コンソール内をスクロールダウンすると、コードを記述するためのエディタが表示されます。Pythonコードをそのエディタに配置します。以下にPythonコードを示します：

import json
import random
import string

def lambda_handler(event, context):
    # イベントオブジェクトから入力パラメータを抽出します
    name = event['name']
    length = int(event['length'])
    req_capital_letters = int(event['reqCapitalLetters'])
    req_small_letters = int(event['reqSmallLetters'])
    req_numbers = int(event['reqNumbers'])
    req_special_chars =int(event['reqSpecialChars'])
    # パスワードを生成します
    password_chars = []
    allowed="" #allowed characters
    # 選択された各文字セットから1文字を含めます
    if req_capital_letters:
        password_chars.append(random.choice(string.ascii_uppercase ))
        allowed=allowed+string.ascii_uppercase
    if req_small_letters:
        password_chars.append(random.choice(string.ascii_lowercase))
        allowed=allowed+string.ascii_lowercase
    if req_numbers:
        password_chars.append(random.choice(string.digits))
        allowed=allowed+string.digits
    if req_special_chars:
        password_chars.append(random.choice(string.punctuation))
        allowed=allowed+string.punctuation
    # ランダム文字の残りの長さを計算します
    remaining_length = length - len(password_chars)
    # 残りの長さのためのランダム文字を生成します
    password_chars.extend(random.choice(allowed) for _ in range(remaining_length))
    # 順序バイアスを除去するために文字をシャッフルします
    random.shuffle(password_chars)
    # パスワードを形成するために文字を連結します
    password = ''.join(password_chars)
    # JSONレスポンスでパスワードを返します
    return {
        'statusCode': 200,
        'body': json.dumps('Your password for '+name+' is: ' + password)
    }

コードは非常に簡単に理解できます。JSONユーティリティパッケージとPythonのランダム文字列ライブラリをインポートして、ランダムな文字を生成するために、私たちはlambdaハンドラを持っています。これはすべてのlambda関数に共通しており、ここでほとんどの作業を行います。ユーザーがパスワードの名前、長さ、およびプロパティ（大文字、小文字、数字、特殊文字）を入力することを思い出してください。それらの値をイベントオブジェクトから取得し、それぞれの変数に格納しています。次に、ユーザーが選択したセットから1つの文字を含めます。次に、パスワードの残りの長さを計算し、その長さに基づいて、ユーザーが選択したセットから残りの長さのランダムな文字を生成します。最後に、結果をJSONオブジェクトとして返します。

このコードを保存してください（Ctrl + Sで保存できます）、そして非常に重要なのは、デプロイボタンをクリックしてデプロイする必要があります。

ステップ4: さて、このlambda関数が正しく動作していることを確認するために、テストしてみましょう。テストボタンの近くの小さなドロップダウン矢印をクリックし、「テストイベントの設定」をクリックします。

ステップ5: テストイベントを設定しましょう。関数が正しく動作していることを確認するために、いくつかのテストデータを渡すことができます。新しいイベントを作成し、イベント名を付けます。イベントJSONでは、いくつかのランダムなパスワードプロパティを渡します。私の場合、パスワードの長さを10にし、すべての文字セットを選択しました。下にスクロールして保存をクリックします。

ステップ6: テストイベントの設定が完了しました。実際にテストを実行する必要があります。テストボタンをクリックすると、ステータスコード200が表示され、結果にはすべてのセットから少なくとも1つの文字が含まれています。したがって、私たちのlambda関数は正しく動作しています。

これまでに、Amplifyを使用してホストされているシンプルなHTMLページと、アプリケーションの機能を実装するためのlambda関数があります。

パスワード生成機能を呼び出すためのAPIの作成

次に、パスワード生成機能を呼び出す方法、つまりそのlambda関数を呼び出す方法が必要です。ユーザーは明らかに私たちが行ったようにAWSコンソールに入って実行することはありませんので、実行するために呼び出すことができるパブリックなエンドポイントまたはURLが必要です。そのために、私たちはAPI Gatewayサービスを使用します。これはAWSのコアサービスであり、lambda関数を呼び出すために使用できるAPI（アプリケーションプログラミングインターフェース）を作成するための非常に適した方法です。API Gatewayを使用してLambda関数のためのREST APIを作成しましょう。

ステップ1: AWSコンソールに移動し、API Gatewayを検索します。

ステップ2: create APIボタンをクリックして新しいAPIを作成します。REST APIセクションに移動し、ビルドボタンをクリックします。

ステップ3: RESTを選択し、新しいAPIを選択し、名前を付ける必要があります。私の場合、”CallPasswordGenerator”とします。他の項目はすべてそのままにして、「APIの作成」をクリックします。

ステップ4： 現時点では空のAPIがあり、どのLambda関数とも統合されていません。それを今行いましょう。サイドバーでリソースが選択されていることを確認し、バックスラッシュが選択されていることを確認し、アクションメニューで「メソッドの作成」を選択します。メソッドのタイプはPOSTになります。ユーザーはデータをAWSに送信し、POSTの横にある小さなチェックマークをクリックします。

ステップ5： 統合タイプとして、Lambda関数を使用し、Lambda関数の名前を指定し、保存をクリックします。

ステップ6： 今度は、CORS（クロスオリジンリソース共有）を有効にする必要があります。アクションメニューに移動し、「CORSを有効にする」を選択します。これにより、アンプライフィ上で実行されるWebアプリケーションが、別のオリジンまたはドメインで実行されるリソースにアクセスできるようになります。なぜなら、私たちのWebアプリケーションはアンプライフィ内の1つのドメインで実行されているのに対し、Lambda関数は別のドメインで実行されているため、これらのドメインまたはオリジンをまたいで動作できるようにする必要があるからです。

デフォルト値をそのままにして、「CORSを有効にする」ボタンをクリックします。

ステップ7： テストするためにAPIをデプロイしましょう。アクションメニューに移動し、「APIをデプロイ」を選択します。ここでは新しいステージを設定する必要があります。開発、テスト、本番用に異なるステージを持つ可能性があるためです。「デプロイ」をクリックします。

ステップ8： 画面に表示されたインボークURLをコピーして保持しておきます。後でこれが必要になるため、メモ帳などに表示します。これはAPIゲートウェイのURLとして機能します。

ステップ9： このAPIを検証しましょう。サイドバーのリソースに入り、POSTを選択します。テストオプションをクリックします。これにより、送信したいテストデータを送信し、対応するレスポンスを表示できます。

ステップ10： Lambda関数をテストするために同じ形式を使用しました。必要なパスワードプロパティをJSON形式で渡し、テストボタンをクリックします。APIが正常に動作し、パスワードと成功ステータスコードが含まれる応答を受け取ったことがわかります。

データベースへのデータの保存

実際には、結果をどこに保存する必要はありません。ユーザーに返すこともできますが、ほとんどの実世界のアプリケーションにはデータベースがあります。したがって、データベースを設定する必要があります。また、アプリケーションの異なる部分間の権限を処理する必要もあります。特に、Lambda関数がデータベースに書き込みできるようにする必要があります。データベースでは、DynamoDBと呼ばれるキーバリューまたはNoSQLデータベースを使用します。これは、関係データベースのように事前にスキーマと関係を設定する必要がある場合よりも軽量です。

ステップ1：コンソールに移動し、DynamoDBを検索して、テーブルを作成します。

ステップ2：テーブルに名前を付け、パーティションキーには「ID」という名前を指定します。他の項目はそのままにしてテーブルを作成します。

ステップ3：Amazonリソース名またはARNを保存する必要があります。テーブル名をクリックし、一般情報の中の追加情報でARNを見つけることができます。このARNを保存しておきます。後で使用します。

ステップ4：ラムダ関数に書き込み権限を与えるために、ラムダサービスに移動し、構成タブに移動します。実行ロールの役割名をクリックします。これにより新しいタブが開きます。

ステップ5：既にこの役割が持っている権限にいくつかの権限を追加する必要があります。権限を追加し、インラインポリシーを作成するために、権限を追加するをクリックします。

ステップ6：JSONコードで作業する方が簡単ですので、そこでJSONタブをクリックします。このコードをそのタブに配置します。

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "VisualEditor0",
        "Effect": "Allow",
        "Action": [
            "dynamodb:PutItem",
            "dynamodb:DeleteItem",
            "dynamodb:GetItem",
            "dynamodb:Scan",
            "dynamodb:Query",
            "dynamodb:UpdateItem"
        ],
        "Resource": "YOUR-TABLE-ARN"
    }
    ]
}

このJSONでは、ラムダ関数がDynamoDBテーブルでこれらの操作を実行するための権限が与えられます。重要なのは、コピーしたテーブルARNを更新し、ポリシーのレビューをクリックすることです。

ステップ7：ここで、このポリシーに名前を付け、最後にポリシーを作成します。

ステップ8：データベースとのやり取りのために、ラムダ関数のPythonコードを更新する必要があります。前のコードにはこの機能がありませんでした。

import json
import random
import string
# AWS SDKをインポートします（Pythonの場合、パッケージ名はboto3です）
import boto3
# AWS SDKを使用してDynamoDBオブジェクトを作成します
dynamodb = boto3.resource('dynamodb')
# DynamoDBオブジェクトを使用してテーブルを選択します
table = dynamodb.Table('PasswordDatabase')
def lambda_handler(event, context):
    # イベントオブジェクトから入力パラメータを抽出します
    name = event['name']
    length = int(event['length'])
    req_capital_letters = int(event['reqCapitalLetters'])
    req_small_letters = int(event['reqSmallLetters'])
    req_numbers = int(event['reqNumbers'])
    req_special_chars =int(event['reqSpecialChars'])
    # パスワードを生成します
    password_chars = []
    allowed="" #許可される文字
    # 各選択された文字セットから1文字を含める
    if req_capital_letters:
        password_chars.append(random.choice(string.ascii_uppercase ))
        allowed=allowed+string.ascii_uppercase
    if req_small_letters:
        password_chars.append(random.choice(string.ascii_lowercase))
        allowed=allowed+string.ascii_lowercase
    if req_numbers:
        password_chars.append(random.choice(string.digits))
        allowed=allowed+string.digits
    if req_special_chars:
        password_chars.append(random.choice(string.punctuation))
        allowed=allowed+string.punctuation
    # ランダム文字の残りの長さを計算します
    remaining_length = length - len(password_chars)
    # 残りの長さのためにランダム文字を生成します
    password_chars.extend(random.choice(allowed) for _ in range(remaining_length))
    # 順序バイアスを除去するために文字をシャッフルします
    random.shuffle(password_chars)
    # パスワードを形成するために文字を連結します
    password = ''.join(password_chars)
    
    # インスタンス化したオブジェクトを使用してDynamoDBテーブルに結果を書き込みます
    response = table.put_item(
        Item={
            'ID': name,
            'Password':password
            })

    # JSONレスポンスでパスワードを返します
    return {
        'statusCode': 200,
        'body': json.dumps('Your password for '+name+' is: ' + password)
    }

このコードの新しい部分は、AWS SDK（ソフトウェア開発キット）のboto3というモジュールをインポートして、DynamoDBのboto3リソースオブジェクトを取得していることです。次に、このオブジェクトを使用してDynamoDBテーブルに接続します。テーブル名を渡すことで、前と同じように接続します。最後に、コードはtable.put_item()関数を使用してパスワードの名前と生成されたパスワードをテーブルに挿入します。

ステップ9：このコードをCTRL+Sで保存し、非常に重要なことですが、このコードをデプロイして、テストボタンをクリックしてこのコードをテストしましょう。コードが正常に動作して正しい結果が表示されることがわかります。

ステップ10：これらの結果がDynamoDBテーブルで更新されているかどうかを確認するために、テーブルアイテムを探索してみましょう。これにより、保存されている内容が表示されます。

テーブルには新しい結果が表示されていることがわかります。この結果は、ラムダ関数のテストを実行した結果です。

フロントエンドとバックエンドの接続

現時点では、DynamoDBテーブルにデータを書き込むことができ、ラムダ関数に適切な権限がありますが、AmplifyとAPIゲートウェイの間に接続がないことに気付いたかもしれません。現在、index.htmlページからは、ラムダ関数をトリガーする方法がありません。そこで、この最後の部分に取り組みましょう。

index.htmlページを更新してAPIゲートウェイを呼び出す必要があります。最終的なindex.htmlコードへのリンクはこちらです。

コードの説明：最初に、スタイルセクションでh1タグ、input、およびフォームの見た目を改善するために少しスタイリングを行っています。お好みに応じてCSSを修正および更新できます。bodyセクションにはh1タグ「パスワードジェネレーター」があります。これがウェブページの見出しとなります。次に、ユーザーが名前とパスワードのプロパティをチェックボックスを使用して入力するフォームがあり、フォームを送信するボタンがあります。このボタンは「call API」関数を呼び出し、スクリプトタグで定義されています。この関数には、パスワードの名前と長さをパラメータとして渡します。この関数では、フォームのユーザー入力に基づいてプロパティの値を0または1で初期化しています。

これらの値を持つJSONオブジェクトを作成し、リクエストボディでこのオブジェクトを渡してエンドポイントを呼び出しています。最後に、ブラウザで応答が表示されるアラートを表示しています。

今度はAmplifyを使用してindex.htmlページを再デプロイする必要があります。このファイルを再びzipファイルにします。Amplifyを開き、zipファイルをドラッグアンドドロップします。数秒でデプロイされ、ホストされたアプリケーションのリンクが取得できます。

リンクを開くだけです。アプリケーションが正常にデプロイされたことがわかります。

ここで、結果が正常にDynamoDBデータベースに更新されました。

リソースの削除

この記事で作成したものをすべて削除しましょう。すべてが無料枠に含まれているはずですが、月末に予期しない請求があることを避けるために削除してください。

ステップ1:Amplifyリソースに移動し、右上のアクションに移動してアプリを削除します。削除前に操作の確認が必要です。

ステップ2:次に、DynamoDBに移動してテーブルをクリックし、削除します。削除前に確認が必要です。

ステップ3:次に、Lambda関数を削除できます。AWS Lambdaに移動し、サイドバーで関数を選択し、関数名を選択します。次に、アクションのドロップダウンメニューに移動し、削除をクリックします。

ステップ4:最後に、APIゲートウェイです。API名を選択し、アクションの下にある削除をクリックします。

結論

この記事では、さまざまなAWSサービスを使用してエンドツーエンドのWebアプリケーションを実装しました。このアプリケーションでは、ユーザーはAWS Amplifyを使用してホストされたウェブページにパスワード名とプロパティを入力することができます。ユーザーがパスワードの詳細を送信すると、ウェブページのスクリプトがリクエストボディにユーザーデータを渡してAPIゲートウェイを呼び出し、AWS Lambda関数をトリガーします。Lambda関数は計算を実行し、ユーザーの入力に基づいてパスワードを作成します。結果はAWS DynamoDBデータベースに書き込まれ、APIゲートウェイを通じてブラウザにメッセージが返されます。APIゲートウェイの作成プロセス、Lambda関数の作成、データベースの設定、およびLambda関数がデータベースに書き込むためのユーザー権限の割り当ての全体的なプロセスを見てきました。この例は比較的シンプルですが、より複雑な実世界のアプリケーションに必要な重要なコンポーネントをカバーしています。

キーポイント

  1. AWS Amplifyは、フロントエンド開発者に最適なウェブページの作成とホスティングを簡単に行うことができます。
  2. AWS Lambdaは、サーバーレスのバックエンドサービスであり、サーバーの管理を必要とせずにトリガーに応じてコードを呼び出します。
  3. API Gatewayは、エンドポイントを提供することでウェブアプリケーションのさまざまなサービスを接続するのに役立ちます。
  4. DynamoDBは、適切なSDKを使用してLambda関数によって生成された結果をJSON形式で保存することができます。
  5. AWSサービスのアクセス許可の設定と必要なポリシーの設定は、アプリケーションの正しい動作を保証するために重要です。

よくある質問

この記事で表示されるメディアはAnalytics Vidhyaの所有ではなく、著者の裁量で使用されています。

We will continue to update VoAGI; if you have any questions or suggestions, please contact us!

Share:

Was this article helpful?

93 out of 132 found this helpful

Related articles

Discover more

Want to read more? Go here