基本的なウェブアプリケーションを構築する
チュートリアル
モジュール 5: ウェブアプリケーションに対話性を追加する
このモジュールでは、API を呼び出し、カスタムテキストを表示できるように静的ウェブサイトを変更します。
概要
このモジュールでは、モジュール 1 で作成した静的ウェブサイトを更新して、モジュール 3 で作成した REST API を呼び出します。これにより、入力内容に基づいてテキストを表示する機能が追加されます。
実行する内容
- HTML ページから API Gateway API を呼び出す
- Amplify コンソールにウェブアプリケーションの新しいバージョンをアップロードする
主要な概念
ウェブサイトのデプロイ – ユーザーがウェブサイトを利用できるようにします。
環境 –「生産」、「開発」、「ステージング」など、アプリケーションまたはウェブサイトを実行できるステージ。
API の呼び出し – API にイベントを送信して特定の動作をトリガーします。
実装
-
Amplify コンソールでウェブアプリケーションを更新する
- モジュール 1 で作成した index.html ファイルを開きます。
- 既存のコードを次のコードに置き換えます。
<!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.行 41 に (モジュール 3 の) API 呼び出し URL を必ず追加してください。注意: API の URL がわからない場合は、API Gateway コンソールで API を選択してから、[ステージ] を選択して確認できます。
4.ファイルを保存します。
5.HTML ファイルのみを ZIP (圧縮) します。
6.Amplify コンソールを開きます。
7.モジュール 1 で作成したウェブアプリケーションを選択します。
8.白い [ファイルを選択] ボタンを選択します。
9.ステップ 5 で作成した ZIP ファイルを選択します。
10.ファイルがアップロードされると、デプロイプロセスが自動的に開始されます。緑のバーが表示されたら、デプロイは完了です。
- モジュール 1 で作成した index.html ファイルを開きます。
-
更新されたウェブアプリケーションをテストする
- [ドメイン] の下の URL を選択します。
- 更新されたウェブアプリケーションがブラウザに読み込まれます。
- 名前 (または任意の名前) を入力し、[API を呼び出す] ボタンを選択します。
- 「Hello from Lambda」で始まり、入力したテキストが続くメッセージが表示されます。
お疲れさまでした。 Amplify コンソールでデプロイされた稼働中のウェブアプリケーションができました。これで、API Gateway 経由で Lambda 関数を呼び出すことができます。
アプリケーションのアーキテクチャ
これですべてのモジュールが完了しました。構築したアプリケーションのアーキテクチャを次に示します。
セットアップしたすべての AWS のサービスは、互いに安全にやり取りできます。ユーザーがウェブアプリケーションのボタンを選択すると、API が呼び出され、Lambda 関数がトリガーされます。Lambda 関数はデータベースに書き込み、API Gateway を介してクライアントにメッセージを返します。IAM はすべての権限を管理します。
お疲れさまでした。
AWS でウェブアプリケーションを構築できました! 次のモジュールでは、アカウントに不要な課金が発生しないように、このチュートリアルで使用したリソースをクリーンアップします。