선릉역 1번 출구

[AWS] Web application with Serverless 본문

Computer/Cloud Computing

[AWS] Web application with Serverless

choideu 2023. 3. 20. 11:14

 

구성도

1. 자주 사용하는 항목 즐겨찾기 등록

 

2. 각 서비스에 대해서 알아보기

  • Lambda
    • AWS의 대표적인 서버리스 서비스로, 서버에 대해 고민하지 않고 서비스를 간단하게 만들 수 있도록 도와줌
  • DynamoDB
    • AWS의 noSQL 데이터서비스
    • Oracle이나 Mysql의 경우 데이터를 보관하는 형태인 스키마를 정의하고, 이 스키마를 이용해 데이터를 저장함
    • DynamoDB의 경우 스키마 없이 데이터를 원하는 형태로 자유롭게 저장할 수 있음
    • 완전관리형 서비스로, 서버 관리에 신경쓰지 않아도 됨
  • API Gateway
    • AWS의 api 관리 서비스
    • API란? 외부에서 기업의 서비스를 이용하려고 할 때 규격을 정해주는 것임
    • 일종의 형식을 정해놓고, 이 형식대로 기업의 서비를 호출하면 기업은 서비스를 제공해주는 약속이라고 생각하면 됨
    • API Gateway는 이런 API를 관리해주고 API를 통해 외부에서의 호출이 왔을 때 대문의 역할을 해주는 AWS 서비스임

3. Lambda

3.1 Hello world Lambda 생성

  • 새로 작성
  • 블루프린트 사용
  • 컨테이너 이미지 사용

Lambda 생성 완료
lambda 생성
테스트 셋 생성
테스트 셋 구동 확인

3.2 Webpage Lambda 생성

Advanced Setting

- 함수 URL 활성화 중 NONE 선택 > Test 용도이기 때문에 NONE을 사용

 

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 + "&nbsp;&nbsp;" + data.name
                        }, 
                        error: function (error){
                        alert('ERROR::');
                        console.log(error)
                        }

                });
            }

        </script>
        </html>
            
        """
        
    return response

소스코드 적용 전/후

  • 활성화된 URL을 통해 웹페이지 접속

3.3 Api service lambda 생성

  • DB랑 연결할 것이기 때문에 DynamoDB와 연동할 역할을 부여함
import json
import boto3
import random
import json

def lambda_handler(event, context):
    
    member_name = ['Ama','Jone','Zon','Penny','Jessie']
    member_status = ['Happy','Sad','Serious','Satisfied','Free']
    
    dynamodb = boto3.resource('dynamodb',endpoint_url='http://dynamodb.ap-northeast-2.amazonaws.com')
    member_table = dynamodb.Table('hello-member')
    
    name = member_name[random.randint(0,4)]
    status = member_status[random.randint(0, 4)]
    
    member_table.put_item(
       Item={
            'name': name,
            'status': status,
        }
    )
    
    documents = {'name':name,'status':status}
    
    print(documents)
    
    return {
        'statusCode': 200,
        'headers': {'Access-Control-Allow-Origin': '*'},
        'body': json.dumps(documents)
    }
  • Webpage Lambda처럼 코드 Deploy하기

현재 생성 목록

4. DynamoDB

테이블 생성

  • 파이썬 코드에서 테이블 이름을 hello-member로 설정했기 때문에 똑같이 적용해주어야 함

현재 생성 목록

5. API Gateway

5.1 API 생성 및 Lambda 연결

REST API 생성
메소드 생성

 

api-service-create 람다과 연동

5.2 CORS 설정

enable cors and replace existing CORS headers 클릭
생성된 URL 확인
현재 생성 목록

5.3 webpage lambda와 연동

  • simple-webpage lambda와 api 연동

현재 생성 목록

7. 실행

 

8. DynamoDB 확인

 

 

*위 글은 AWS Builders 100 - Web application 웨비나를 내용으로 작성되었습니다.

 

'Computer > Cloud Computing' 카테고리의 다른 글

[AWS] 서비스 요약 - Container  (0) 2023.05.04
[AWS] 서비스 요약 - Computing  (0) 2023.05.04
[AWS-실습] EC2 생성  (0) 2023.03.06
[AWS-실습] NACL 생성  (0) 2023.03.02
[AWS] EC2/Auto Scaling/Elastic Beanstalk  (1) 2023.03.02
Comments