정보실

웹학교

정보실

html 서버리스 아키텍처를 사용하여 시작하는 방법

본문

일반적으로 웹앱 또는 API를 구축하려는 경우 일반적으로 서버를 관리하고 많은 요청 량을 처리 할 수 ​​있도록 앱을 확장하는 데 많은 시간과 노력을 투자해야 했습니다. 

서버리스는 서버 관리 및 확장에 대해 걱정할 필요 없이 애플리케이션을 실행할 수 있는 클라우드 컴퓨팅 모델입니다.


https://www.freecodecamp.org/news/how-to-get-started-with-serverless-architecture/ 


클라우드 공급자의 서비스에 코드를 업로드 하기 만하면 임시 환경이 자동으로 프로비저닝 됩니다. 

기존 아키텍처와 달리 수천 건의 요청을 즉시 처리 할 수 ​​있도록 확장 할 수 있으며 코드가 실행되는 기간 동안만 비용을 지불합니다.


이 기사에서는 AWS의 (Amazon Web Services) 서버리스 제품인 Lambda를 기반으로 하는 간단한 연락 양식을 작성합니다. 

그러나 서버리스는 모든 복잡성 또는 크기의 응용 프로그램에 적합합니다. 

예를 들어, 20 개 언어를 지원하는 프로그래밍 놀이터 인 myCompiler를 구축했으며 대부분 서버리스로 구동됩니다.


시작하기 전에 서버리스 및 Lambda의 작동 방식과 문의 양식을 구성 할 아키텍처에 대해 자세히 살펴 보겠습니다. 또한 이 기사의 끝 부분에서 대규모 서버리스 응용 프로그램을 구축하고 배포하는 데 도움이 되는 몇 가지 도구를 살펴 보겠습니다.


이 안내서를 따르려면 AWS 계정이 필요하며 여기에서 등록 할 수 있습니다. 이 안내서에 대한 AWS 사용은 프리 티어에 의해 전적으로 적용됩니다.


AWS Lambda는 어떻게 작동합니까? 


이 섹션에서는 Lambda의 워크 플로와 작동 방식에 대해 간략하게 이해합니다. 그러나 이러한 개념은 대부분의 다른 클라우드 제공 업체의 서버리스 제품에도 적용됩니다.


Lambda를 사용하면 일반적으로 Python, Node.js 또는 Ruby로 작성된 스크립트 인 AWS에 코드를 업로드합니다. 

Go, Java 또는 C #과 같은 언어의 경우 Linux 실행 파일이거나 언어 형식의 패키지 (예 : Java 용 jar 파일)입니다.


코드를 업로드 한 후 코드를 수동으로 "호출"하거나 이 목적으로 다른 AWS 서비스를 사용할 수 있습니다 (자세한 내용은 잠시 후에 살펴 보겠습니다). 코드를 호출하면 Lambda는 서버 중 하나에 "컨테이너"라는 안전한 임시 Linux 환경을 생성하고 호출의 일부로 전달한 모든 데이터는 함수에 제공됩니다.


함수가 실행을 완료하면 Lambda 서비스는 코드 결과를 호출자에게 반환합니다. 그런 다음 컨테이너를 다시 사용하여 다른 실행을 제공하거나 함수를 오랫동안 호출하지 않으면 컨테이너가 파괴됩니다.


병렬 호출을 수행 할 때 Lambda는 각 호출을 처리 할 컨테이너를 만듭니다. 

각 호출은 단일 컨테이너 전용이므로 각 호출은 실행을 위한 충분한 리소스를 얻습니다. 메모리와 함께 증가하는 CPU와 함께 각 호출에 128MB에서 3GB의 메모리를 할당 할 수 있습니다. 

이를 최대 1000 개의 병렬 호출을 처리 할 수 ​​있다는 사실과 결합하면 (AWS에 문의하여 증가 시킬 수 있음) 확장에 대해 걱정할 필요 없이 무거운 워크로드를 처리 할 수 ​​있습니다.


