[AWS]AWSの起動:基本的なWebアプリケーションの導入
21858 ワード
↔▼▼このようなアーキテクチャを持つ簡単なWebアプリケーションを構築!
1.Webアプリケーションの作成
ARN情報の検索
表を作成したら、表名をクリックして[詳細]タブを展開します.
概要>一般>その他>Amazonリソース名(ARN)
**Lambdaでのアクセス権の検索タブ:構成>アクセス権
HelloWorld Functionの関数を変更します.
testに失敗しました.チェックしてみると、dynamodb table名は
修正後の配置+テスト後にSuccededを発見!!
新しいアクティビティを追加し、dynamodbに追加するかどうかをテストします.
試験は、
結果は.
もう一つの項目が追加されたことがわかります.
5.Webアプリケーションにインタラクティブ機能を追加する
1.Webアプリケーションの作成
:AWS Amplifyコンソールを使用してWebアプリケーションに静的リソースを導入
1.2. Amplifyコンソールを使用したWebアプリケーションの作成
index.htmlを作成しzipファイルに圧縮<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>
✔️ Amplify Hosting✔️ Git 공급자 없이 배포 App Name : gettingStarted_hz환경이름 : dev
drag&drop htmlを使用します.zipを引き出す
ドメインをクリックしてhello worldのホームページが表示されたときに成功しました
2.サーバリース関数の作成
:AWS Lambdaを使用したサーバリース関数の作成
3.サーバリース関数をWebアプリケーションに接続する
:APIゲートウェイを使用したサーバリース関数の配備
3.1. 新しいREST APIの作成
3.2. 新しいリソースとメソッドの作成
3.3. APIの導入
3.4. API検証
4.データテーブルの作成
:Amazon DynamodBテーブルにデータを保持する
4.1. DYNAMODBテーブルの作成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>:AWS Lambdaを使用したサーバリース関数の作成
3.サーバリース関数をWebアプリケーションに接続する
:APIゲートウェイを使用したサーバリース関数の配備
3.1. 新しいREST APIの作成
3.2. 新しいリソースとメソッドの作成
3.3. APIの導入
3.4. API検証
4.データテーブルの作成
:Amazon DynamodBテーブルにデータを保持する
4.1. DYNAMODBテーブルの作成
:Amazon DynamodBテーブルにデータを保持する
4.1. DYNAMODBテーブルの作成
表を作成したら、表名をクリックして[詳細]タブを展開します.
概要>一般>その他>Amazonリソース名(ARN)
4.2. IAM作成後Lambdaに追加
**Lambdaでのアクセス権の検索タブ:構成>アクセス権
4.3. Lambdaの変更
HelloWorld Functionの関数を変更します.
# 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)
}testに失敗しました.チェックしてみると、dynamodb table名は
HelloWorldDatabaseではなく、HelloWorldDataBaseだったので、間違いました.修正後の配置+テスト後にSuccededを発見!!
4.4. 変更のテスト
++新しいイベントのテスト
新しいアクティビティを追加し、dynamodbに追加するかどうかをテストします.
試験は、
firstNameおよびlastNameを簡単に変更して行った.結果は.
もう一つの項目が追加されたことがわかります.
5.Webアプリケーションにインタラクティブ機能を追加する
:Webアプリケーションを変更してAPIを呼び出す
5.1. Amplifyコンソールを使用したWebアプリケーションの更新
index.htmlの変更
✔41行2479142自分のAPIアドレスに変更<!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ファイルに圧縮して再配置します.
5.2. 更新されたWebアプリケーションのテスト
"YOUR-API-INVOKE-URL" = Cloudfirst Name=Clubとして作成し、last Nameをクリックします.
こんなメッセージが
DYNAMODBに戻って表項目をリフレッシュすると、入力が正しいことが確認できます.
Reference
この問題について([AWS]AWSの起動:基本的なWebアプリケーションの導入), 我々は、より多くの情報をここで見つけました
https://velog.io/@h222ji/AWS-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]AWSの起動:基本的なWebアプリケーションの導入), 我々は、より多くの情報をここで見つけました https://velog.io/@h222ji/AWS-AWS-시작하기-기본-웹-애플리케이션-구축テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol