[AWS] React 프로젝트 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번 방법은 추가 설정없이 가장 쉽게 할 수있는 방법입니다. 하지만 해당 url로 사이트에 접속할 때마다 S3 오브젝트에 다이렉트로 접근하기 때문에 접속하는대로 비용이 발생합니다. 접속량이 많지 않을 것 같을 때는 이렇게만 해도 무방합니다.

 

 

1. S3 에서 static hosting

 

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

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

 

 

저장하면 Bucket website endpoint를 확인 할 수 있습니다.

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

 

Permission 탭으로 가봅니다.

Block public access 의 체크를 모두 풀고 Bucket policy를 수정한다면 S3 링크로도 403 에러없이 접속 가능합니다. (Policy는 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에 사용하려는 주소를 입력합니다. 이 때 CloudFront에서 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에 배포하기