따라서 확장에 대한 우려가 사라지면 AWS Lambda의 운영 비용은 어떻게 됩니까? Lambda 사용량은 요청 수, 할당 된 메모리 및 함수 실행에 걸리는 시간 (밀리 초)과 같은 매개 변수를 사용하여 측정됩니다.


가장 작은 메모리 크기 (128MB)를 선택하고 호출 할 때 함수를 실행하는 데 1 초가 걸리면 최대 백만 번까지 함수를 무료로 호출 할 수 있습니다. 그 후, 백만 번의 호출마다 최대 $ 2.30의 비용이 듭니다. 128MB의 메모리 크기는 작지만 많은 종류의 작업을 처리하기에 충분합니다.


API 게이트웨이 — Lambda를 사용하여 HTTP 요청 제공 


앞에서 언급 했듯이 코드를 업로드 한 후에는 수동으로 호출해야 합니다. 웹 앱을 빌드 하려면 HTTP 요청을 수신하고 요청 세부 사항으로 함수를 호출하며 함수에서 리턴 된 데이터를 HTTP 응답으로 변환하는 서버가 있어야 합니다.


AWS에는 API 게이트웨이라는 다른 서비스도 있습니다. Lambda와 마찬가지로 매우 높은 요청 량을 처리하도록 자동으로 확장 할 수 있는 또 다른 AWS 관리 형 서비스입니다.


API 게이트웨이를 생성하면 다음과 같은 기본 URL이 생성됩니다. https://abcdefgh.execute-api.us-east-1.amazonaws.com/


이 기본 URL에서 경로 및 요청 메소드 (예 : GET 또는 POST)를 함수에 맵핑 할 수 있습니다. 

기본 이외의 다른 것을 사용하려는 경우 맞춤 도메인을 만들 수도 있지만 이 가이드에서는 다루지 않습니다.


또한 Lambda와 마찬가지로 API 게이트웨이의 가격도 매우 높습니다. 

최대 백만 건의 요청을 무료로 제공 할 수 있으며 그 후 백만 건의 요청마다 1 달러의 비용이 듭니다.


연락 양식 작성 


사용자가 작성한 세부 정보가 포함 된 전자 메일을 보내는 간단한 연락처 양식을 작성합니다. 다음은 연락처 양식의 다양한 부분을 작성하는 방법입니다.

  1. 먼저 AWS의 이메일 서비스 인 SES (Simple Email Service)를 설정합니다. 연락처 양식에 대한 이메일을 보내도록 도와줍니다.
  2. 다음으로 Lambda에 대한 "역할"을 설정 한 다음 HTTP 요청을 수신하고 이메일을 보내는 Lambda 함수를 만듭니다.
  3. API 게이트웨이를 설정하고 2 단계에서 생성 한 기능에 매핑 합니다.
  4. 그런 다음 API 게이트웨이 엔드 포인트와 상호 작용하고 사용자가 입력 한 세부 정보를 제출하는 웹 페이지를 설정합니다.

이 가이드의 끝에서 다음과 같이 작동하는 것을 설정하게 됩니다.


Serverless app 


시작하려면 AWS 관리 콘솔 (또는 "콘솔")을 방문하여 가입하는 데 사용한 세부 정보로 로그인하십시오. 로그인 한 후 탐색 모음의 "서비스"드롭 다운을 사용하여 사용할 다양한 서비스 간을 전환 할 수 있습니다.


AWS management console 


이메일 전송을 위한 SES 설정 


"서비스"드롭 다운을 통해 콘솔의 SES (Simple Email Service) 섹션을 방문하거나 이 직접 링크를 사용하여 시작하십시오. 그런 다음 왼쪽의 "이메일 주소"섹션을 클릭하십시오. 이 페이지가 나타납니다.


AWS SES 

