> For the complete documentation index, see [llms.txt](https://kim-mark.gitbook.io/modern-application-workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kim-mark.gitbook.io/modern-application-workshop/undefined-1/4-amazon-api-gateway-aws-cognito-api.md).

# 모듈 4 - Amazon API Gateway와 AWS Cognito로 사용자 및 API 기능 추가

![](/files/d28aGYQAJ5XvuGUOHKul)

소요 시간 : 60분

사용된 서비스:

* [Amazon Cognito](http://aws.amazon.com/cognito/)
* [Amazon API Gateway](https://aws.amazon.com/api-gateway/)
* [Amazon Simple Storage Service (S3)](https://aws.amazon.com/s3/)

### 개요

신비한 미스핏츠 웹사이트에 사용자가 선호하는 미스핏츠에 투표하고, 입양하는 것과 같은 더 중요한 측면을 추가하기위해서는 먼저 웹사이트에 사용자 등록을 가능하게 해야합니다. 웹사이트 사용자의 등록 및 인증을 위해 완전히 관리되는 사용자 자격 증명 관리 서비스인 [**AWS Cognito**](http://aws.amazon.com/cognito/)에서 [**User Pool**](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html)을 생성합니다.

등록된 사용자만 미스핏츠들을 좋아하고 입양할 수 있도록 하고 싶으므로, Fargate에서 동작중인 Flask 웹 앱에서 해당하는 경로에 대한 접근을 제한하려고 합니다. 현재 Fargate 서비스가 사용하는 Network Load Balancer (NLB)는 요청 권한 헤더의 유효성 검사를 지원하지 않습니다. 이를 위해 몇 가지 옵션이 있습니다: [Application Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/introduction.html)로 전환하여 Flask 웹 앱이 권한 부여 헤더를 확인하게 하거나, [Amazon API Gateway](https://aws.amazon.com/api-gateway/)를 사용할 수 있습니다.

Amazon API Gateway는 SSL 종료, CORS, 요청 권한 부여, 조정(throttling), API 단계 및 버전 관리 등과 같은 기본적으로 필요한 REST API 기능을 제공합니다. 이러한 이유로 NLB 앞에 API Gateway를 배포하도록 하겠습니다.

API Gateway는 HTTPS 및 CORS 지원 뿐만 아니라, Cognito User Pool과 통합하여 요청의 권한 부여 유효성 검사도 제공합니다. `/adopt`와 `/like` API 엔드포인트에는 인증된 사용자만 접근할 수 있도록 접근을 제한하겠습니다.

그런 다음 API Gateway는 트래픽을 NLB로 전달하여 Fargate에서 실행되는 Flask 웹 앱에서 처리되게끔 합니다.

### 웹사이트 사용자를 위한 User Pool 추가

#### **Cognito User Pool 생성**

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

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

위의 명령에서 응답은 다음 단계에서 사용해야 하는 사용자 풀의 고유 ID를 포함하므로 이  복사합니다. 예: `ID: us-east-1_ab12345YZ`

#### Cognito User Pool 클라이언트 생성

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

```
aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
```

### Amazon API Gateway로 새 REST API 추가

**API Gateway VPC Link 생성**

다음으로 기존 Flask 서비스 앞에 새로운 RESTful API를 작성하여 NLB가 요청을 받기 전에 요청 권한 부여를 수행하는 부분을 진행하겠습니다. 모듈 개요에 설명한 것 처럼, **Amazon API Gateway**로 이 작업을 수행합니다. API Gateway를 NLB와 프라이빗하게 통합하기 위해, **API Gateway VPCLink**를 구성하여 API Gateway가 VPC 내에서 프라이빗하게 호스팅되는 백엔드 웹 서비스와 직접적으로 통합될 수 있도록 합니다.

> **참고:** 워크샵의 목적을 위해, NLB는 이전 모듈에서 직접 호출될 수 있도록 *internet-facing*으로 생성하였습니다. 이로 인해, 이 모듈 이후 API에 승인 토큰이 필요함에도 불구하고, NLB는 여전히 API Gateway API 뒤에 퍼블릭하게 열려있습니다. 실제 시나리오에서는 처음부터 NLB를 *internal*로 생성하거나 내부 로드 밸런서를 생성하여 기존걸 대체하는게 좋습니다. API Gateway는 인터넷 연결 API 권한 부여 전략이기 때문입니다. 시간 관계상, 퍼블릭하게 접근할 수 있도록 생성된 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를 생성할 수 있습니다.

**Swagger를 사용한 REST API 생성**

MythicalMysfits REST API는 JSON을 통해 API를 명시하기 위해 널리 사용되는 오픈 소스 프레임워크인 **Swagger**를 사용하여 정의 됩니다. API의 Swagger 정의는 \~`/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`에 위치하고 있습니다. 이 파일을 열면 REST API와 그 안에 정의된 리소스, 메서드, 설정을 확인할 수 있습니다.

API 정의 내의 `securityDefinitions` 객체는 Authorization 헤더를 사용하여 apiKey 인증 메커니즘을 설정했음을 나타냅니다. AWS가 `x-amazon-api-gateway-` 접두사를 사용하여 Swagger에 사용자 정의 확장을 제공한걸 알 수 있을 것입니다. 이 확장을 통해 API Gateway 고유 기능을 일반적인 Swagger 파일에 추가하여 API Gateway 고유 기능의 이점을 얻을 수 있습니다.

api-wagger.json 파일을 열어 `REPLACE_ME`가 위치한 부분을 수정하고 저장 후 아래 명령어를 실행합니다.  

```
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
}
```

#### API 배포하기

이제  API가 만들어졌지만, 아직 어디에서도 배포되지 않았습니다. 우리의 API를 배포하려면 먼저 배포를 생성하고 배포가 어떤 단계인지 지정해야 합니다. 스테이지를 사용하여 특정 배포를 관리하고 최적화할 수 있습니다. 예를 들어 캐시를 사용하도록 설정하거나, 요청 throttling을 사용자 지정하거나, 로그 구성을 설정하거나, stage variable을 정의하거나, 테스트를 위해 카나리 릴리즈를 추가 할  수 있습니다. 여기서 stage를 `prod`라고 지정합니다. prod stage에 대한 배포를 생성하려면 다음 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
```

위의 주소를 복사하고 적절한 값으로 교체한 뒤 브라우저의 주소창에 입력합니다. Mysfits JSON 응답을 다시 볼 수 있을 것입니다. 그러나 우리가 추가한 미스핏츠를 좋아하고 입양하는 등의 추가 기능의 Flask 백엔드는 아직 구현하지 않았습니다.

다음으로 이 부분들을 처리해보겠습니다.

### 신비한 미스핏츠 웹사이트 업데이트

**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 파이프라인을 통해 자동으로 푸시되는 동안 다음 단계를 계속하겠습니다.

**S3로 신비한 미스핏츠 웹사이트 업데이트**

새 버전의 신비한 미스핏츠 웹사이트는 사용자 등록과 로그인에 사용될 추가적인 HTML과 JavaScript 코드를 포함하고 있습니다. 이 코드는 AWS Cognito JavaScript SDK와 상호작용하여 필요한 모든 API 호출에 대한 등록, 인증 및 권한 부여 관리에 도움을 줍니다.

신비한 미스핏츠의 새 웹사이트 버전은 `~/environment/aws-modern-application-workshop/module-4/app/web/index.html`에 위치해 있습니다. 

해당 파일을 열어 작은 따옴표 안의 **REPLACE\_ME** 문자열을 위에서 복사한 값으로 바꾸고 파일을 저장합니다:

![](/files/4M2jwj2FxcTpIomDaGzD)

> **참고:** Cognito UserPool ID와 Cognito UserPool Client ID는 `us-east-1_ab12345YZ`와 `6p3bs000no6a4ue1idruvd05ad` 같은 이전에 저장한 값입니다. 다음 명령을 통해 API Gateway 엔드포인트와 AWS 리전의 값을 얻을 수 있습니다:

따라서 사용자 등록 프로세스의 경우 이 값을 **추가**할 HTML 파일이 두 개 더 있습니다.(`register.html`과 `confirm.html)` 이 파일의 **REPLACE\_ME** 문자열에도 복사된 값을 삽입합니다.

이제 이 HTML 파일과 Cognito Javascript SDK를 S3 버킷에 복사하여 우리의 Mythical Mysfits 웹 사이트 컨텐츠를 호스팅하여 새로운 기능을 업데이트합니다.

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

브라우저에서 신비한 미스핏츠 웹사이트를 새로고침하여 새로 추가된 기능들이 동작하는지 확인합니다!

이것으로 모듈 4를 마치겠습니다.