[AWS] AJAX와 서버리스를 활용한 정적 웹 호스팅 동적으로 전환하기(API Gateway, Lambda, S3)

안녕하세요

 

이번 시간에는 AJAX를 활용한 서버리스 정적 웹 호스팅을 동적으로 전환하는 실습을 진행하겠습니다.

(API Gateway, Lambda, S3, AWS ToolKit 사용)

 

정적 웹 호스팅의 한계를 넘어서 동적인 어플리케이션으로 전환하는 방법을 소개하려고 합니다. 기존의 정적 웹 호스팅은 단순한 HTML, CSS, JavaScript 파일을 제공하여 정적인 콘텐츠만 제공할 수 있었습니다. 하지만 이제는 API Gateway, Lambda, S3를 조합하여 동적 기능을 가진 웹 어플리케이션을 구축하는 방법을 알아보겠습니다.

 

1. 정적 웹 호스팅이란?

S3를 이용한 정적 웹 호스팅은 Amazon Simple Storage Service (S3)를 활용하여 웹 사이트의 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 저장하고 호스팅하는 방법입니다. 정적 웹 호스팅은 동적인 서버 측 기능을 필요로 하지 않는 웹 사이트를 배포하는 데 유용합니다. 일반적으로 정보를 표시하고 사용자 상호 작용이 적은 웹 사이트, 랜딩 페이지, 블로그, 문서 등을 정적 웹 호스팅으로 구현하는 것이 적합합니다.

 

2. 정적 웹 호스팅 장점

1. 간편한 설정 및 관리

S3를 사용한 정적 웹 호스팅은 설정이 간단하고 관리하기 쉽습니다. S3 버킷에 파일을 업로드하고 정적 웹 사이트 호스팅 설정을 활성화하는 것만으로 웹 사이트를 배포할 수 있습니다.

 

2. 확장성

S3는 Amazon 웹 서비스의 일부이므로 높은 확장성을 제공합니다. 웹 사이트의 트래픽이 증가해도 S3는 자동으로 처리하고 확장하여 대용량의 사용자 요청에도 대응할 수 있습니다.

 

3. 고성능

Amazon S3는 전 세계 각 지역에 분산되어 있으므로, 웹 사이트 콘텐츠가 가까운 지역에 저장되어 사용자에게 빠른 로딩 속도를 제공합니다.

 

4. 비용 효율적

S3는 데이터 스토리지 비용이 저렴하며, 사용한 용량과 데이터 전송 비용만 지불하면 됩니다. 정적 웹 사이트 호스팅은 트래픽이 많지 않은 경우에도 비용 효율적입니다.

 

5. 보안

S3는 기본적으로 높은 보안 수준을 제공합니다. 필요에 따라 공개 액세스를 제한하거나 엑세스 제어를 설정할 수 있습니다.

 

3. 정적 웹 호스팅의 필요성

1. 간단한 웹 사이트

동적 기능이 없는 간단한 웹 사이트인 경우 정적 웹 호스팅이 적합합니다. 예를 들어, 단순 정보 제공, 랜딩 페이지, 포트폴리오 등은 정적 웹 호스팅으로 구현할 수 있습니다.

 

2. 웹 사이트의 빠른 배포

정적 웹 호스팅은 설정이 간단하고 빠르게 웹 사이트를 배포할 수 있으므로, 프로토타입 또는 임시 웹 페이지를 빠르게 구축하고 배포할 때 유용합니다.

 

3. 서버 비용 절감

정적 웹 호스팅을 사용하면 웹 사이트를 호스팅하기 위해 별도의 서버를 유지할 필요가 없어지므로 서버 비용을 절감할 수 있습니다.

 

4. 높은 확장성 요구

S3는 높은 확장성을 제공하므로 트래픽이 증가하는 경우에도 웹 사이트가 정상적으로 서비스될 수 있습니다.

 

요약하면, S3를 이용한 정적 웹 호스팅은 간단하고 비용 효율적인 방법으로 웹 사이트를 배포하고 호스팅하는 것을 가능하게 해주며, 특히 동적 기능이 필요 없는 간단한 웹 사이트에 적합합니다. 여기에 동적인 기능을 넣어주기 위해 AJAX를 사용하려고 합니다.

 

4. 아키텍처 개요

다음과 같이 S3에 HTML, CSS, JavaScript, 및 Static 파일을 AWS S3에 저장합니다. 그 후 API Gateway와 Lambda를 통해 서버리스 백엔드를 구성한 후 REST API 배포합니다. 그 후 노출된 API에 AJAX 호출을 수행하는 클라이언트 쪽 JavaScript를 추가하여 정적으로 호스팅된 웹 사이트를 동적 웹 애플리케이션으로 전환할 수 있습니다. 이 실습에서는 S3 부분과 API Gateway, Lambda 부분을 구성하겠습니다.

 

5. 구축 내용

