AWS 시작하기

기본 웹 애플리케이션 구축

API와 데이터베이스로 웹 애플리케이션 배포 및 상호 작용 기능 추가

이 모듈에서는 API Gateway를 사용하여 서버리스 함수를 배포합니다.

소개

이 모듈에서는 Amazon API Gateway를 사용하여 웹 클라이언트(일반적으로 사용자의 웹 브라우저 지칭)에서 Lambda 함수를 호출할 수 있는 RESTful API를 생성합니다. API Gateway는 모듈 1에서 생성한 HTML 클라이언트와 모듈 2에서 생성한 서버리스 백엔드 사이의 중간 계층 역할을 합니다.

배우게 될 내용

  • API Gateway를 사용하여 새 API 생성
  • API에서 HTTP(Hypertext Transfer Protocol) 메서드 정의
  • API에서 Lambda 함수 트리거
  • 웹 사이트에서 사용할 수 있도록 API에서 CORS 활성화
  • AWS Management Console에서 API Gateway로 생성한 API 테스트

주요 개념

RESTful API REST는 "Representational State Transfer"를 의미하며, 웹 서비스를 생성하기 위한 아키텍처 패턴입니다. API는 "애플리케이션 프로그램 인터페이스"를 의미한다. 따라서 RESTful API는 아키텍처 패턴을 구현합니다.

HTTP 요청 메서드 HTTP 메서드는 클라이언트와 서버 간의 통신을 지원하도록 설계되었습니다. HTTP 프로토콜에 의해 정의되는 GET 또는 PUT과 같은 메서드는 리소스에 대해 수행할 작업을 나타냅니다.

CORS CORS(Cross Origin Resource Sharing) 메커니즘은 HTTP 헤더를 사용하여 지정된 웹 애플리케이션을 한 오리진(도메인)에서 실행하고 대상 오리진의 서버에서 선택된 리소스에 액세스할 권한을 부여하도록 브라우저에 지시합니다.

엣지 최적화 전 세계의 클라이언트에 보다 효과적으로 서비스를 제공하기 위해 AWS 글로벌 인프라를 사용하는 리소스입니다.

 완료 시간

5분

 사용되는 서비스

구현

  • 새 REST API 생성
    1. API Gateway 콘솔에 로그인합니다.
    2. 주황색 [API 생성] 버튼을 클릭합니다.
    3. REST API 상자를 찾아 상자 안에 있는 주황색 [구축] 버튼을 클릭합니다.
    4. [프로토콜 선택]에서 [REST]를 선택합니다.
    5. [새 API 생성]에서 [새 API]를 선택합니다.
    6. [API 이름] 필드에 HelloWorldAPI를 입력합니다.
    7. [엔드포인트 유형] 드롭다운에서 [엣지 최적화]를 선택합니다. 참고: 엣지 최적화 엔드포인트는 지리적으로 분산된 클라이언트에 가장 적합합니다. 인터넷에서 퍼블릭 서비스에 액세스하는 데 효과적인 옵션입니다. 일반적으로 리전 엔드포인트는 같은 AWS 리전 내에서 주로 액세스하는 API에 사용됩니다.
    8. 파란색 [API 생성] 버튼을 클릭합니다. 다음 스크린샷과 같이 설정해야 합니다.
    Full Stack tutorial API settings
  • 새 리소스 및 메서드 생성
    1. 왼쪽 탐색 창에서 HelloWorld API 아래에 있는 [리소스]를 클릭합니다.
    2. "/" 리소스가 선택된 상태로 [작업] 드롭다운 메뉴에서 [메서드 생성]을 클릭합니다.
    3. 표시되는 새로운 드롭다운에서 POST를 선택한 다음 확인 표시를 클릭합니다.
    4. 통합 유형에서 [Lambda 함수]를 선택합니다.​
    5. [함수] 필드에 HelloWorldFunction을 입력합니다.
    6. 파란색 [저장] 버튼을 클릭합니다.
    7. 생성하는 API에 Lambda 함수를 호출할 권한이 부여된다는 메시지가 표시됩니다. [확인] 버튼을 클릭합니다.
    8. 새로 생성된 POST 메서드가 선택된 상태로 [작업] 드롭다운 메뉴에서 [CORS 활성화]를 선택합니다.
    9. POST 확인란을 선택된 상태로 두고 파란색 [CORS를 활성화하고 기존 CORS 헤더 바꾸기] 버튼을 클릭합니다.
    Full Stack tutorial EnableCORS

    10. 메서드 변경을 확인하라는 메시지가 표시됩니다. 파란색 [예. 기존 값을 바꿉니다.] 버튼을 클릭합니다.

    Full Stack tutorial ConfirmMethodChanges
  • API 배포
    1. [작업] 드롭다운 목록에서 [API 배포]를 선택합니다.
    2. [배포 단계] 드롭다운 목록에서 [새 단계]를 선택합니다.
    3. [단계 이름]에 dev를 입력합니다.
    4. [배포]를 선택합니다.
    5. [URL 호출] 옆에 있는 URL을 복사하고 저장합니다(모듈 5에서 필요).
  • API 검증
    1. 왼쪽 탐색 모음에서 [리소스]를 클릭합니다.
    2. 이제 해당 API의 메서드가 오른쪽의 목록에 표시됩니다. [POST]를 클릭합니다.
    3. 파란색의 작은 번개 모양 아이콘을 클릭합니다.
    4. 다음을 [요청 본문] 필드에 붙여 넣습니다.
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5. 파란색 [테스트] 버튼을 클릭합니다.

    6. 오른쪽에 코드 200이 포함된 응답이 표시됩니다.

    7. 좋습니다. Lambda 함수를 호출하는 API를 작성하여 테스트했습니다.


애플리케이션 아키텍처

모듈 3를 완료했습니다. 이제 아키텍처를 검토할 차례입니다.

full-stack amplify console arch diagram module 3

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

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.

데이터 테이블 생성