"새 이메일 주소 확인"버튼을 클릭 한 다음 이메일 주소를 입력하고 "이 이메일 주소 확인"을 클릭하십시오. 확인 링크가 포함 된 이메일을 받게 됩니다. 주소를 확인한 다음 SES 콘솔 페이지를 새로 고치십시오. 이메일 주소가 확인 된 것을 볼 수 있습니다 :

AWS SES verify email address 

이제 SES를 사용하여 전자 메일 주소로 전자 메일을 보낼 수 있습니다.


Lambda 함수의 역할 설정 


AWS에서는 명시적인 권한을 부여하지 않는 한 대부분의 작업은 AWS 계정의 다른 리소스 또는 서비스와 상호 작용할 수 있는 권한 없이 시작됩니다.


이는 Lambda 기능이 SES와 같은 서비스와 통신하여 이메일을 보낼 수 없음을 의미합니다. Lambda는 "역할"이라는 것을 사용하여 다른 서비스에 대한 액세스 수준을 정의합니다. 따라서 이 섹션에서는 SES 및 CloudWatch에 액세스하여 기능의 역할을 설정합니다. CloudWatch는 로그 및 지표를 저장하는 서비스이며 Lambda는 이를 사용하여 기능에 대한 오류 및 실행 로그를 저장합니다.


역할을 설정하려면 콘솔의 IAM (Identity and Access Management) 섹션으로 이동하거나 이 직접 링크를 사용하고 왼쪽에서 "Roles"를 클릭하십시오. 아래와 같은 페이지가 표시됩니다.


AWS IAM 


새로운 역할을 만들어야 하므로 "역할 만들기"를 클릭하십시오. AWS 서비스 목록이 있는 페이지가 나타납니다. Lambda 용으로 설정 했으므로 "Lambda"를 선택하고 "Next : Permissions"버튼을 클릭하십시오.


AWS role trusted entity 


이제 권한 페이지에 정책을 첨부 할 수 있는 옵션이 제공됩니다. 먼저 "SES"권한을 부여합니다. "SES"를 검색하고 "AmazonSESFullAccess"정책을 선택하면 됩니다.

AWS permission policies 


마찬가지로“CloudWatchFullAccess”를 검색 한 다음 나타나는 정책을 선택하여 CloudWatch 액세스 권한을 부여 할 수 있습니다.


cloudwatch policy 


이 정책을 선택한 후 "Next : Tags"를 클릭 한 다음 "Next : Review"버튼을 클릭하십시오. "역할 이름"텍스트 상자에 "ContactFormRole"과 같은 원하는 역할 이름을 입력하십시오. 그런 다음 "역할 만들기"버튼을 클릭하십시오.


AWS role 


이제 Lambda 함수와 함께 사용할 수 있는 역할이 있습니다.


Lambda 함수 생성 


이 시점에서 API 게이트웨이에서 세부 정보를 수신하고 전자 메일을 보내는 Lambda 함수를 만들 수 있습니다.


콘솔의 Lambda 섹션으로 함수를 작성하거나 이 직접 링크를 사용하십시오. 왼쪽에서 "기능"을 클릭하십시오. 이 페이지에서“기능 생성”버튼을 클릭하십시오.

create lambda function 


기능 만들기 페이지에서 기능 이름과 사용할 언어를 묻는 메시지가 표시됩니다. 함수 이름을 "ContactFormFunction"으로 지정하고 Python 3.8을 언어로 사용합니다.


lambda-1.png 

다음으로 이전 섹션에서 만든 역할을 첨부하겠습니다. "권한"섹션 아래의 "실행 역할 선택 또는 작성"을 클릭하고 "기존 역할 사용"을 선택한 다음 이전에 작성한 "ContactFormRole"역할을 선택하십시오. 세부 사항을 입력 한 후 "기능 생성"버튼.


lambda-2.png 



기능에 대한 세부 사항을 보여주는 페이지로 이동합니다. 코드 편집기를 볼 수 있도록 조금 아래로 스크롤 하십시오.


lambda-3.png 


오른쪽 창에서 다음 코드를 붙여 넣고 your_email_address_here를 전자 메일 주소로 변경하십시오.


