AWS 시작하기

서버리스 웹 애플리케이션 구축

AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, Amazon Cognito 사용

서버리스 웹 애플리케이션 구축

모듈 4 - RESTful API 배포

Amazon API Gateway를 사용하여 이전 모듈에서 구축한 Lambda 함수를 RESTful API로 공개합니다.

개요

이 모듈에서는 Amazon API Gateway를 사용하여 이전 모듈에서 구축한 Lambda 함수를 RESTful API로 공개합니다. 이 API는 퍼블릭 인터넷에서 액세스할 수 있습니다. 이 API는 이전 모듈에서 생성한 Amazon Cognito 사용자 풀을 사용하여 보호됩니다. 이 구성을 사용하고 공개된 API에 AJAX 호출을 수행하는 클라이언트 측 JavaScript를 추가하여 정적으로 호스팅된 웹 사이트를 동적 웹 애플리케이션으로 전환합니다.

아키텍처 개요

Serverless_Web_App_LP_assets-03

위의 다이어그램은 이 모듈에서 구축할 API Gateway 구성 요소가 이전에 구축한 기존 구성 요소와 통합되는 방식을 보여 줍니다. 회색으로 표시된 항목은 이전 단계에서 이미 구축한 항목입니다.

첫 번째 모듈에서 배포한 정적 웹 사이트에는 이 모듈에서 구축할 API와 상호 작용하도록 구성된 페이지가 이미 있습니다. /ride.html의 페이지에는 유니콘 탑승을 요청하는 간단한 지도 기반 인터페이스가 있습니다. /signin.html 페이지를 사용하여 인증한 후 사용자는 지도의 한 지점을 클릭하여 픽업 위치를 선택한 다음 오른쪽 상단 모서리에 있는 "Request Unicorn(유니콘 요청)" 버튼을 선택하여 탑승을 요청할 수 있습니다.

이 모듈에서는 API의 클라우드 구성 요소를 구축하는 데 필요한 단계에 초점을 집중하지만, 이 API를 호출하는 브라우저 코드의 작동 방식에 관심이 있는 경우 웹 사이트의 ride.js 파일을 살펴볼 수 있습니다. 이 경우 애플리케이션은 jQuery의 ajax() 메서드를 사용하여 원격 요청을 수행합니다.

 소요 시간

15분

 사용 서비스

