Gatsby + S3 + cloudfront

- 개요

Gatsby는 react 기반 프레임워크로 SPA로 구성할 때 자주 쓰인다.

 

- SPA on S3

S3 uncheck Block public access
S3 Static website hosting enable
cloudfront origin s3 website hosting url
>>> <bucket-name>.s3-website.ap-northeast-2.amazonaws.com

 

- s3 bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}

 

- reference

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront/