S3+CloudFront로 정적 사이트 전달

S3를 정적 사이트로 전달하고 싶습니다.

AWS에서 간단한 페라 페이지라든가를 빨리 공개하고 싶을 때의 순서입니다.

공식대로 하면 됩니다만, HTTP Only인 것 같습니다.

정적 웹 사이트 호스팅을 위해 S3 버킷을 설정하는 방법

그래서 S3 웹사이트 호스팅은 사용하지 않고 S3+CloudFront에서 설정해 봅니다.

S3 만들기

버킷 만들기

설정은 기본적으로 괜찮습니다.
index.html에서도 넣어 둡시다.

CloudFront 만들기

Distribute 작성

Distribution을 작성합니다.

Origin Settings

Origin에 S3 설정

Origin DOmain Name에 방금 만든 버킷을 지정합니다.
박스에 포커스하면 리스트로 나오므로 그대로 선택해 괜찮습니다.<BucketName>.s3.amazonaws.com 입니다.
Origin ID는 자동으로 입력되므로 그대로.

Restrict Bucket Access 설정

예를 선택하여 CloudFront에서 액세스를 허용할 수 있습니다.

Origin Access Identity

Create a New Identity로 전용 IAM을 만들 수 있습니다.
덧붙여 하나 만들면 그것을 사용 돌리는 것도 가능합니다.

Comment

access-identity-s3-access 했습니다.

Grant Read Permissions on Bucket

예로 설정하면 S3의 버킷 정책에 자동으로 기록됩니다.

그래서 Origin Settings는 이런 느낌이 들었습니다.

Default Cache Behavior Settings

뷰어 프로토콜 정책

Redirect HTTP to HTTPS를 선택하면 HTTPS로 리디렉션됩니다.

Compress Objects Automatically

Compress Objects Automatically 를 Yes로 설정하면 gzip 압축이 적용됩니다.

Distribution Settings

Default Root Object

Default Root Object 에 index.html 를 지정하면 도메인 전용 액세스로 index.html이 표시됩니다.

저장

저장하고 15분 정도 기다리면 배포가 완료되어 CloudFront 도메인에 액세스할 수 있습니다.

기타

404화

존재하지 않는 페이지를 표시하면 S3의 오류 응답이 XML로 표시됩니다.



CloudFront의 Error Pages 설정에서 변경할 수 있습니다.
오류 응답이 403이므로 404로 다시 씁니다.



덧붙여 S3에서 403이 아니고 404로 돌려주고 싶은 경우는 S3의 버킷 정책에 s3:ListBucket의 Action을 추가하면 404가 됩니다.

SPA

SPA를 라우팅으로 이동하려면 약간의 설정이 필요합니다.


/foo 로 액세스했을 경우, 파일이 없기 때문에 403이 돌려주어집니다만, 거기를 index.html를 돌려주도록(듯이) 바꾸어 주면 오케이입니다.

CORS

CORS를 사용하려면 S3 및 CloudFront 설정이 필요합니다.

S3

액세스 권한 -> CORS 설정에 다음을 적응합니다.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

CloudFront

Behaivor 설정에서 Whitelist Headers에 다음을 설정합니다.