developersIO
2026年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順作ってみた

2026年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順作ってみた

初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2026年現在でも実行できる手順にしてみました
ハンズオンAWS初心者向けAWS LambdaAPIGateway
FacebookHatena blogX
2026.01.13

こんにちは、臼田です。

みなさん、AWSのハンズオンで学習してますか？(挨拶

今回は長らくAWSでサーバレスの入門編として活躍していた、AWS初心者向けハンズオンコンテンツである「基本的なウェブアプリケーションを構築する」がリニューアルされ以前のようにGUIベースで簡単に使えなくなってしまったので、旧来の手順を2026年版として起こします。以前は下記手順のようにAWSの提供するコンテンツと併用する手順を作っていましたが、本記事のみでサーバレスの入門として成り立つように編集しました。

https://dev.classmethod.jp/articles/2024-build-web-app-s3-lambda-api-gateway-dynamodb/

※内容を順次2024年版から更新していきます。一部古い内容が入っていることをご了承ください

概要

AWSでは「サーバレス」と呼ばれる領域のサービス群やこれらを組み合わせて作成する「サーバレスアーキテクチャ」を実現することができます。しかしこの概念は説明を読んでも理解が簡単ではないかもしれません。

ということで実際にAWSのサーバレスサービスを活用して、サーバレスアーキテクチャで基本的なWebアプリケーションを構築してみよう、というのがこのハンズオンコンテンツです。

このコンテンツから入ってもいいですが、その前にAmazon EC2やAmazon RDSなどいわゆるVPC系のサービスを触ってからこのコンテンツを実施すると、より違いが実感できてサーバレスのメリットを感じられるでしょう。

手順

ではやっていきましょう。

はじめに

このチュートリアルでは以下の構成でウェブアプリケーションを作成します。最初は各構成要素についてよくわからないと思いますが、触っていくうちに少しずつ分かるので気にしなくて大丈夫です。

001_basic_web_app_2026

こういったサーバレスアプリケーションの設計パターンはこちらも参考になるので余裕があれば見ておきましょう。

以下の6つのモジュールで進んでいきます。

  • ウェブアプリケーションを作成する (5分): AWS Amplify コンソールを使用して、ウェブアプリケーションの静的リソースをデプロイします。
  • サーバーレス関数を構築する (5 分): AWS Lambda を使用してサーバーレス関数を構築します。
  • サーバーレス関数をウェブアプリケーションにリンクする (5 分): API Gateway を使用してサーバーレス関数をデプロイします。
  • データテーブルを作成する (10 分): Amazon DynamoDB テーブルにデータを保持します。
  • ウェブアプリケーションに対話性を追加する (5 分): ウェブアプリケーションを変更して API を呼び出します。
  • リソースをクリーンアップする (5 分): このチュートリアルで使用したリソースをクリーンアップします。

モジュール1: ウェブアプリケーションを作成する

このモジュールではAWS Amplifyを利用してウェブアプリケーションのフロントエンドを構築します。と言っても、簡単な静的ウェブサイトです。

まずは自身のPCなどローカル環境で適当なテキストエディタ(メモ帳しか使ってないよという人は、VSCodeを使ってみるのもいいかもしれません)を開いて以下のHTMLをコピペしてindex.htmlとして保存します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    Hello World
</body>

</html>

保存したら右クリック等からZIPファイルに圧縮します。

それではAWSマネジメントコンソールを開いて、Amplifyのコンソールを開きましょう。どのリージョンを利用してもいいですが、基本的には東京(ap-northeast-1)を使用行きましょう。今回私は東京リージョンで実施しています。AmplifyコンソールはAWSマネジメントコンソール上部の検索欄から「amplify」と入力して開くと手っ取り早いでしょう。

Amplifyコンソールを開くと以下のようになっています。「新しいアプリを作成」を押します。

002_basic_web_app_2024

「Gitなしでデプロイ」を選択して「次へ」進みます。

003_basic_web_app_2024

ZIPファイルをドラッグアンドドロップするエリアがあるので、ファイルを選択するかドラッグアンドドロップで先程のindex.htmlをZIPで圧縮したファイルをアップして「保存してデプロイ」します。

少しするとデプロイが完了し、ドメインが発行されURLからアクセスできるようになります。この素早くアプリケーションをインターネット上にデプロイして利用できるようにしてくれるのがAmplifyのいいところです。

ではウェブアプリをテストするためにドメインをクリックしてブラウザで表示します。

「Hello World」が表示され、先程アップロードしたindex.htmlがデプロイされていることが確認できました。

AmplifyがHTMLファイルをアップロードしたら、ウェブサイトを配信するための残りの必要な作業は全部やってくれたということです。

モジュール 2: サーバーレス関数を構築する

このモジュールでは裏側で動作するプログラムを記述します。利用するサービスはAWS Lambdaです。チュートリアルの文章をよく読み理解してから始めましょう。今回の手順ではPythonを利用しています。

まずはLambda関数を作成します。AWS Lambdaの実態(実際に作られるリソース)は関数(Function)と呼びます。

AWSマネジメントコンソールの検索欄から「lambda」と検索してAWS Lambdaのコンソールを開きましょう。「関数の作成」を開始します。

「一から作成」になっている状態で関数名にHelloWorldFunctionを入れてランタイムを「Python 3.14」にします。手順にある名前やパラメータなどは手動で入力すると間違いの元ですから、必ずコピーペーストしましょう。大文字・小文字なども間違えてはいけませんからね。

他の設定は変更せず「関数の作成」をします。

作成されたら少し下にスクロールすると「コードソース」でテンプレートのコードが書かれています。これを以下のコードをコピーしてすべて置き換えます。置き換えたら上部の「Deploy」ボタンを押します。

# import the JSON utility package since we will be working with a JSON object
import json
# define the handler function that the Lambda service will use as an entry point
def lambda_handler(event, context):
# extract values from the event object we got from the Lambda service
    name = event['firstName'] +' '+ event['lastName']
# return a properly formatted JSON object
    return {
    'statusCode': 200,
    'body': json.dumps('Hello from Lambda, ' + name)
    }

デプロイで来たらテストを実行していきます。Lambdaのコンソール上ではテストを作成開始する方法が2つありますが、今回は上部の「テスト」タブを開いてテストを作成します。イベント名にHelloWorldTestEvent、イベントJSONに以下のJSONオブジェクトを貼り付け、「保存」します。

{
    "firstName": "Ada",
    "lastName": "Lovelace"
}

保存できたら隣の「テスト」ボタンを押します。するとその上側に実行した結果が表示され、枠が緑色なら正常に完了しています。「詳細」をクリックして開き、ステータスコードが200になっていることと、bodyのメッセージ内容を確認します。

アプリケーションコードを実行する環境が自動的に作成され、言語を記述するだけで利用することができました。

モジュール 3: サーバーレス関数をウェブアプリケーションにリンクする

アプリケーションコードを実装しましたが、これだけだとインターネット上からアプリケーションを実行できません。インターネットからリクエストを受け付けるためにAPI Gatewayを作成します。RESTful APIなどの概念の説明はチュートリアルをよく確認してください。

API Gatewayのコンソールも検索欄から探して開きましょう。いくつかのAPIの種類が選択できますが、REST APIを「構築」します。すぐ下に「REST API プライベート」があるので間違えないようにしましょう。

「新しいAPI」が選択されていることを確認しつつ、API名にHelloWorldAPIを入力し、APIエンドポイントタイプで「エッジ最適化」を選択して「APIを作成」します。

APIを作成できたらメソッドを作成します。リソースページの左カラムで「/」が青く選択されていることを確認し、右下「メソッドを作成」します。

メソッドタイプ「POST」を選択し、統合タイプに「Lambda関数」が選択されていることを確認します。Lambda関数を選択するテキストボックスにHelloWorldFunctionを入力すると、先ほど作成した関数が表示されますのでこれを選択します。下の方に行き保存します。

保存できたらCORSの設定を行います。リソースページの左カラム「/」を選択して戻り、右側の「CORSを有効にする」を押します。

「POST」にチェックを入れて「保存」します。

設定できたので「APIをデプロイ」します。

API Gatewayでは複数のステージを作成して、開発中の環境と本番に展開する環境を分けるなど、開発に便利な使い方ができます。今回は最初なのでステージで「新しいステージ」を選択し、ステージ名をdevとして「デプロイ」します。

デプロイが完了したら、後でアプリケーションに組み込むためにステージのURLをコピーボタンを押して適当な場所にメモとして残しておきます。

デプロイしたAPIをテストします。左カラム「リソース」からリソースページに戻ってきて、POSTメソッドを開きます。

下の「テスト」タブを開き、リクエスト本文に以下のJSONオブジェクトをコピーして貼り付け「テスト」します。

{
    "firstName": "Grace",
    "lastName": "Hopper"
}

テストに成功すると、ステータスが200になり、先程Lambda関数単体で実行した結果と同じように、今度はGrace Hopperとして処理されます。

これでインターネットからAPI Gatewayを通してアプリケーションコードを実行できるようになりました。

モジュール 4: データテーブルを作成する

アプリケーションで実行した処理の結果などはデータベースに保存して活用したいです。AWSのサーバレスアプリケーションではDynamoDBを利用することで簡単にNoSQLデータベースを組み込むことができます。詳細はチュートリアルの概要等を確認してください。

AWSマネジメントコンソール上でDynamoDBのコンソールを検索して開きます。「テーブルを作成」開始します。

テーブル名にHelloWorldDatabaseを、パーティションキーにIDを入力します。ここも必ずコピーペーストしましょう。よくidのように小文字にしてハマります。下の方に行き「テーブルの作成」をします。

作成して少しすると、テーブル名をクリックして詳細画面を表示できるようになります。開きましょう。

「追加情報」を開くとAmazonリソースネーム(ARN)を確認できるので左のコピーボタンを押して、メモしておきます。

テーブルが作成できたら、Lambda関数からテーブルにデータを保存できるようにします。AWSのリソースはデフォルトではリソース間のやりとりは許可されていません。そのため、Lambda関数からDynamoDBのテーブルへのアクセスを許可する設定をしていきます。ちなみにAPI GatewayとLambda関数の間の設定は、先程の手順の中で自動的に設定されていました。

Lambda関数の画面に戻り、「設定」タブの「アクセス権限」カラムを開き、実行ロールと書かれている部分のIAM Role名のリンクをクリックします。

すると、Lambda関数を作成するときに一緒に自動作成されたIAM Roleが開きます。Lambda関数に権限を与えるときは、各Lambda関数にアタッチするIAM Roleに権限を与えていきます。許可ポリシーで「許可を追加 -> インラインポリシーを作成」します。

ポリシーエディタで「JSON」での入力に切り替えて以下のJSONオブジェクトをコピペします。15行目の「YOUR-TABLE-ARN」となっている部分を、書き込み先のDynamoDBのARNに置き換えます。両隣のダブルクォーテーション(")などを消さないように気をつけて置き換えたら「次へ」進みます。

{
    "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"
        }
    ]
}

