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

Serverless_Web_App_LP_assets-05

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

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

이 모듈에서는 API의 클라우드 구성 요소를 구축하는 데 필요한 단계를 중점적으로 설명하지만, 이 API를 호출하는 브라우저 코드가 어떻게 작동하는지를 알아보려면 웹 사이트의 ride.js 파일을 조사하면 됩니다. 이 경우 애플리케이션은 jQuery의 ajax() 메서드를 사용하여 원격 요청을 합니다.

모듈 소요 시간: 15분

사용된 서비스: Amazon API Gateway 및 AWS Lambda


아래의 단계별 지침에 따라 REST API를 생성합니다. 섹션을 확장하려면 각 단계 번호를 클릭하십시오.

  • 1단계. 새 REST API 생성


    1. AWS Management Console에서 Services(서비스)를 클릭하고 Application Services(애플리케이션 서비스)에서 API Gateway를 선택합니다.

    2. Create API(API 생성)를 선택합니다.

    3. New API(새 API)를 선택하고 WildRydes 이름을 API Name(API 이름)으로 입력합니다.

    4. Create API(API 생성)를 선택합니다.

  • 2단계. Cognito 사용자 풀 권한 부여자 생성

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

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


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

    2. Create(생성) 드롭다운 목록에서 Cognito User Pool Authorizer(Cognito 사용자 풀 권한 부여자)를 선택합니다.

    3. 모듈 2에서 Cognito 사용자 풀을 생성한 리전을 선택합니다.

    4. 드롭다운 목록에서 WildRydes Cognito 사용자 풀을 선택합니다.

    5. 권한 부여자 이름으로 WildRydes 를 입력합니다.

    6. Identity token source(토큰 소스 식별)Authorization(권한 부여)로 설정되어 있는지 확인합니다.

    7. Create(생성)를 선택합니다.

    권한 부여자 구성 확인

    1. 새 브라우저 탭을 열고 웹 사이트의 도메인에서 /ride.html 페이지에 접속합니다.

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

    3. auth 토큰을 /ride.html페이지의 알림에서 복사해 API Gateway 콘솔 탭의 Identity token(토큰 식별) 필드에 붙여 넣습니다.

    4. Test(테스트)를 선택하고 사용자에 대한 클레임이 표시되는지 확인합니다.

  • 3단계. 새 리소스 및 메서드 생성

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


    1. 왼쪽 탐색 창의 WildRydes API에서 Resources(리소스)를 클릭합니다.

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

    3. 다음으로, rideResource Name(리소스 이름)으로 입력합니다.

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

    5. Create Resource(리소스 생성)를 클릭합니다.

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

    7. 표시되는 새 드롭다운에서 POST 를 선택한 후 체크 표시를 클릭합니다.

    8. 통합 유형으로 Lambda Function(Lambda 함수)을 선택합니다.

    9. Use Lambda Proxy integration(Lambda 프록시 통합 사용) 확인란을 선택합니다.

    10. Lambda Region(Lambda 리전)으로 사용 중인 리전을 선택합니다.

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

    12. Save(저장)를 선택합니다. 함수가 존재하지 않는다는 오류가 나타날 경우 선택한 리전이 이전 모듈에서 사용한 리전과 일치하는지 확인하십시오.

    13. 함수를 실행할 Amazon API Gateway 권한을 부여하라는 메시지가 표시되면 OK(확인)를 선택합니다.

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

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

    16. 드롭다운 목록에서 WildRydes Cognito 사용자 풀 권한 부여자를 선택하고 체크 표시 아이콘을 클릭합니다.

  • 4단계. CORS 활성화

    최신 웹 브라우저에서는 특정 도메인에서 호스팅되는 페이지의 스크립트에서 다른 도메인에서 호스팅되는 API로의 HTTP 요청을 허용하지 않습니다. 단, API가 그러한 요청을 명시적으로 허용하는 오리진 간 리소스 공유(CORS) 응답 헤더를 제공하는 경우에는 예외입니다. Amazon API Gateway 콘솔에서 리소스를 선택할 때 나타나는 작업 메뉴에서 적절한 CORS 헤더를 전송하도록 필요한 구성을 추가할 수 있습니다. /requestunicorn 리소스에 대해 CORS for POST 및 OPTIONS를 활성화해야 합니다. 간소화하기 위해 Access-Control-Allow-Origin 헤더 값을 '*'로 설정할 수 있지만, 프로덕션 애플리케이션에서는 사이트 간 요청 위조(CSRF) 공격을 최소화하기 위해 권한 있는 도메인을 항상 명시적으로 화이트리스트에 나열해야 합니다.

    일반적인 CORS 구성에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS를 참조하십시오.


    1. Amazon API Gateway 콘솔의 가운데 패널에서 /ride 리소스를 선택합니다.

    2. Actions(작업) 드롭다운 목록에서 Enable CORS(CORS 활성화)를 선택합니다.

    3. 기본 설정을 사용하고 Enable CORS and replace existing CORS headers(CORS 활성화 및 기존 CORS 헤더 바꾸기)를 선택합니다.

    4. Yes, replace existing values(예, 기존 값을 바꿉니다)를 선택합니다.

    5. 모든 단계의 옆에 체크 표시가 나타날 때까지 기다립니다.

  • 5단계. API 배포

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


    1. Actions(작업) 드롭다운 목록에서 Deploy API(API 배포)를 선택합니다.

    2. Deployment stage(배포 단계) 드롭다운 목록에서 [New Stage(새 단계)]를 선택합니다.

    3. 다음으로, prodStage Name(단계 이름)으로 입력합니다.

    4. Deploy(배포)를 선택합니다.

    5. Invoke URL(URL 호출)을 메모합니다. 다음 섹션에서 사용하게 됩니다.

  • 6단계. 웹 사이트 구성 업데이트

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


    모듈 2를 수동으로 완료한 경우 로컬로 저장한 config.js 파일을 편집할 수 있습니다. AWS CloudFormation 템플릿을 사용한 경우 먼저 S3 버킷에서 config.js 파일을 다운로드해야 합니다. 이 파일을 다운로드하려면 웹 사이트의 기본 URL에서 /js/config.js에 접속하고 File(파일)을 선택한 후 브라우저에서 Save Page As(다른 이름으로 페이지 저장)를 선택합니다.

    1. 텍스트 편집기에서 config.js 파일을 엽니다.

    2. config.js 파일의 api 키에서 invokeUrl 설정을 업데이트합니다. 이전 섹션에서 생성한 배포 단계에 대해 이 값을 Invoke URL(URL 호출)로 설정합니다.

      완전한 config.js 파일의 예가 아래에 나와 있습니다. 파일의 실제 값은 다를 수 있습니다.

    window._config = {

        cognito: {

            userPoolId: 'us-west-2_uXboG5pAb', // 예: us-east-2_uXboG5pAb         

            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // 예: 25ddkmj4v6hfsfvruhpfi7n4hv

            region: 'us-west-2' // 예: us-east-2

        },

        api: {

            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // 예: https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod,

        }

    };

    1. 변경 사항을 로컬로 저장합니다.

    2. AWS Management Console에서 Services(서비스)를 선택한 후 Storage(스토리지)에서 S3을 선택합니다.

    3. 웹 사이트 버킷으로 이동한 후 js 키 접두사를 탐색합니다.

    4. Upload(업로드)를 선택합니다.

    5. Add files(파일 추가)를 선택하고 config.js 파일의 로컬 사본을 선택한 후 Next(다음)를 클릭합니다.

    6. Next(다음)를 선택하되, Set permissions(권한 설정)Set properties(속성 설정) 섹션에서 기본 설정을 변경하지 않습니다.

    7. Upload(업로드)Review(검토) 섹션에서 선택합니다.

  • 7단계. 구현 확인

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


    1. 웹 사이트 도메인의 /ride.html 페이지에 접속합니다.

    2. 로그인 페이지로 리디렉션될 경우 이전 모듈에서 생성한 사용자로 로그인합니다.

    3. 지도가 로드된 후 지도의 아무 곳이나 클릭하여 탑승 위치를 설정합니다.

    4. Request Unicorn(유니콘 요청)을 선택합니다. 올바른 사이드바에 유니콘이 오는 중임을 나타내는 알림이 표시되고, 탑승 위치로 날아오는 유니콘 아이콘이 표시되어야 합니다.