S3를 생성합니다. 그 후 S3에 HTML, CSS, JavaScript, 및 Static 파일을 AWS S3에 업로드합니다. 

 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<s3-bucket-name>/*"
        }
    ]
}

S3에 퍼블릭 읽기를 허용하는 버킷 정책을 추가합니다.

 

import json

def lambda_handler(event, context):
    try:
        response_data = {
            'message': 'Hello from Lambda!',
            'data': [1, 2, 3, 4, 5]
        }

        response = {
            'statusCode': 200,
            'body': json.dumps(response_data),
        }
        return response
    except Exception as e:
        return {
            'statusCode': 500,
            'body': json.dumps({'error': 'Internal Server Error'}),
        }

요청 처리를 위한 Lambda 함수를 생성한 후 테스트를 위한 샘플 데이터를 추가합니다.

 

API Gateway를 생성합니다. API 유형은 [REST API]로 선택합니다.

 

[작업] - [리소스 생성] 버튼을 통해 리소스를 생성합니다.

 

REST API에서 리소스 및 메서드를 생성합니다. CORS를 활성화 합니다.

 

리소스가 생성되었다면 POST 메서드를 생성합니다.

 

POST 메서드 설정에서 앞서 생성한 Lambda 함수와 매핑한 후 저장합니다.

 

API Gateway 권한을 부여하라고 나오는데 확인을 눌러줍니다.

 

POST 메서드를 선택한 후 [메서드 요청]을 눌러줍니다.

 

메서드 요청 - 요청 본문에서 모델을 추가합니다.

 

정의된 템플릿이 없기 때문에 다음과 같이 [매핑 템플릿] - [정의된 템플릿이 없는 경우(권장)]을 체크합니다.

 

 

1. API Gateway CORS 란?

API Gateway CORS (Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 JavaScript를 사용하여 다른 도메인의 API를 호출할 때 발생하는 보안 정책을 관리하는 기능입니다.

웹 애플리케이션은 동일 출처 정책(Same-Origin Policy)에 따라 다른 도메인에서 실행되는 리소스에 접근할 수 없습니다. 즉, 웹 애플리케이션이 서로 다른 도메인으로부터 리소스를 요청하려고 할 때, 브라우저는 보안상의 이유로 이 요청을 차단합니다.

API Gateway CORS는 이러한 보안 정책을 우회하는 방법을 제공합니다. API Gateway를 사용하여 RESTful API를 만들고, 해당 API에 CORS를 활성화하면 다른 도메인에서도 해당 API를 호출할 수 있습니다. 이를 허용함으로써 웹 애플리케이션은 API Gateway를 통해 다른 도메인의 리소스를 안전하게 접근할 수 있게 됩니다.

 

다음과 같이 CORS를 활성화 해줍니다.

 

그 후 API 배포를 눌러 줍니다. 현재 스테이지가 없기 때문에 새 스테이지를 생성해줍니다.

 

다음과 같이 배포 스테이지와 스테이지 이름을 설정한 후 [배포]합니다.

 

다음과 같이 호출할 수 있는 URL이 표시되는데 URL 뒤에 리소스를 통해 API를 호출할 수 있습니다.

 

S3에 업로드된 콘텐츠에 대해 손 쉽게 접근하기 위해 VS Code에서 다음과 같이 AWS ToolKit을 설치합니다.

 

AWS Configure를 통해 AWS 자격 증명을 해주면 다음과 같이 S3에 쓰기 권한으로 접근할 수 있습니다.

 

# api-gateway.js
$(document).ready(function() {
    $('#myButton').on('click', function() {
      $.ajax({
        type: 'POST',
        url: '<API-GATEWAY-ENDPOINT>',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify({}),
        dataType: 'json',
        success: function(data) {
          alert(data['body']);
        },
        error: function(request, status, error) {
          alert(error);
        }
      });
    });
  });
  
# index.html
<button id="myButton">클릭하여 Lambda 함수 호출</button>

<script src="./dist/js/api-gateway.js"></script>
  
# lambda
import json

def lambda_handler(event, context):
    try:
        response_data = {
            'message': 'Hello from Lambda!',
            'data': [1, 2, 3, 4, 5]
        }

        response = {
            'statusCode': 200,
            'body': json.dumps(response_data),
        }
        return response
    except Exception as e:
        return {
            'statusCode': 500,
            'body': json.dumps({'error': 'Internal Server Error'}),
        }

배포된 API를 통해 AJAX 통신으로 정적 웹 사이트를 동적 웹 애플리케이션으로 전환합니다.

다음과 같이 테스트 코드를 작성합니다.

 

이렇게 API Gateway Endpoint와 PostMan을 통해 데이터를 확인할 수 있습니다.

 

다음과 같이 POST를 통해서도 데이터를 뽑을 수 있습니다.

 

▶ 참고 문서

모듈 1 - Amazon S3에서 정적 웹 사이트 호스팅

[AWS] AWS Lambda에 대해 알아보고 Python 외부 모듈 적용하기 (tistory.com)

[AWS] API Gateway REST API를 이용해 POST 메서드 실습하기 (tistory.com)

 

▶ 요약

API Gateway, Lambda, S3를 결합하여 동적 기능을 가진 웹 어플리케이션을 구축하는 방법을 자세히 살펴보았습니다. 이러한 아키텍처를 통해 사용자와 상호작용이 가능하며, 서버리스 환경에서 빠르고 확장 가능한 어플리케이션을 개발할 수 있습니다. 

더 나아가 정적 웹 호스팅으로 시작한 프로젝트를 서버리스 아키텍처로 전환하는 것은 AWS SAM을 활용하는 것으로도 충분히 가능합니다. AWS SAM은 간편한 배포, 로컬 테스트, 이벤트 흐름 관리 등을 통해 서버리스 어플리케이션 개발을 용이하게 해주며, AWS의 다양한 서비스와 통합되어 개발 생산성을 높여줍니다. 이제 AWS SAM을 활용하여 동적인 기능과 확장성을 갖춘 서버리스 어플리케이션으로 프로젝트를 더욱 발전시킬 수 있습니다.