Amazon S3를 사용해 API Gateway를 프록시로 사용하는 정적 웹 사이트를 호스팅하려면 어떻게 해야 하나요?

해결 방법

Amazon S3를 사용해 정적 웹 사이트를 호스팅할 수 있습니다. 또 HTTP 프록시 통합이나 AWS 서비스 통합을 사용해 API Gateway를 Amazon S3 정적 웹 사이트용 프록시로 구성할 수 있습니다.

HTTP 프록시 통합

Amazon S3 정적 웹 사이트에 공개적으로 액세스할 수 있는 경우 HTTP 통합을 사용해 API Gateway용 S3 정적 웹 사이트 URL을 제공하세요.

아직 구성하지 않았다면 자습서를 따라 Amazon S3에 정적 웹 사이트를 구성하세요.

REST API 생성

1. API Gateway 콘솔을 엽니다.
2. REST API에서 Build(구축)를 선택합니다.
3. API name(API 이름)에 REST API의 이름을 입력합니다.
4. Endpoint Type(엔드포인트 유형) 드롭다운 목록을 선택하고 해당 엔드포인트 유형을 선택한 다음 Create API(API 생성)를 선택합니다.
5. 탐색 창에서 API 이름 아래의 Resources(리소스)를 선택합니다.
6. Actions(작업) 드롭다운 목록을 선택하고 Create Resource(리소스 생성)를 선택합니다.
7. Resource Name(리소스 이름)에 이름을 입력합니다. 예: key.
8. Resource Path(리소스 경로)에 경로 파라미터를 입력합니다. 예: {key}.
9. Create Resource(리소스 생성)를 선택합니다.

루트 리소스에 대한 메서드 생성

1. 리소스 이름 **{key}**를 선택하고 Actions(작업) 드롭다운 목록을 선택한 다음 Create Method(메서드 생성)을 선택합니다.
2. {key} 드롭다운 목록에서 GET을 선택한 다음, 확인 표시 아이콘을 선택합니다.
3. Integration type(통합 유형)에서 HTTP를 선택하고, Use HTTP Proxy integration(HTTP 프록시 통합 사용)을 선택한 다음, HTTP method(HTTP 메서드)는 GET으로 둡니다.
4. Endpoint URL(엔드포인트 URL)에 **http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key}**를 입력하고 Save(저장)를 선택합니다.

REST API 배포

1. Actions(작업) 드롭다운 목록에서 Deploy API(API 배포)를 선택합니다.
2. Deployment stage(배포 단계) 드롭다운 목록에서**[New Stage]**를 선택합니다.
3. Stage name(스테이지 이름)에 이름을 입력합니다. 예: Dev.
4. Deploy(배포)를 선택합니다. Dev Stage Editor(개발 단계 편집기)에서 Invoke URL(호출 URL)을 기록해 둡니다. 나중에 API를 테스트할 때 필요합니다.
5. 다음과 같은 curl 명령을 사용해 Amazon S3 웹 사이트의 API 프록시를 테스트하세요.

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/index.html

AWS 서비스 통합

Amazon S3 정적 웹 사이트 구성

Amazon S3 정적 웹 사이트의 퍼블릭 액세스가 차단된 경우 API 프록시에서만 액세스하도록 웹 사이트를 구성합니다.

1. 아직 구성하지 않았다면 자습서를 따라 Amazon S3에 정적 웹 사이트를 구성하세요.
   참고: 자습서의 3단계를 건너뛰고 Block all public access(모든 퍼블릭 액세스 차단) 기본값 설정을 켜진 상태로 유지합니다.

2. 자습서 4단계에서 버킷 정책을 수정해 다음 예시와 같이 API 프록시가 Amazon S3 버킷에만 액세스할 수 있도록 허용하세요.

   {
     "Version": "2012-10-17",
     "Statement": [{
         "Sid": "APIProxyBucketPolicy",
         "Effect": "Allow",
         "Principal": {
           "Service": "apigateway.amazonaws.com"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::BUCKET_NAME/*",
         "Condition": {
           "ArnLike": {
             "aws:SourceArn": "arn:aws:execute-api:REGION:ACCOUNT:API_ID/*/GET/"
           }
         }
     }]
   }

3. Amazon S3 버킷에 대한 GetObject API의 권한을 가진 AWS Identity and Access Management(IAM) 정책을 생성합니다.

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Effect": "Allow",
       "Action": ["s3:GetObject"],
       "Resource": "*"
     }]
   }

4. IAM 역할을 생성하고 이전 단계에서 생성한 IAM 정책을 이 새 역할에 연결합니다.

5. IAM 역할 ARN을 복사합니다. 이는 이후 단계에서 필요합니다.
   API Gateway에 역할을 부여하려면 IAM 역할에 다음과 같은 신뢰 정책이 포함되어야 합니다.

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Sid": "",
       "Effect": "Allow",
       "Principal": {
           "Service": "apigateway.amazonaws.com"
       },
       "Action": "sts:AssumeRole"
     }]
   }

Amazon S3 서비스용 REST API 프록시 생성

1. API Gateway 콘솔을 엽니다.
2. Create API(API 생성)을 선택합니다.
3. REST API를 선택한 다음 Build(구축)를 선택합니다.
4. API name(API 이름)에 REST API의 이름을 입력합니다.
5. Endpoint Type(엔드포인트 유형)에서 일반적으로 클라이언트 트래픽이 시작되는 위치에 따라 해당하는 엔드포인트 유형을 선택합니다.
   참고: 인터넷에서 액세스하는 퍼블릭 서비스에는 엣지 최적화 엔드포인트를 사용하는 것이 가장 좋습니다. 리전 엔드포인트는 주로 동일한 AWS 리전 내에서 액세스하는 API에 사용됩니다.