ポリシー名にHelloWorldDynamoPolicyを入力して「ポリシーの作成」をします。

作成できたらアプリケーションコードをDynamoDBと連携するものに変更します。Lambda関数の画面に戻り「コード」タブを開き、以下のコードをコピーして、すべて置き換えます。「Deploy」しましょう。

# import the json utility package since we will be working with a JSON object
import json
# import the AWS SDK (for Python the package name is boto3)
import boto3
# import two packages to help us with dates and date formatting
from time import gmtime, strftime

# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('HelloWorldDatabase')
# store the current time in a human readable format in a variable
now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())

# define the handler function that the Lambda service will use as an entry point
def lambda_handler(event, context):
# extract values from the event object we got from the Lambda service and store in a variable
    name = event['firstName'] +' '+ event['lastName']
# write name and time to the DynamoDB table using the object we instantiated and save response in a variable
    response = table.put_item(
        Item={
            'ID': name,
            'LatestGreetingTime':now
            })
# return a properly formatted JSON object
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda, ' + name)
    }

気になる人はコードの中身も読んでみましょう。

「テスト」タブに切り替えて「テスト」します。先ほどと同じように緑になり200のステータスになればOKです。

今度はDynamoDBテーブルにも書き込みができているはずなので確認します。テーブルの詳細画面に戻り、右上の「テーブルアイテムの探索」を押します。

