AWS 기반 프로젝트

현대적 웹 애플리케이션 구축

웹 애플리케이션 배포, 데이터베이스 연결 및 사용자 행동 분석

모듈 4: 사용자 등록 설정

이 모듈에서는 웹사이트에 사용자 등록을 설정하여 사용자별 정보를 캡처할 수 있도록 합니다.

개요

Mythical Mysfits 웹사이트에 사용자가 좋아하는 동물에 투표하고, 동물을 입양하는 등과 같이 몇 가지 중요한 측면을 추가하려면 먼저 웹사이트에 사용자를 등록해야 합니다. 웹사이트 사용자의 등록과 인증을 지원하기 위해 AWS Cognito에 완전 관리형 사용자 ID 관리 서비스인 사용자 풀을 생성합니다.

그런 다음, 등록된 사용자만 웹사이트에서 신화 속 동물을 좋아하거나 입양할 수 있도록 허용하기 위해 Amazon API Gateway를 NLB 앞에 설치하고 REST API를 배포합니다. Amazon API Gateway도 관리형 서비스이며, SSL 종료, 요청 승인, 사용 제한, API 단계 및 버전 관리 등과 같이 일반적으로 필요한 REST API 기능을 즉시 제공합니다.

AWS CLI를 다시 한번 사용하여 필수적인 리소스를 AWS에 배포합니다.

아키텍처 다이어그램

사용자 등록 설정 아키텍처 다이어그램