6. Create API(API 생성)을 선택합니다.

루트 리소스에 대한 GET 메서드 생성

루트 메서드는 Amazon S3 정적 웹 사이트에 프록시를 요청하기 위해 구성됩니다.

1. 루트 리소스 **"/"**를 선택한 상태에서 Actions(작업) 드롭다운 목록을 선택한 다음 Create Method(메서드 생성)를 선택합니다.
2. 드롭다운 목록에서 GET을 선택한 다음 확인 표시 아이콘을 선택합니다.
3. Integration type(통합 유형)에서 AWS Service(AWS 서비스)를 선택합니다.
4. AWS Region(AWS 리전) 드롭다운 목록을 선택하고 내 리전을 선택합니다.
5. AWS Service(AWS 서비스) 드롭다운 목록을 선택한 다음 **Simple Storage Service(S3)**를 선택합니다.
6. AWS Subdomain(AWS 하위 도메인)의 경우 이 필드를 비워 둡니다.
7. HTTP method(HTTP 메서드)에서 GET을 선택합니다.
8. Action Type(작업 유형)에서 Use path override(경로 재정의 사용)를 선택합니다.
9. Path override(경로 재정의)에서 BUCKET_NAME/index.html과 유사한 Amazon S3 버킷 경로를 입력하세요.
10. Execution role(실행 역할)의 경우 이전에 생성한 IAM 역할 ARN을 붙여 넣습니다.
11. Save(저장)를 선택하세요.

이 설정은 프런트엔드 API 요청 GET **https://your-api-host/stage/**을 S3 백엔드 GET https://your-s3-host/index.html에 통합합니다.

API 리소스 객체 생성

S3 버킷에서 특정 객체에 액세스하려면 프런트엔드 API 요청의 객체 경로를 매핑하는 리소스를 **{object}**라는 이름으로 생성합니다. 예를 들어, GET https://your-api-host/stage/home.html을 S3 백엔드 GET https://your-s3-host/home.html로 보냅니다.

1. Resources(리소스)에서 Actions(작업) 드롭다운 목록을 선택하고 Create Resource(리소스 생성)을 선택합니다.
2. Resource Name(리소스 이름)에 이름을 입력합니다. 예: {object}.
3. Resource Path(리소스 경로)에 경로를 입력합니다. 예: {object}.
4. Create Resource(리소스 생성)를 선택합니다.

리소스에 대한 GET 메서드 구성

1. {object} 리소스를 선택한 상태에서 Actions(작업) 드롭다운 목록을 선택한 다음 Create Method(메서드 생성)을 선택합니다.
2. 드롭다운 목록에서 GET을 선택한 다음 확인 표시 아이콘을 선택합니다.
3. Integration type(통합 유형)에서 AWS Service(AWS 서비스)를 선택합니다.
4. AWS Region(AWS 리전) 드롭다운 목록을 선택하고 내 리전을 선택합니다.
5. AWS Service(AWS 서비스) 드롭다운 목록을 선택한 다음 **Simple Storage Service(S3)**를 선택합니다.
6. AWS Subdomain(AWS 하위 도메인)의 경우 이 필드를 비워 둡니다.
7. HTTP method(HTTP 메서드)에서 GET을 선택합니다.
8. Action Type(작업 유형)에서 Use path override(경로 재정의 사용)를 선택합니다.
9. Path override(경로 재정의)에 **BUCKET_NAME/{object}**와 같은 Amazon S3 버킷 경로를 입력합니다.
10. Execution role(실행 역할)의 경우 이전에 생성한 IAM 역할 ARN을 붙여 넣습니다.
11. Save(저장)를 선택하세요.
12. **Resource name {object}**에서 GET을 선택한 다음 Integration Request(통합 요청)을 선택합니다.
13. URL Path Parameters(URL 경로 파라미터)를 확장하고 Name value object(이름 값 객체) 및 Mapped from value method.request.path.object를 입력한 다음 확인란을 선택하여 저장합니다.

GET 메서드에 대한 응답 헤더 매핑 설정

백엔드 콘텐츠 유형 헤더 파라미터 값을 프런트엔드 대응값에 매핑합니다. 이렇게 하면 브라우저가 해당 콘텐츠 유형과 관련한 응답을 성공적으로 처리할 수 있습니다.

1. GET을 선택하고 **Resources /**에서 Method Response(메서드 응답)을 선택합니다.
2. HTTP Status 200 옆에 있는 화살표를 펼치고 Response Headers for 200에서 Add Header(헤더 추가)를 선택합니다.
3. 헤더 Name(이름)을 Content-Type(콘텐츠 유형)으로 선택하고 확인란을 선택하여 저장합니다.
4. Method Execution(메서드 실행)을 선택합니다.
5. Integration Response(통합 응답)을 선택하고 HTTP status regex 옆의 화살표를 펼치세요.
6. Header Mappings(헤더 매핑)을 확장하고 Content-Type(콘텐츠 유형)에서 매핑 값을 integration.response.header.Content-Type으로 입력합니다.
7. Resource /{object} 아래의 GET 메서드에 1~6단계를 반복합니다.
8. REST API 배포 섹션의 단계를 반복합니다.

API 프록시 테스트

브라우저 또는 curl 명령을 사용해 다음과 같이 Amazon S3 정적 웹 사이트의 API 프록시를 테스트할 수 있습니다.

Root (/) resource

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/

{Object} resource

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/home.html

관련 정보

자습서: API Gateway에서 REST API를 Amazon S3 프록시로 생성

Amazon S3를 사용해 정적 웹 사이트 호스팅

Amazon API Gateway에서 REST API 생성

API Gateway 콘솔에서 REST API 배포