구현

• 새 REST API 생성
  1. Amazon API Gateway 콘솔의 왼쪽 탐색 창에서 API를 선택합니다. 
  2. REST API에서 빌드를 선택합니다.
  3. 프로토콜 선택 섹션에서 REST를 선택합니다. 
  4. 새 API 생성 섹션에서 새 API를 선택합니다.
  5. 설정 섹션에서 API 이름으로 WildRydes를 입력하고 엔드포인트 유형 드롭다운에서 엣지 최적화를 선택합니다.
     참고: 인터넷에서 액세스하는 퍼블릭 서비스에는 엣지 최적화 엔드포인트 유형을 사용합니다. 일반적으로 리전 엔드포인트는 동일한 AWS 리전 내에서 주로 액세스하는 API에 사용됩니다.
  6. API 생성을 선택합니다.
• 권한 부여자 생성

  Amazon Cognito 사용자 풀 권한 부여자를 생성해야 합니다. Amazon API Gateway는 모듈 2에서 생성한 Amazon Cognito 사용자 풀에서 반환되는 JSON 웹 토큰(JWT)을 사용하여 API 호출을 인증합니다. 이 섹션에서는 사용자 풀을 활용할 수 있도록 API에 대한 권한 부여자를 만들 예정입니다.

  Amazon API Gateway 콘솔에서 권한 부여자를 구성하려면 다음 단계를 사용합니다.

  1. 방금 생성한 WildRydes API의 왼쪽 탐색 창에서 권한 부여자를 선택합니다.
  2. 새 권한 부여자 생성을 선택합니다. 
  3. 권한 부여자 이름 필드에 WildRydes를 입력합니다.
  4. Cognito를 유형으로 선택합니다. 
  5. Cognito 사용자 풀 아래 리전 드롭다운에서 자습서의 다른 부분에서 사용한 것과 동일한 리전을 선택합니다. Cognito 사용자 풀 이름 필드에 WildRydes를 입력합니다.
  6. 토큰 원본에 Authorization을 입력합니다. 
  7. 생성을 선택합니다.
  8. 권한 부여자 구성을 확인하려면 테스트를 선택합니다. 
  9. 모듈 2의 구현 검증 섹션에 있는 ride.html 웹페이지에서 복사한 권한 부여 토큰 을 권한 부여(헤더) 필드에 붙여넣고 HTTP 상태 응답 코드가 200인지 확인합니다. 

   

   

• 새 리소스 및 메서드 생성

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

  1. WildRydes API의 왼쪽 탐색 창에서 리소스를 선택합니다.
  2. 작업 드롭다운에서 리소스 생성을 선택합니다.
  3. 리소스 이름으로 ride 를 입력하면 리소스 경로 /ride가 자동으로 생성됩니다.
  4. API Gateway CORS 활성화 확인란을 선택합니다.
  5. 리소스 생성을 선택합니다.
  6. 새롭게 생성된 /ride 리소스가 선택된 상태로 작업 드롭다운에서 메서드 생성을 선택합니다.
  7. 옵션 아래에 나타나는 새 드롭다운에서 POST를 선택한 다음 확인 표시 아이콘을 선택합니다.
  8. 통합 유형에서 Lambda 함수를 선택합니다.​
  9. Lambda 프록시 통합 사용 확인란을 선택합니다.
  10. 자습서 전체에서 사용한 Lambda 리전과 동일한 리전을 선택합니다.
  11. Lambda 함수에 RequestUnicorn을 입력합니다.
  12. 저장을 선택합니다.
      참고: 함수가 존재하지 않는다는 오류가 발생하면 선택한 리전이 이전 모듈에서 사용한 것과 일치하는지 확인합니다.
  13. 함수를 간접적으로 호출할 수 있는 Amazon API Gateway 권한을 부여하라는 메시지가 나타나면 확인을 선택합니다.
  14. 메서드 요청 카드를 선택합니다.
  15. 권한 부여 옆의 연필 아이콘을 선택합니다.
  16. 드롭다운 목록에서 WildRydes Cognito 사용자 풀을 선택하고 확인 표시 아이콘을 선택합니다.
