AWSにおける基本Webアプリケーションの導入
今回の実験では、HelloworldをレンダリングするWebアプリケーションを作成します.
実践を通して学ぶ.
1.Webアプリケーションの作成
2.Webアプリケーションをサーバリースバックエンドに接続する
3.APIとデータベースを使用してWebアプリケーションにインタラクティブ機能を追加
私は勉強します.
モジュール1:Webアプリケーションの作成
実践を通して学ぶ.
1.Webアプリケーションの作成
2.Webアプリケーションをサーバリースバックエンドに接続する
3.APIとデータベースを使用してWebアプリケーションにインタラクティブ機能を追加
私は勉強します.
モジュール1:Webアプリケーションの作成
AWS Amplifコンソールを使用して、Webアプリケーションに静的リソースを導入します.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>
メモ帳に作成してインデックスします.htmlファイル名で保存および圧縮します.
Amplifyコンソールに入り、Deploy with Git providerを選択します.
次のように設定します.
「パブリッシュ」(Deploy)をクリックするとこの内容が表示され、ドメインへのリンクには「HELLOWLD」が表示されます.
モジュール2:サーバリース関数の作成
このモジュールでは、Webページにインタラクティブな機能を追加するための簡単なPythonコードを作成します.サーバリース関数をAWS Lambdaサービスとして記述します.これは、コンピューティングサービスがオンデマンドで実行するコードです.
AWS Lambdaコンソールにログインし、関数を作成します.
次の関数コードが書かれたコードです.
次のように変更します.# 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 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)
}
次に、「作成」(Generate)をクリックして作成します.
![]
テストを行うために、任意の設定名の解雇イベントJSONを以下のように変更することもできます.
灰色のテストをクリックします.成功すると、次のようになります.
モジュール3:サーバリース関数をWebアプリケーションに接続する
このモジュールはAmazon APIゲートウェイを使用してRESTful APIを生成し、Webクライアント上でLambda関数を呼び出すことができます.APIゲートウェイは、モジュール1が生成したHTMLクライアントとモジュール2が生成したサーバリースバックエンドとの間の中間層の役割である.
RESTful API RESTとは?
「Representation State Transfer」を表し、Webサービスのアーキテクチャパターンを作成します.
新しいREST APIの作成
APIゲートウェイコンソールにログインして以下の設定を行います!
特に、[終点タイプ](End Type)ドロップダウンメニューで[エッジ最適化](Edge Optimization)を選択します.edge最適化エンドポイントは、地理的に分散したクライアントに最適です.
新しいリソースとメソッドの作成
APIにおけるハイパーテキスト転送プロトコル(HTTP)メソッドの定義
APIでCORSを有効にしてWebサイトで使用
CORSとは?
ドメインまたはポートが他のサーバリソースを要求するメカニズム
左側のナビゲーション・ペインで、Helloworld APIの下にあるリソースをクリックします.
そしてメソッド作成中にPOSTをクリック!
次に、次の手順に従って、「CORSを有効にし、既存のCORSヘッダーを置換」ボタンをクリックします.
では、以下に示すように、方法の変更を確認するメッセージが表示されます.[OK]をクリックします.
APIの導入
「≪タスク｜Tasks｜Financial_Close≫」で「≪APIデプロイメント｜API Deployment｜Financial_Close≫」を選択し、「≪デプロイメント・ステップ｜Deployment Step｜Financial_Close≫」で「≪新規ステップ｜New Step｜Financial_Close≫」を設定します.
API検証
次の内容を本文フィールドに貼り付けます.{
"firstName":"Grace",
"lastName":"Hopper"
}
テストをクリックします.応答にコード200が含まれている場合、テストは以下のように完了します.
モジュール4:データテーブルの作成
このモジュールでは、Amazon DynamoDBを使用して、データを保持するテーブルを作成します.AWS IAMサービスを使用して、サービスを安全に許可して対話します.モジュール2で生成されたLambda関数は、新しく作成されたDynamodBテーブルにIAMポリシーによってデータを書き込むことを可能にする.これでpythonをLambda関数として使用します.
DYNAMODBテーブルの作成
Amazon DynamodBコンソールにログインし、テーブルを作成します.Amazonリソース名をコピーします.一般情報-その他情報-ARN
IAMポリシーを作成しLambda関数に追加
Lambda関数を編集してテーブルにデータを書き込みます.AWS Lambdaコンソールを開きます.
次に、「関数を生成する権限」をクリックし、インライン・ポリシーを追加します.
以下のコードを作成し、コピーした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"
}
]
}
次に、ポリシーを生成し、次の操作を行います.
Lambda関数を変更してDynamodBテーブルにデータを書き込む
Lambda関数のコードを次のように変更します.# 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)
}
そしてテストします.成功すれば、結果は以下の通りです.
さらに、テストイベントに一致するアイテムがDynamodBコンソールアイテムバーに表示されます.ここで説明した例を使用すると、プロジェクトIDは「AdaLovelace」となります.
モジュール5:Webアプリケーションへのインタラクティブ機能の追加
このモジュールは、モジュール1によって生成された静的ウェブサイトを更新し、モジュール3によって生成されたREST APIを呼び出す.これにより、ユーザ入力テキストを表示する機能が追加される.
Amplifyコンソールを使用したWebアプリケーションの更新
モジュール1のコードを次のように変更します.<!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>
入れて、新しいファイルを作成して、圧縮して保存します.
次にAmplifyコンソールを開いてファイルをアップロードします.
更新されたWebアプリケーションのテスト
ドメインにアクセスするURLは以下の通りです.
では、Webアプリケーションの作成が完了します.
Reference
この問題について(AWSにおける基本Webアプリケーションの導入), 我々は、より多くの情報をここで見つけました
https://velog.io/@beomseok7/AWS에-기본-웹-애플리케이션-구축해보기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>このモジュールでは、Webページにインタラクティブな機能を追加するための簡単なPythonコードを作成します.サーバリース関数をAWS Lambdaサービスとして記述します.これは、コンピューティングサービスがオンデマンドで実行するコードです.
AWS Lambdaコンソールにログインし、関数を作成します.
次の関数コードが書かれたコードです.
次のように変更します.
# 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 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)
}テストを行うために、任意の設定名の解雇イベントJSONを以下のように変更することもできます.
灰色のテストをクリックします.成功すると、次のようになります.
モジュール3:サーバリース関数をWebアプリケーションに接続する
このモジュールはAmazon APIゲートウェイを使用してRESTful APIを生成し、Webクライアント上でLambda関数を呼び出すことができます.APIゲートウェイは、モジュール1が生成したHTMLクライアントとモジュール2が生成したサーバリースバックエンドとの間の中間層の役割である.
RESTful API RESTとは?
「Representation State Transfer」を表し、Webサービスのアーキテクチャパターンを作成します.
新しいREST APIの作成
APIゲートウェイコンソールにログインして以下の設定を行います!
特に、[終点タイプ](End Type)ドロップダウンメニューで[エッジ最適化](Edge Optimization)を選択します.edge最適化エンドポイントは、地理的に分散したクライアントに最適です.
新しいリソースとメソッドの作成
APIにおけるハイパーテキスト転送プロトコル(HTTP)メソッドの定義
APIでCORSを有効にしてWebサイトで使用
CORSとは?
ドメインまたはポートが他のサーバリソースを要求するメカニズム
左側のナビゲーション・ペインで、Helloworld APIの下にあるリソースをクリックします.
そしてメソッド作成中にPOSTをクリック!
次に、次の手順に従って、「CORSを有効にし、既存のCORSヘッダーを置換」ボタンをクリックします.
では、以下に示すように、方法の変更を確認するメッセージが表示されます.[OK]をクリックします.
APIの導入
「≪タスク｜Tasks｜Financial_Close≫」で「≪APIデプロイメント｜API Deployment｜Financial_Close≫」を選択し、「≪デプロイメント・ステップ｜Deployment Step｜Financial_Close≫」で「≪新規ステップ｜New Step｜Financial_Close≫」を設定します.
API検証
次の内容を本文フィールドに貼り付けます.{
"firstName":"Grace",
"lastName":"Hopper"
}
テストをクリックします.応答にコード200が含まれている場合、テストは以下のように完了します.
モジュール4:データテーブルの作成
このモジュールでは、Amazon DynamoDBを使用して、データを保持するテーブルを作成します.AWS IAMサービスを使用して、サービスを安全に許可して対話します.モジュール2で生成されたLambda関数は、新しく作成されたDynamodBテーブルにIAMポリシーによってデータを書き込むことを可能にする.これでpythonをLambda関数として使用します.
DYNAMODBテーブルの作成
Amazon DynamodBコンソールにログインし、テーブルを作成します.Amazonリソース名をコピーします.一般情報-その他情報-ARN
IAMポリシーを作成しLambda関数に追加
Lambda関数を編集してテーブルにデータを書き込みます.AWS Lambdaコンソールを開きます.
次に、「関数を生成する権限」をクリックし、インライン・ポリシーを追加します.
以下のコードを作成し、コピーした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"
}
]
}
次に、ポリシーを生成し、次の操作を行います.
Lambda関数を変更してDynamodBテーブルにデータを書き込む
Lambda関数のコードを次のように変更します.# 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)
}
そしてテストします.成功すれば、結果は以下の通りです.
さらに、テストイベントに一致するアイテムがDynamodBコンソールアイテムバーに表示されます.ここで説明した例を使用すると、プロジェクトIDは「AdaLovelace」となります.
モジュール5:Webアプリケーションへのインタラクティブ機能の追加
このモジュールは、モジュール1によって生成された静的ウェブサイトを更新し、モジュール3によって生成されたREST APIを呼び出す.これにより、ユーザ入力テキストを表示する機能が追加される.
Amplifyコンソールを使用したWebアプリケーションの更新
モジュール1のコードを次のように変更します.<!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>
入れて、新しいファイルを作成して、圧縮して保存します.
次にAmplifyコンソールを開いてファイルをアップロードします.
更新されたWebアプリケーションのテスト
ドメインにアクセスするURLは以下の通りです.
では、Webアプリケーションの作成が完了します.
Reference
この問題について(AWSにおける基本Webアプリケーションの導入), 我々は、より多くの情報をここで見つけました
https://velog.io/@beomseok7/AWS에-기본-웹-애플리케이션-구축해보기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
{
"firstName":"Grace",
"lastName":"Hopper"
}このモジュールでは、Amazon DynamoDBを使用して、データを保持するテーブルを作成します.AWS IAMサービスを使用して、サービスを安全に許可して対話します.モジュール2で生成されたLambda関数は、新しく作成されたDynamodBテーブルにIAMポリシーによってデータを書き込むことを可能にする.これでpythonをLambda関数として使用します.
DYNAMODBテーブルの作成
Amazon DynamodBコンソールにログインし、テーブルを作成します.Amazonリソース名をコピーします.一般情報-その他情報-ARN
IAMポリシーを作成しLambda関数に追加
Lambda関数を編集してテーブルにデータを書き込みます.AWS Lambdaコンソールを開きます.
次に、「関数を生成する権限」をクリックし、インライン・ポリシーを追加します.
以下のコードを作成し、コピーした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"
}
]
}
次に、ポリシーを生成し、次の操作を行います.
Lambda関数を変更してDynamodBテーブルにデータを書き込む
Lambda関数のコードを次のように変更します.
# 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)
}さらに、テストイベントに一致するアイテムがDynamodBコンソールアイテムバーに表示されます.ここで説明した例を使用すると、プロジェクトIDは「AdaLovelace」となります.
モジュール5:Webアプリケーションへのインタラクティブ機能の追加
このモジュールは、モジュール1によって生成された静的ウェブサイトを更新し、モジュール3によって生成されたREST APIを呼び出す.これにより、ユーザ入力テキストを表示する機能が追加される.
Amplifyコンソールを使用したWebアプリケーションの更新
モジュール1のコードを次のように変更します.<!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>
入れて、新しいファイルを作成して、圧縮して保存します.
次にAmplifyコンソールを開いてファイルをアップロードします.
更新されたWebアプリケーションのテスト
ドメインにアクセスするURLは以下の通りです.
では、Webアプリケーションの作成が完了します.
Reference
この問題について(AWSにおける基本Webアプリケーションの導入), 我々は、より多くの情報をここで見つけました
https://velog.io/@beomseok7/AWS에-기본-웹-애플리케이션-구축해보기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!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>Reference
この問題について(AWSにおける基本Webアプリケーションの導入), 我々は、より多くの情報をここで見つけました https://velog.io/@beomseok7/AWS에-기본-웹-애플리케이션-구축해보기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol