AWS の開始方法

基本的なウェブアプリケーションを構築する

ウェブアプリケーションをデプロイし、API やデータベースとの対話性を追加する

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

このモジュールでは、 API を呼び出し、カスタム入力テキストを表示できるように静的ウェブサイトを変更します。

はじめに

このモジュールでは、モジュール 1 で作成した静的ウェブサイトを更新して、モジュール 3 で作成した REST API を呼び出します。これにより、入力内容に基づいてテキストを表示する機能が追加されます。

学習内容

  • HTML ページから API Gateway API を呼び出す
  • Amplify コンソールにウェブアプリケーションの新しいバージョンをアップロードする

主要な概念

ウェブサイトのデプロイ ユーザーがウェブサイトを利用できるようにします。

環境 「生産」、「開発」、「ステージング」など、アプリケーションまたはウェブサイトを実行できるステージ。

API の呼び出し API にイベントを送信して特定の動作をトリガーします。

 所要時間

5 分

 使用するサービス

実装

  • Amplify コンソールでウェブアプリケーションを更新する
    1. モジュール 1 で作成した index.html ファイルを開きます。
    2. 既存のコードを次のコードに置き換えます。
    <!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>

    3.(モジュール 3 の) 行 41 に API 呼び出し URL を必ず追加してください。注意: API の URL がわからない場合は、API ゲートウェイコンソールから API をクリックしてから、[ステージ] をクリックして確認できます。

    4.ファイルを保存します。

    5.HTML ファイルのみを ZIP (圧縮) します。

    6.Amplify コンソールを開きます。

    7.モジュール 1 で作成したウェブアプリケーションをクリックします。

    8.白い [ファイルを選択] ボタンをクリックします。

    9.ステップ 5 で作成した ZIP ファイルを選択します。

    10.ファイルがアップロードされると、デプロイプロセスが自動的に開始されます。緑のバーが表示されたら、デプロイは完了です。

  • 更新されたウェブアプリケーションをテストする
    1. [ドメイン] の下の URL をクリックします。
    2. 更新されたウェブアプリがブラウザに読み込まれます。
    3. 名前 (または任意の名前) を入力し、[API を呼び出す] ボタンをクリックします。
    4. 「Hello from Lambda」で始まり、入力したテキストが続くメッセージが表示されます。
    5. おめでとうございます。Amplify コンソールでデプロイされた稼働中のウェブアプリケーションができました。これで、API ゲートウェイ経由で Lambda 関数を呼び出すことができます。

アプリケーションのアーキテクチャ

これですべてのモジュールが完成したので、構築したもののアーキテクチャを次に示します。

full-stack amplify console arch diagram module 5

セットアップしたすべての AWS のサービスは、互いに安全にやり取りできます。ユーザーがウェブアプリケーションのボタンをクリックすると、API が呼び出され、Lambda 関数がトリガーされます。Lambda 関数はデータベースに書き込み、API Gateway を介してクライアントにメッセージを返します。すべてのアクセス権は IAM によって管理されます。

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
閉じる
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。
閉じる

おめでとうございます。

AWS でウェブアプリケーションを構築できました! 次のステップとして、サーバーレスとデータベースをより詳しく学び、AWS クラウドの知識をさらに深めましょう。