구현 지침

  • A: Cognito 사용자 풀 생성

    모든 Mythical Mysfits 방문자를 저장할 Cognito 사용자 풀을 생성하려면 다음의 CLI 명령을 실행하여 MysfitsUserPool이라는 이름으로 사용자 풀을 생성하고, 이 풀에 등록된 모든 사용자가 확인 이메일을 통해 이메일 주소를 자동 인증한 다음 확인된 사용자로 설정하도록 표시합니다.

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    위의 명령에서 응답을 복사합니다. 여기에는 나중 단계에서 사용해야 할 사용자 풀의 고유 ID가 포함되어 있습니다. 예: Id: us-east-1_ab12345YZ)

    B: Cognito 사용자 풀 클라이언트 생성

    그런 다음, 프런트엔드 웹사이트와 Cognito를 통합하기 위해 이 사용자 풀에 대한 새 사용자 풀 클라이언트를 생성해야 합니다. 이렇게 하면 웹사이트가 Cognito에 있는 인증되지 않은 API를 호출하도록 승인할 고유한 클라이언트 식별자가 생성되며, 여기서 웹사이트 사용자가 로그인하고 Mythical Mysfits 사용자 풀에 등록됩니다. 위의 사용자 풀에 대해 AWS CLI를 사용하여 새 클라이언트를 생성하려면 다음의 명령을 실행합니다(--user-pool-id 값을 위에서 복사한 값으로 대체).

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • 이제 기존 Flask 서비스 앞에 새 RESTful API를 생성하고 NLB가 요청을 수신하기 전에 요청 승인을 실행하는 방법을 배워보겠습니다. 모듈 개요에서 설명했던 대로 Amazon API Gateway를 사용합니다.

    API Gateway를 비공개로 NLB와 통합하려면 API Gateway API를 VPC에서 비공개로 호스팅되는 백엔드 웹 서비스와 직접 통합하는 API Gateway VPC 링크를 구성해야 합니다. 참고: 이 워크숍에서는 이전 모듈에서 직접 호출될 수 있도록 인터넷에 연결 가능한 NLB를 생성했습니다. 따라서 이 모듈 이후에 API에서 승인 토큰이 필요하더라도 실제로는 NLB가 API Gateway API 뒤에서 공개된 상태입니다.

    실제 시나리오에서는 API Gateway가 인터넷에 연결된 API 승인을 위한 전략이 되므로 처음부터 내부용으로 NLB를 생성해야 합니다(또는 새로운 내부 로드 밸런서를 생성하여 기존의 로드 밸런서 대체). 그러나 시간 관계상 공개적으로 액세스할 수 있는 기존의 NLB를 사용하겠습니다.

    다음의 CLI 명령을 사용하여 나중에 사용할 REST API에 대한 VPC 링크를 생성합니다(표시된 값은 모듈 2에서 NLB를 생성할 때 저장한 Load Balancer ARN으로 대체해야 함).

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    위의 명령으로 api-gateway-link-output.json이라는 파일이 생성되는데, 생성되는 VPC 링크의 ID가 포함되어 있습니다. 또한, 아래와 유사하게 상태가 PENDING으로 표시됩니다.

    생성이 완료되기까지 약 5~10분이 소요되며, 이 파일에서 ID를 복사하고 다음 단계로 넘어갈 수 있습니다.

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    VPC 링크가 생성되는 동안 Amazon API Gateway를 사용하여 실제 REST API를 생성할 수 있습니다.

    B: Swagger를 사용하여 REST API 생성

    MythicalMysfits REST API는 **Swagger**(JSON을 통해 API를 설명하는 인기 오픈 소스 프레임워크)를 사용하여 정의됩니다. API에 대한 Swagger 정의는 `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`에 위치합니다. 이 파일을 열면 REST API와 그 안에 정의된 모든 리소스, 메서드, 구성이 보입니다.

    이 JSON 파일에는 Cognito 사용자 풀과 Network Load Balancer에 맞게 파라미터를 포함하여 업데이트해야 할 부분이 여러 곳 있습니다.

    API 정의 내의 `securityDefinitions` 객체는 승인 헤더를 사용하여 apiKey 승인 메커니즘을 설정했음을 나타냅니다. AWS가 접두어 `x-amazon-api-gateway-`를 사용하여 Swagger에 사용자 지정 확장을 제공한 것을 알 수 있는데, 이 확장에서 API Gateway 기능을 일반 Swagger 파일에 추가하여 API Gateway 고유의 기능을 활용할 수 있습니다.

    파일에서 CTRL-F를 눌러 `REPLACE_ME`가 위치하고 특정 파라미터를 입력해야 할 여러 위치를 검색합니다. 편집이 완료되면 파일을 저장하고 다음의 AWS CLI 명령을 실행합니다.  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    이 명령이 반환하는 응답을 복사하고 다음 단계를 위한 `ID` 값을 저장합니다.

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C: API 배포

    API는 생성되었지만, 아직 배포되지는 않았습니다. API를 배포하려면 우선 배포를 생성하고 배포가 어느 **단계** 앞에 위치하는지 표시해야 합니다. 단계는 이름이 지정된 배포 참조이고, 이는 API의 스냅샷입니다.

    단계를 사용하여 특정 배포를 관리 및 최적화합니다. 예를 들어 단계를 설정하여 캐싱을 지원하거나, 요청 사용 제한을 지정하거나, 로깅을 구성하거나, 단계 변수를 정의하거나, 테스트를 위한 카나리아 릴리스를 첨부할 수 있습니다. 여기서는 단계를 `prod`라고 부르겠습니다. prod 단계에 대한 배포를 생성하려면 다음의 CLI 명령을 실행합니다.

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    그러면 사용자 승인이 가능한 REST API가 배포되고 인터넷에서 사용할 수 있게 됩니다. 하지만 어디에서 사용할 수 있을까요?! API가 제공되는 위치:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    위의 내용을 복사해서 적절한 값으로 대체하고 URI 끝에 `/mysfits`를 추가합니다. 브라우저 주소표시줄에 입력하면 다시 Mysfits JSON 응답을 볼 수 있습니다. 그러나 Flask 서비스 백엔드가 아직 구현하지 않은 신화 속 동물 입양이나 좋아하기 등의 기능이 여러 가지 추가되어 있습니다.

    다음에는 이 문제를 해결해보겠습니다.

    이런 서비스 업데이트가 CI/CD 파이프라인을 통해 자동 푸시되는 동안 다음 단계로 넘어갑니다.

  • A: Flask 서비스 백엔드 업데이트

    신화 속 동물 프로필을 확인하고, 신화 속 동물에 좋아요를 표시하고, 신화 속 동물을 입양하는 새로운 기능을 넣기 위해 백엔드 Flask 웹 서비스의 Python 코드를 업데이트했습니다.

    이 파일로 기존 코드베이스를 덮어쓰고 리포지토리로 푸시하겠습니다.

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    이런 서비스 업데이트가 CI/CD 파이프라인을 통해 자동 푸시되는 동안 다음 단계로 넘어갑니다.

    B: S3에서 Mythical Mysfits 웹사이트 업데이트

    잠시 후 Amazon S3로 표시할 Mythical Mysfits index.html 파일의 새로운 버전을 엽니다. 파일 위치는 ~/environment/aws-modern-application-workshop/module-4/app/web/index.html입니다. 새로운 index.html 파일에 사용자 등록과 로그인 경험을 추가하는 데 사용할 추가적인 HTML 및 JavaScript 코드가 보입니다.

    이 코드는 AWS Cognito JavaScript SDK와 상호작용하면서 필요한 모든 API 호출에 대한 등록, 승인 및 인증을 관리하는 데 도움을 줍니다.

    이 파일에서 홑따옴표 안의 REPLACE_ME 문자열을 위에서 복사한 OutputValues로 대체하고 파일을 저장합니다.

    before-replace2

    또한, 사용자 등록 프로세스의 경우 이 값을 삽입할 추가적인 HTML 파일이 2개(register.html과confirm.html) 있습니다. 복사한 값을 이 파일의 REPLACE_ME 문자열에도 입력합니다.

    이제 이 HTML 파일과 Cognito JavaScript SDK를 Mythical Mysfits 웹사이트 콘텐츠를 호스팅하는 S3 버킷에 복사하고 새 기능을 온라인에 공개합니다.

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    브라우저에서 Mythical Mysfits 웹사이트를 새로 고침하고 새 기능이 작동하는지 확인하십시오!

    이것으로 모듈 4를 마칩니다.

마지막으로 자동 동작을 캡처