구현

  • 새 REST API 생성

    a. AWS 관리 콘솔에서 서비스를 클릭한 다음, 애플리케이션 서비스 아래에서 API Gateway를 선택합니다.
    b. API 생성을 선택합니다.
    c. 새 API(New API)를 선택하고 API 이름(API Name)WildRydes를 입력합니다.
    d. 엔드포인트 유형(Endpoint Type) 드롭다운에서 최적화된 엣지(Edge optimized)를 선택된 상태로 둡니다. 참고: 인터넷에서 퍼블릭 서비스에 액세스하려면 최적화된 엣지가 가장 좋습니다. 일반적으로 리전 엔드포인트는 같은 AWS 리전 내에서 주로 액세스하는 API에 사용됩니다.
    e. API 생성을 선택합니다.

  • Cognito 사용자 풀 권한 부여자 생성

    Amazon API Gateway는 Cognito 사용자 풀에서 반환된 JWT 토큰을 사용하여 API 호출을 인증합니다. 이 단계에서는 모듈 2에서 생성한 사용자 풀을 사용하도록 API에 대한 권한 부여자를 구성합니다.

    Amazon API Gateway 콘솔에서 API에 대한 새 Cognito 사용자 풀 권한 부여자를 생성합니다. 이전 모듈에서 생성한 사용자 풀의 세부 정보를 사용하여 새 권한 부여자를 구성합니다. 현재 웹 사이트의 /signin.html 페이지를 통해 로그인한 후 제공된 Auth 토큰을 복사하고 붙여 넣어 콘솔에서 구성을 테스트할 수 있습니다.

    a. 새로 생성한 API에서 Authorizers(권한 부여자)를 선택합니다.

    b. 새 권한 부여자 생성(Create New Authorizer)을 선택합니다.

    c. 권한 부여자 이름에 WildRydes를 입력합니다.

    d. 유형에 Cognito를 선택합니다.

    e. Cognito User Pool(Cognito 사용자 풀) 아래에 있는 Region(리전) 드롭다운 메뉴에서 모듈 2에서 Cognito 사용자 풀을 생성한 리전을 선택합니다(기본적으로 현재 리전이 선택되어 있음).

    f. Cognito 사용자 풀(Cognito User Pool) 입력에 WildRydes(또는 사용자 풀에 지정한 이름)를 입력합니다.

    g. 토큰 원본(Token Source)Authorization을 입력합니다.

    h. 생성(Create)을 선택합니다.


    권한 부여자 구성 확인

    j. 새 브라우저 탭을 열고 웹 사이트 도메인에서 /ride.html로 이동합니다.

    k. 로그인 페이지로 리디렉션될 경우 지난 모듈에서 생성한 사용자로 로그인합니다. 그러면 다시 /ride.html로 리디렉션됩니다.

    l. /ride.html의 알림에서 Auth 토큰을 복사합니다.

    m. 방금 권한 부여자를 생성했던 이전 탭으로 돌아갑니다.

    n. 권한 부여자의 카드 하단에 있는 테스트(Test)를 클릭합니다.

    o. Auth 토큰을 팝업 대화 상자에 있는 권한 부여 토큰(Authorization Token) 필드에 붙여 넣습니다.

    p. 테스트(Test) 버튼을 클릭하고 응답 코드가 200인지, 표시된 사용자에 대한 클레임이 보이는지 확인합니다.

  • 새 리소스 및 방법 생성

    API 내부에 /ride라는 새 리소스를 생성합니다. 그런 다음 해당 리소스에 대한 POST 메서드를 생성하고 이 모듈을 첫 번째 단계에서 생성한 RequestUnicorn 함수로 지원되는 Lambda 프록시 통합을 사용하도록 해당 메서드를 구성합니다.

    a. 왼쪽 탐색 창에서 WildRydes API 아래 있는 리소스(Resources)를 클릭합니다.

    b. 작업(Actions) 드롭다운에서 리소스 생성(Create Resource)을 선택합니다.

    c. ride리소스 이름(Resource Name)으로 입력합니다.

    d. 리소스 경로(Resource Path)ride로 설정되어 있는지 확인합니다.

    e. 리소스에 대해 API Gateway CORS 활성화(Enable API Gateway CORS)를 선택합니다.

    f. 리소스 생성(Create Resource)을 클릭합니다.

    g. 새롭게 생성된 /ride 리소스가 선택된 상태로 작업(Action) 드롭다운에서 메서드 생성(Create Method)를 선택합니다.

    h. 표시되는 새로운 드롭다운에서 POST를 선택한 다음, 확인 표시를 클릭합니다.

    i. 통합 유형에서 Lambda 함수를 선택합니다.​

    j. Lambda 프록시 통합 사용(Use Lambda Proxy integration) 상자를 선택합니다.

    k. Lambda 리전(Lambda Region)에 사용 중인 리전을 선택합니다.

    l. 이전 모듈에서 생성한 함수 이름인 RequestUnicornLambda 함수(Lambda Function)에 입력합니다.

    m. 저장(Save)을 선택합니다. 함수가 존재하지 않는다는 오류가 발생하면 선택한 리전이 이전 모듈에서 사용한 것과 일치하는지 확인합니다.

    n. 함수를 호출할 수 있는 Amazon API Gateway 권한을 부여하라는 메시지가 나타나면 확인(OK)을 선택합니다.

    o. 메서드 요청(Method Request) 카드를 선택합니다.

    권한 부여(Authorization) 옆의 연필 아이콘을 선택합니다.

    q. 드롭다운 목록에서 WildRydes Cognito 사용자 풀을 선택하고 확인 표시 아이콘을 클릭합니다.

  • API 배포

    Amazon API Gateway 콘솔에서 Actions(작업), Deploy API(API 배포)를 선택합니다. 새 단계를 생성하라는 메시지가 나타납니다. 단계 이름에 prod를 사용할 수 있습니다.

    a. 작업 드롭다운 목록에서 API 배포를 선택합니다.
    b. 배포 단계 드롭다운 목록에서 새 단계를 선택합니다.
    c. 단계 이름(Stage Name)prod를 입력합니다.
    d. 배포를 선택합니다.
    e. 호출 URL(Invoke URL)을 기록해 둡니다. 다음 단원에서 이 정보를 사용합니다.

  • 웹 사이트 Config 업데이트

    방금 생성한 단계의 호출 URL을 포함하도록 웹 사이트 배포에서 /js/config.js 파일을 업데이트합니다. Amazon API Gateway 콘솔에 있는 단계 편집기 페이지의 상단에서 호출 URL을 직접 복사하여 사이트 /js/config.js 파일의 _config.api.invokeUrl 키에 붙여 넣어야 합니다. 구성 파일을 업데이트할 때 이전 모듈에서 Cognito 사용자 풀에 수행한 업데이트가 여전히 파일에 포함되어 있는지 확인합니다.

    a. 텍스트 편집기에서 config.js 파일을 엽니다.
    b. config.js 파일에서 api 키 아래에 있는 invokeUrl 설정을 업데이트합니다. 값을 이전 단원에서 생성한 배포 단계에 대한 Invoke URL(호출 URL)로 설정합니다.

    전체 config.js 파일의 예는 다음과 같습니다. 파일의 실제 값은 다릅니다.

    window._config = {
    
        cognito: {
    
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
    
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
    
            region: 'us-west-2' // e.g. us-east-2 
    
        }, 
    
        api: { 
    
            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
    
        } 
    
    };

    c. 수정한 파일을 저장하고 Git repository로 보내면 Amplify Console에 자동으로 배포됩니다.

    $ git push
    
  • 구현 검증

    참고: S3 버킷에서 config.js 파일을 업데이트한 후 업데이트된 콘텐츠가 브라우저에 표시되는 시간이 지연될 수 있습니다. 또한 다음 단계를 실행하기 전에 브라우저 캐시를 지워야 합니다.

    a. 웹 사이트 도메인 아래 있는 /ride.html로 이동합니다.
    b. 로그인 페이지로 리디렉션되는 경우 이전 모듈에서 생성한 사용자로 로그인합니다.
    c. 지도가 로드된 후 지도의 어느 위치든 클릭하여 픽업 위치를 설정합니다
    d. 유니콘 요청(Request Unicorn)을 선택합니다 오른쪽 사이드바에 유니콘이 오는 중이라는 알림이 표시된 다음 유니콘 아이콘이 픽업 위치로 날아가는 것이 보입니다.

이 모듈이 유용했습니까?

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

리소스 종료