import boto3
from base64 import b64decode
from urllib.parse import parse_qs

# Replace your email address here
send_to = 'your_email_address_here'

def lambda_handler(event, context):
    # We receive our data through POST requests. API gateway
    # sends the POST data as a Base64 encoded string in
    # event['body'], so we must decode it.
    data = parse_qs(b64decode(event['body']).decode())

    subject = 'You got a message from %s' % data['email'][0]
    text = '\n'.join([
        'Name: %s' % data['name'][0],
        'Email: %s' % data['email'][0],
        'Message %s' % data['message'][0]
    ])

    # Send an email through SES with the SendEmail API
    client = boto3.client('ses', region_name='us-east-1')
    client.send_email(
        Source=send_to,
        Destination={'ToAddresses': [send_to]},
        Message={
            'Subject': {'Data': subject},
            'Body': {'Text': {'Data': text}}
        },
        ReplyToAddresses=[data['email'][0]]
    )

    # This is the response that'll be sent out through the
    # API gateway to the browser.
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': '*'
        },
        'body': '"Success"' # jquery expects a JSON response
    }

그런 다음 오른쪽 상단의“저장”버튼을 클릭하여 코드를 저장하십시오. 그 방법으로 API 게이트웨이를 만들고 Lambda 함수로 매핑 합니다.


API 게이트웨이로 HTTP 요청 처리 


API 게이트웨이를 추가하고 이를 함수에 매핑 하려면 "디자이너"섹션이 보일 때까지 Lambda 함수 페이지에서 위로 스크롤하고 아래 표시된 대로 "트리거 추가"버튼을 클릭하십시오.


lambda-4.png 


“Trigger”구성 페이지가 열립니다. 트리거는 Lambda 함수를 호출 할 수 있는 것으로, API 게이트웨이가 필요하므로 드롭 다운에서 선택하십시오.


lambda trigger 


API 게이트웨이 설정을 위한 다양한 옵션이 나타납니다. "API"를 "새 API 생성"으로 설정하고 "템플릿 선택"을 "HTTP API"로 설정했는지 확인하십시오. 


API Gateway create API 


아래로 스크롤 하여 "추가"기능을 클릭하여 API 게이트웨이를 설정하십시오. 완료하는 데 몇 초가 걸리며 완료되면 디자이너 보기로 이동합니다. Lambda 기능을 트리거 할 수 있는 URL을 보려면 왼쪽의 "API gateway"버튼을 클릭하십시오.


lambda-5.png 


이제 문의 양식 페이지를 작성하기 전에 지금까지 설정이 올바르게 작동하는지 테스트하겠습니다. 

MacOS, Linux 또는 최신 버전의 Windows 10을 사용하는 경우 위에 표시된 API 게이트웨이 URL을 복사하고 터미널에서 다음 명령을 실행할 수 있습니다. your_api_gateway_url을 실제 URL로 바꾸십시오!


curl -i your_api_gateway_url --data-urlencode "name=John" --data-urlencode "email=john@example.com" --data-urlencode "message=hi there"

모두 잘 진행되면 다음과 같이 "성공"메시지와 함께 200 OK 응답이 표시됩니다.


curl request 


또한 받은 편지함에“john@example.com으로부터 메시지를 받았습니다”라는 제목의 이메일이 양식에 입력되어 있어야 합니다.


그러나 이것은 때로는 까다로울 수 있습니다. 이메일이 스팸 폴더로 전달되거나 해당 이메일을 보지 않고 거부 될 수도 있습니다. Gmail 및 Yahoo와 같은 공급자는 타사 (예 : SES)가 도메인 이름을 사용하여 전자 메일을 보내지 못하도록 차단하기 때문입니다.


고유 한 도메인 이름이 있는 경우 SPF 레코드를 설정하여 이 문제를 해결할 수 있습니다. 그러나 도메인 없이도 팔로우 할 수 있기를 원하므로 이 가이드에서는 다루지 않습니다.


