[AWS] 간단한 사이트라면 S3로 정적 배포하기 (static web hosting, S3+CloudFront+Route53)

이번에는 React로 개발한 프론트 페이지를 AWS S3, CloudFront, Route53를 이용하여 정적 호스팅해보겠습니다!

 

가장 먼저 해야할 일은 S3를 통하여 홈페이지를 배포하는 것입니다.

AWS console에 접속하여 S3를 찾은 후 Create bucket을 합니다.

bucket list에서 생성한 bucket을 찾아 클릭. 그러면 아래와 같은 페이지를 볼 수 있습니다.

Object 탭에 빌드한 파일을 업로드합니다. (예시: pnpm build한 결과인 dist 폴더 내 파일 전부)

이 페이지에서 바로 업로드 할 수도 있고 aws cli를 이용할 수도 있습니다!

 

이렇게 index.html이 포함된 빌드 파일을 올려주세요!

 

 

 

1. S3 에서 static hosting

2. CloudFront (선택)

3. Route53 (원하는 도메인 주소가 있을 경우)

 

1번 방법은 가장 쉽게 할 수 있습니다! 하지만 로딩할때 마다 바로 S3 오브젝트에 접근하기 때문에 접속하는대로 비용이 발생합니다...

어쨌든 가장 쉽게 할 수 있기 때문에 접속량이 많을 것 같지 않고 특별한 도메인 주소가 필요한 것이 아니라면 좋은 방법이 될 수 있습니다.

버튼 몇개만 싹싹 눌러주면 바로 엔드포인트 링크를 만들어줍니다.

 

 

1. S3 에서 static hosting

 

Properties 탭으로 이동하여 밑으로 쭉쭉 내려가면 Static website hosting이 있습니다. Edit을 누른 후 이미지와 같이 설정을 해줍시다.

Static website hosting 을  Enable로 설정해주고 Index document에는 빌드한 루트 파일 이름을 써주면 됩니다. React이기 때문에 당연히 index.html입니다. Error document에도 같은 파일로 설정해줍니다. 이렇게 해줘야 routing을 탈 수 있습니다. jquery처럼 엔드포인트가 없기 때문인 것 같습니다.

 

 

저장을 하고 돌아가보면 이렇게 Bucket website endpoint를 확인 할 수 있습니다!

하지만 엔드포인트 주소로 접속하면 403 에러가 발생합니다. Public access 가 모두 막혀있기 때문입니다🥲 

 

Permission 탭으로 가봅니다.

Block public access 의 체크를 모두 풀고 Bucket policy를 수정한다면 S3 링크로도 403 에러없이 접속 가능합니다! (Policy는 bucket policy항목의 Edit를 눌렀을 때 Policy generator를 이용하면 작성을 도와줍니다.)

Policy 예시는 다음과 같습니다.

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

 

2. CloudFront 연결하기

 

S3 링크로 들어오는 접속은 막고 CloudFront를 통해서 접속할 경우에만 정상적으로 보이게 하려고합니다!

website hosting은 disabled로 바꿔줍니다.

이 페이지를 남겨두고 새탭을 열어 CloudFront로 넘어가봅시다.

Create distribution을 클릭하여 새 배포를 만들어줍시다!

 

무사히 만들고나면 CloudFront 목록에 이렇게 나옵니다. cloudfront.net 도메인을 기억해줍시다.

 

이제 Route53 에서 Create record를 합니다.

Record name에 사용하려는 주소를 입력합니다. 이때 Cloud front에서 Alternate domain name (CNAME)를 같은걸로 입력해줬다면 Alias도 자동으로 찾아줍니다.

만약에 이미 사용하고 있는 이름이라면 새롭게 생성할 수 없으므로 유니크한 이름으로 해줍니다. 목록에 없는데도 이미 사용하고 있는 도메인이라고 뜬다면? Amplify 등에서 사용하고 있지 않나 살펴봐야합니다. 사용하지 않는다면 지워주세요.

 

Alias를 on으로 바꿔서 앞서 CloudFront에서 설정해주었던 도메인을 찾아줍니다.

 

원하는 주소로 연결됩니다! 끝!

 

 

Reference

 

https://repost.aws/knowledge-center/cloudfront-serve-static-website

Use CloudFront to serve a static website hosted on Amazon S3

https://hyeon9mak.github.io/react-spa-s3-cloudfront/

React S3, CloudFront에 배포하기