2023. 9. 11. 22:01ㆍAWS
이전 글
https://muyeon95.tistory.com/277
AWS Serverless Aplication : Hello world Lambda [Lambda, API Gateway, DynamoDB] (1)
AWS Builders 100 - Web application 을 듣고 정리한 내용입니다. 계정 생성하기 AWS 계정을 생성한 후 IAM 사용자를 만든다. 사용자 이름 : Administrator AWS Management Console 액세스 를 체크하고 콘솔 비밀번호는
muyeon95.tistory.com
AWS Builders 100 - Web application 을 듣고 정리한 내용입니다.
Simple webpage Lambda 생성
Functions 를 눌러 다시 Functions 창으로 돌아간다.
이전 글과 마찬가지로 Create Function 을 눌러서 들어간 다음, 이번에는 Author from scratch 를 선택한다.
이번에는 Blueprint 대신 직접 만들어 간단한 웹페이지를 띄워본다.
Function name 으로는 simple-webpage 를 입력하고, Runtime으로는 python 3.9 를 선택한다.
Permissions 는 아까와 똑같이 Create a new role with basic Lambda permissions 를 선택한다.
Advanced settings 에서 Enable function URL 을 선택한다. 그리고 Auth type 으로는 NONE을 선택한다.
그리고 Create function 을 누른다.
* 원래 Lambda 자체로는 외부에서 호출을 할 수 없다. 따라서 아까 만들었던 hello-world lambda 의 경우 외부 인터넷에서 호출해서 볼 수 없다. 이번에는 외부에서도 만든 서비스를 볼 수 있게 Function URL 기능을 통해 호출 가능한 URL 을 만들어 본다. 여기서 Auth type 을 NONE 으로 했는데, 실제 서비스를 만들때는 인증 절차를 거친 사용자만 호출할 수 있게 해야 한다.
앞서 만들었던 hello-world는 AWS 템플릿을 사용해 바로 Test 해볼 수 있었지만 이번에는 새로 직접 만드는 과정이기 때문에 직접 소스코드를 입력해야 한다. 아래 소스코드를 복사해서 붙여넣는다. 붙여 넣게 되면 자동으로 Deploy 버튼이 활성화되면서 앞에 Changes not deployed 라는 문구가 뜬다. 이 Deploy 버튼을 누른다.
import json
def lambda_handler(event, context):
response = {
"statusCode": 200,
"statusDescription": "200 OK",
"Access-Control-Allow-Origin" : "*",
"isBase64Encoded": False,
"headers": {
"Content-Type": "text/html; charset=utf-8"
}
}
response['body'] = """<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Hello World!</title>
<style>
#title {
font-family: arial; font-size: 2em;color: #eb971a; margin-top:50px;
text-align: center;
}
button {
background-color: #eb971a;
border:none;
color:white;
border-radius: 5px;
width:40%;
height:35px;
font-size: 13pt;
margin-top:30px;
text-align: center;
}
#sentence {
font-size: 17pt;
margin-top:30px;
font-weight: bold;
color: #eb971a;
}
</style>
</head>
<body>
<p id="title">Hello World From <b>Lambda</b></p>
<hr id="lambda-line" width="800px" align="center" color="#eb971a;">
<center><button onclick="checkEvent();">Who are you?</button></center>
<center><div id="sentence"></div></center>
</body>
<script type="text/javascript">
function checkEvent(){
$.ajax({ type: "GET",
url: "URL을입력하세요",
dataType:'json',
success: function(data){
document.getElementById('sentence').innerHTML = data.status + " " + data.name
},
error: function (error){
alert('ERROR::');
console.log(error)
}
});
}
</script>
</html>
"""
return response
* 이 코드는 기본적으로 웹페이지가 생성되어 사용자에게 보여질 때에는 사용자가 요청을 보내고, 이 요청에 따라 서버가 응답으로 HTML을 보내는 것이다.
이제 위에 초록색으로 Successfully updated the function simple-webpage 문구가 뜬다. 그 다음 왼쪽에 있는 Functions URL 아래에 있는 URL 을 클릭한다.
새로운 창이 열리면서 만든 웹페이지가 호출된다. 버튼을 클릭해보면 아직은 ERROR 가 뜬다.
다음은 버튼이 제대로 동작할 수 있도록 기능을 만든다.
다음 글
https://muyeon95.tistory.com/279
AWS Serverless Aplication : Api service lambda [Lambda, API Gateway, DynamoDB] (3)
이전 글 https://muyeon95.tistory.com/278 AWS Serverless Aplication : Webpage Lambda [Lambda, API Gateway, DynamoDB] (2) 이전 글 https://muyeon95.tistory.com/277 AWS Serverless Aplication : Hello world Lambda [Lambda, API Gateway, DynamoDB] (1) AWS Bu
muyeon95.tistory.com
'AWS' 카테고리의 다른 글
| AWS Serverless Aplication : DynamoDB 생성 [Lambda, API Gateway, DynamoDB] (4) (0) | 2023.09.11 |
|---|---|
| AWS Serverless Aplication : Api service lambda [Lambda, API Gateway, DynamoDB] (3) (0) | 2023.09.11 |
| AWS Serverless Aplication : Hello world Lambda [Lambda, API Gateway, DynamoDB] (1) (0) | 2023.09.11 |
| AWS EC2 ubuntu postgreSQL 연결 (0) | 2023.09.09 |
| AWS EC2 Docker & nGrinder 설치 (0) | 2023.08.28 |