下の方にテーブルに保存されたデータが表示されます。Lambda関数のテストで入力した「Ada Lovelace」が表示されたらOKです。

これでLambda関数で実行した内容がDynamoDBテーブルに保存されるようになりました。

モジュール 5: ウェブアプリケーションに対話性を追加する

最後に、Amplifyで配信したフロントエンドをAPI Gatewayから始まるバックエンドに接続して完成です。チュートリアルの内容をよく確認して始めましょう。

ローカル環境でindex.hemlを以下のコードに置き換えます。41行目の「YOUR-API-INVOKE-URL」は先ほど控えたAPI GatewayのステージのURLに置き換えましょう。前後のダブルクォーテーションやその他の処理を消さないように気をつけましょう。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!-- Add some CSS to change client UI -->
    <style>
        body {
            background-color: #232F3E;
        }

        label,
        button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
        }

        input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
        }
    </style>
    <script>
        // define the callAPI function that takes a first name and last name as parameters
        var callAPI = (firstName, lastName) => {
            // instantiate a headers object
            var myHeaders = new Headers();
            // add content type header to object
            myHeaders.append("Content-Type", "application/json");
            // using built in JSON utility package turn object to string and store in a variable
            var raw = JSON.stringify({ "firstName": firstName, "lastName": lastName });
            // create a JSON object with parameters for API call and store in a variable
            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };
            // make API call with parameters and use promises to get response
            fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
        }
    </script>
