기본 웹 애플리케이션 구축
자습서
모듈 3: 서버리스 함수를 웹 앱에 연결
이 모듈에서는 Amazon API Gateway를 사용하여 서버리스 함수를 배포합니다.
개요
이 모듈에서는 Amazon API Gateway를 사용하여 웹 클라이언트(일반적으로 사용자의 웹 브라우저 지칭)에서 Lambda 함수를 직접적으로 호출할 수 있는 RESTful API를 생성합니다. API Gateway는 모듈 1에서 생성한 HTML 클라이언트와 모듈 2에서 생성한 서버리스 백엔드 사이의 중간 계층 역할을 합니다.
학습 목표
이 모듈에서는 다음을 수행합니다.
- API Gateway를 사용하여 새 API 생성
- API에 HTTP 메서드 정의
- API에서 Lambda 함수 트리거
- API에서 크로스 리전 리소스 공유(CORS) 를 활성화하여 다른 오리진(도메인)의 리소스를 사용할 수 있습니다.
- AWS Management Console에서 API Gateway로 생성한 API 테스트
주요 개념
RESTful API - REST는 ‘Representational State Transfer’를 의미하며, 웹 서비스를 생성하기 위한 아키텍처 패턴입니다. API는 ‘Application Programming Interface’의 줄임말입니다. 따라서 RESTful API는 REST 아키텍처 패턴을 구현하는 API입니다.
HTTP 요청 메서드 - HTTP 메서드는 클라이언트와 서버 간의 통신을 지원하도록 설계되었습니다. HTTP 프로토콜에 의해 정의되는 GET 또는 PUT과 같은 메서드는 리소스에 대해 수행할 작업을 나타냅니다.
CORS - CORS 브라우저 보안 기능은 HTTP 헤더를 사용하여 특정 오리진(도메인)에서 실행되는 해당 웹 애플리케이션이 다른 오리진의 서버에서 선택한 리소스에 액세스할 수 있도록 브라우저에 지시합니다.
엣지 최적화 - 지리적으로 다양한 클라이언트에 더 나은 서비스를 제공하기 위해 AWS 글로벌 인프라를 사용하는 리소스입니다.
구현
-
새 REST API 생성
- API Gateway 콘솔에 로그인합니다.
- API 유형 선택 섹션에서 REST API 카드를 찾아 카드에서 빌드 버튼을 선택합니다.
- 프로토콜 선택에서 REST를 선택합니다.
- 새 API 생성에서 새 API를 선택합니다.
- API 이름 필드에 HelloWorldAPI를 입력합니다.
- 엔드포인트 유형 드롭다운에서 엣지 최적화를 선택합니다. (참고: 엣지 최적화 엔드포인트는 지리적으로 분산된 클라이언트에 가장 적합합니다. 인터넷에서 액세스할 수 있는 퍼블릭 서비스에 적합한 옵션입니다. 일반적으로 리전 엔드포인트는 같은 AWS 리전 내에서 주로 액세스하는 API에 사용됩니다.
- 파란색 API 생성 버튼을 선택합니다. 다음 스크린샷과 같이 설정해야 합니다.
-
새 리소스 및 메서드 생성
- 왼쪽 탐색 창의 API: HelloWorldAPI에서 리소스를 선택합니다.
- ‘/’ 리소스가 선택되었는지 확인합니다.
- 작업 드롭다운 메뉴에서 메서드 생성을 선택합니다.
- 표시되는 새로운 드롭다운에서 POST를 선택한 다음, 확인 표시를 선택합니다.
- 통합 유형에서 Lambda 함수를 선택합니다.
- 함수를 만들 때 사용한 Lambda 리전을 선택합니다. (그렇지 않으면 ‘Lambda 함수가 없습니다..’라는 경고 상자가 표시됩니다“).
- Lambda 함수 필드에 HelloWorldFunction을 입력합니다.
- 파란색 저장 버튼을 선택합니다.
- 생성하는 API에 Lambda 함수를 호출할 권한이 부여된다는 메시지가 표시됩니다. 확인 버튼을 선택합니다.
- 새로 생성된 POST 메서드가 선택된 상태로 작업 드롭다운 메뉴에서 CORS 활성화를 선택합니다.
- POST 확인란을 선택된 상태로 두고 파란색 CORS 활성화 및 기존의 CORS 헤더 대체 버튼을 선택합니다.
10. 메서드 변경을 확인하라는 메시지가 표시됩니다. 파란색 예, 기존 값을 대체하겠습니다 버튼을 클릭합니다.
-
API 배포
- 작업 드롭다운 목록에서 API 배포를 선택합니다.
- 배포 단계 드롭다운 목록에서 새 단계를 선택합니다.
- 단계 이름에 dev를 입력합니다.
- 배포를 선택합니다.
- URL 호출 옆에 있는 URL을 복사하고 저장합니다(모듈 5에서 필요).
-
API 검증
- 왼쪽 탐색 창에서 리소스를 선택합니다.
- 이제 해당 API의 메서드가 오른쪽의 목록에 표시됩니다. POST를 선택합니다.
- 파란색의 작은 번개를 클릭합니다.
- 다음을 요청 본문 필드에 붙여 넣습니다.
{ "firstName":"Grace", "lastName":"Hopper" }
5. 파란색 테스트 버튼을 선택합니다.
6. 오른쪽에 코드 200이 포함된 응답이 표시됩니다.
7. 좋습니다. Lambda 함수를 호출하는 API를 작성하여 테스트했습니다.
애플리케이션 아키텍처
모듈 3을 완료했습니다. 이제 아키텍처를 검토할 차례입니다.

API Gateway를 추가하고 기존 Lambda 함수에 연결했습니다. 이제 API 호출을 통해 해당 함수를 트리거할 수 있습니다. 아직 웹 클라이언트에서 이 호출을 생성할 수 없습니다. 모듈 4에서 데이터 테이블을 먼저 추가한 후에 모듈 5에서 모든 구성 요소를 연결하겠습니다.