다음으로 문의 양식 페이지를 작성하여 이 가이드를 완성합니다.


연락 양식 작성 


자주 사용하는 텍스트 편집기를 열고 다음 코드를 HTML 파일로 저장하십시오. your_api_gateway_url을 이전에 얻은 전체 URL로 바꾸십시오.


<!DOCTYPE html>
<html>
<head>
  <title>Contact form</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <style>
    body {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Contact form</h2>
    <hr>
    <form id="form">
      <div class="form-group">
        <label for="name">Your name</label>
        <input type="text" class="form-control" id="name" placeholder="Your name">
      </div>
      <div class="form-group">
        <label for="email">Your email address</label>
        <input type="email" class="form-control" id="email" placeholder="Your email address">
      </div>
      <div class="form-group">
        <label for="message">Your message</label>
        <textarea class="form-control" id="message" rows="3"></textarea>
      </div>
      <div id="alert" class="alert d-none">
      </div>
      <button type="submit" class="btn btn-primary">
        Submit
      </button>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    function showMessage(msg, type) {
      $('#alert').attr('class', `alert alert-${type}`).text(msg)
    }

    function hideMessage(msg) {
      $('#alert').attr('class', 'd-none')
    }

    $('#form').submit(event => {
      event.preventDefault()
      hideMessage()

      let name = $('#name').val().trim()
      let email = $('#email').val().trim()
      let message = $('#message').val().trim()

      if (!(name && email && message)) {
        showMessage('You must fill in all the fields before submitting the form', 'danger')
        return
      }

      $.post('your_api_gateway_url', {name, email, message}).done(_ => {
        showMessage("Thanks for contacting us. We'll be in touch shortly.", 'success')
      }).fail(_ => {
        showMessage('Something went wrong when submiting the message', 'danger')
      })
    })
  </script>
</body>
</html>

파일을 저장 한 후에는 브라우저에서 파일을 열고 세부 사항을 입력 한 후 "제출"을 클릭하십시오. 다음과 같은 성공 메시지가 표시됩니다.


contact form 


버튼을 클릭하면 세부 정보를 POST 요청으로 API 게이트웨이에 제출 한 다음 Lambda 기능을 트리거하여 SES를 통해 이메일을 보냅니다. 그러나 이전 섹션 (“API 게이트웨이로 HTTP 요청 처리”)에서 논의한 것처럼 특정 상황에서는 이메일을 받지 못할 수도 있습니다.


이제 논리의 대부분을 서버리스로 옮기는 문의 양식이 생겼으므로 이 어딘가에서 호스팅 해야 하는 이 정적 웹 페이지가 있습니다.


이 페이지를 호스팅 하려면 서버가 필요합니까? 전혀! AWS는 S3 (Simple Storage Service)라는 스토리지 서비스를 제공하며 이를 사용하여 정적 웹 사이트를 호스팅 할 수 있습니다. 도메인 이름이 필요하므로 도메인 이름이 있으면 이 문서를 사용하여 웹 페이지를 호스팅 할 수 있습니다.


다음에 갈 곳? 


서버리스를 사용하여 간단한 연락 양식을 작성 했으므로 대규모 응용 프로그램을 어떻게 구축합니까? 콘솔에서 다양한 옵션을 클릭하면 AWS와 서버리스를 배우는 좋은 방법이지만 많은 움직이는 부분으로 큰 것을 만들려고 할 때 옵션이 아닙니다.


다행히 서버리스 프레임 워크 또는 AWS Chalice와 같이 AWS에서 서버리스 앱을 빌드하고 배포하는 데 도움이 되는 다양한 도구가 있습니다. 무료 AWS 서비스 인 CloudFormation은 JSON 또는 YAML로 작성된 템플릿을 통해 배포 프로세스를 자동화하여 다른 옵션보다 사용하기가 어렵지만 앱 구축을 지원할 수 있습니다.



페이지 정보

조회 14회 ]  작성일20-03-21 12:07

웹학교