• API 배포

  이 섹션에서는 Amazon API Gateway 콘솔에서 API를 배포합니다. 

  1. 작업 드롭다운 목록에서 API 배포를 선택합니다.
  2. 배포 단계 드롭다운 목록에서 새 단계를 선택합니다.
  3. 단계 이름에 prod를 입력합니다.
  4. 배포를 선택합니다.
  5. URL 호출을 복사합니다. 다음 섹션에서 이 정보를 사용합니다.
     
• 웹 사이트 Config 업데이트

  이 단계에서는 방금 생성한 단계의 호출 URL을 포함하도록 웹 사이트 배포에서 /js/config.js 파일을 업데이트합니다. Amazon API Gateway 콘솔에 있는 단계 편집기 페이지의 상단에서 호출 URL을 직접 복사하여 사이트 /js/config.js 파일의 키에 붙여 넣어야 합니다. 구성 파일에는 Amazon Cognito userPoolID, userPoolClientID 및 리전에 대해 이전 모듈에서 수행한 업데이트가 계속 포함됩니다.

  1. 로컬 시스템에서 js 폴더로 이동한 다음 원하는 텍스트 편집기에서 config.js 파일을 엽니다.
  2. 이전 섹션의 Amazon API Gateway 콘솔에서 복사한 호출 URL을 config.js 파일의 invokeUrl 값에 붙여넣습니다. 
  3. 파일을 저장합니다.

  완성된 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, 
  
      } 
  
  };

  Code snippet copied

  복사

      3. 업데이트된 config.js 파일을 Git 리포지토리에 추가, 커밋, 푸시하여 Amplify 콘솔에 자동으로 배포되도록 합니다.

  $ git add .
  $ git commit -m "new_configuration"
  $ git push
  

  Code snippet copied

  복사
• 구현 검증

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

  1. ride.html 파일의 ArcGIS JS 버전을 4.3에서 4.6으로 업데이트합니다(새 버전은 이 자습서에서 사용할 수 없음).
     

  <script src="https://js.arcgis.com/4.6/"></script>
   <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  Code snippet copied

  복사

  전체 ride.html 파일의 예는 다음과 같습니다. 참고로 파일의 일부 값은 다를 수 있습니다.

  <div id="noApiMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">Successfully Authenticated!</h3>
              </div>
              <div class="panel-body">
                  <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                  <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                  <textarea class="authToken"></textarea>
              </div>
          </div>
      </div>
  
      <div id="noCognitoMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">No Cognito User Pool Configured</h3>
              </div>
              <div class="panel-body">
                  <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
              </div>
          </div>
      </div>
  
      <div id="main">
          <div id="map">
          </div>
      </div>
  
      <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                  </div>
                  <div class="modal-body">
                      <textarea class="authToken"></textarea>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>
  
  
      <script src="js/vendor/jquery-3.1.0.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/vendor/aws-cognito-sdk.min.js"></script>
      <script src="js/vendor/amazon-cognito-identity.min.js"></script>
      <script src="https://js.arcgis.com/4.6/"></script>
      <script src="js/config.js"></script>
      <script src="js/cognito-auth.js"></script>
      <script src="js/esri-map.js"></script>
      <script src="js/ride.js"></script>
  </body>
  
  </html>

  Code snippet copied

  복사

      2. 수정된 파일을 저장합니다. 수정한 파일을 추가, 커밋 및 Git 리포지토리에 git 푸시하여 AWS Amplify 콘솔에 자동으로 배포합니다.

      3. 웹 사이트 도메인 아래 있는 /ride.html로 이동합니다.

      4. ArcGIS 로그인 페이지로 리디렉션되는 경우 이 자습서의 사전 요구 사항으로 이전에 소개 섹션에서 생성한 사용자 자격 증명으로 로그인하세요.

      5. 지도가 로드된 후 지도의 어느 위치든 클릭하여 픽업 위치를 설정합니다.

      6. 유니콘 요청을 선택합니다 오른쪽 사이드바에 유니콘이 도착한다는 알림이 표시되고 유니콘 아이콘이 픽업 위치로 이동하는 것이 보입니다.