</head>

<body>
    <form>
        <label>First Name :</label>
        <input type="text" id="fName">
        <label>Last Name :</label>
        <input type="text" id="lName">
        <!-- set button onClick method to call function we defined passing input values as parameters -->
        <button type="button"
            onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call
            API</button>
    </form>
</body>

</html>

置き換えたら、先程と同じ手順で保存しZIPにして、Amplifyにデプロイします。Amplifyコンソールで「アップデートをデプロイ」します。

ドラッグアンドドロップでZIPをアップロードし「保存してデプロイ」します。

少しするとデプロイが完了するので、ブラウザでドメインを開きます。

すると先ほどと違って更新したHTMLが表示されます。適当な名前を入力して「Call API」を実行しましょう。

データベース側も確認してみます。「テーブルアイテムの探索」画面で更新ボタンを押すと、フロント側で入力した名前が保存されていることが確認できました。

適切にフロントエンドからバックエンドまで一通り繋げて、1つのウェブアプリケーションとして構築できました。

モジュール 6: リソースをクリーンアップする

作ったら消すまでがチュートリアルです。ほとんど無料枠で完結するはずですが、終了したら速やかに削除しましょう。またすぐに構築できますからね。

DynamoDBはテーブル一覧の画面からチェックを入れ「削除」します。

確認画面では一緒に作成されたアラームの削除にチェックが入っていて、バックアップ作成はチェックが外れている状態のはずです。そのままにして「確認」と入力し「削除」します。

API Gatewayは右上「APIアクション -> APIを削除」から実行します。

確認」を入力して「削除」します。

Lambda関数は右上「アクション -> 関数を削除」から実行します。

確認がでるので「削除」します。

Lambda関数のIAM Roleは詳細画面右上「削除」から実行します。

確認がでるのでIAM Role名を貼り付けて「削除」します。

Amplifyアプリケーションは「アプリケーションの設定 -> 全般設定」の右下で「アプリの削除」します。

フィールドには現状「delete」と入力することで「アプリの削除」ができました。

まとめ

AWSのサーバレスサービスを利用して基本的なウェブアプリケーションを構築するチュートリアルを行いました。

EC2やRDSなど自分で必要なリソースを作成して設定をしていく手法も良いですが、サーバレスなサービスを使えばより簡単にAWSにいろいろなものを任せて仕組みを作ることができます。

この利便性を体験し、やりたいことを実現する手段を身につけましょう。

この記事をシェアする

FacebookHatena blogX

関連記事

AWS Batchの基礎が一通り学べるハンズオン「AWS Batch Deep Dive」やってみた
asano haruki
2025.09.30
Amazon SageMaker Workshop をやってみた３ ~ 4. データ & AI ガバナンス ~
くろすけ
2025.06.18
Amazon SageMaker Workshop をやってみた２ ~ 3. Lakehouse ~
くろすけ
2025.06.11
Amazon SageMaker Workshop をやってみた１ ~ 2. Unified Studio ~
くろすけ
2025.05.21