취미가 알고리즘

CloudFront를 통해 퍼블릭 상태의 객체에 대한 접근을 차단하고, https까지 적용시키려고 합니다.

https://whyeskang.com/411

우선 이전 글에 이어서 포스팅하니, 앞 내용은 여기서 확인해주시면 됩니다.

현재 S3만으로 배포가 완료된 이 버킷은 퍼블릭 상태이고, 퍼블릭 차단이 해제되어 있습니다.

먼저 이것부터 돌려놓습니다.

퍼블릭 액세스 차단을 다시 활성화하고, 현재 등록된 버킷정책을 삭제하여 액세스를 "버킷 및 객체가 퍼블릭이 아님" 상태로 돌려놓습니다.

완료된 화면입니다.

그리고 정적 웹 사이트 호스팅로 "비활성됨" 으로 변경합니다.

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home

그러면 이제 위 링크를 이용하여 CloudFront 페이지로 넘어갑니다.

우측의 "배포 생성" 버튼을 누릅니다.

우선 원본 도메인으로 해당 버킷에 해당하는 도메인을 선택합니다.

그리고 S3 버킷 액세스를 "원본 액세스 제어 설정"으로 변경합니다.

그 다음 제어 설정 생성을 눌러서 해당 S3의 제어 설정을 생성합니다.

건드릴 것 없이 바로 생성 버턴을 누르시면 됩니다.

그리고 아래에 Origin Shield 활성화를 "예"로 변경합니다.

지역은 S3 버킷과 동일하게 맞춥니다.

기본 캐시 동작에서는 하나만 변경하면 됩니다.

뷰어 프로토콜 정책이 HTTP and HTTPS로 되어있을겁니다.

이거를 "Redirect HTTP to HTTPS"로 변경합니다.

그리고 맨 밑에 내려와서 기본값 루트 객체를 /index.html 으로 작성하고 배포를 생성합니다.

그러면 배포를 생성함과 동시에 S3 버킷 정책을 업데이트하라고 합니다.

정책을 복사해줍니다.

그리고 해당 S3로 넘어가서 버킷 -> 권한 -> 버킷 정책 -> 편집에서 해당 내용을 넣고 저장합니다.

위 사진처럼 되면 완료입니다.

다시 생성된 배포로 넘어가면 도메인이 표시되어 있습니다.

도메인 + /index.html 으로 들어가면 배포가 완료되었고, https까지 적용된 것을 확인하실 수 있습니다.

그리고 버킷의 엔드포인트까지 노출되지 않아서 S3만으로 배포한 방법보다는 안정적이라고 볼 수 있습니다.

하지만 도메인/index.html 을 통해서만 이 페이지가 뜨며, /index.html를 제거한다면 AccessDenied가 뜹니다.

여기서 오류페이지에 대한 응답을 직접 생성하는 방법으로 해결합니다.

해당 배포 -> 오류 페이지 응답 생성에서 사용자 정의 오류 응답 생성 버튼을 누릅니다.

여기서 오류코드를 응답 페이지로 이동하도록 지정할 수 있습니다.

/index.html로 경로를 설정하고, 응답 코드를 200으로 변경합니다.

같은 방법으로 403, 404에 대한 응답 페이지를 생성하였습니다.

이제 /index.html 없이 도메인 입력만으로 이동이 가능한 것을 확인할 수 있습니다.

S3와 CloudFront를 이용한 배포 방법이 있고, S3 만으로 배포하는 방법이 있습니다.

권장하는 방법은 S3, CloudFront를 모두 사용하는 방법이고, 이 글에서는 S3 만으로 배포하는 것을 다룹니다.

사전에 준비하셔야할 것은 배포 하려고하는 React 프로젝트입니다.

npx create-react-app deploy-app

저는 기본 프로젝트를 배포하기 위해 위 명령어로 새 프로젝트를 만들었습니다.

우선 프로젝트를 S3에 업로드한 후에 배포를 진행하게 됩니다.

먼저 리액트 프로젝트를 아래 명령어로 빌드해주시면 됩니다.

npm run build

그럼 프로젝트 바로밑에 build 폴더가 생성되는 것을 확인할 수 있습니다.

build 폴더 아래의 모든 파일을 S3에 업로드합니다.

https://s3.console.aws.amazon.com/s3/buckets

위 링크를 이용하여 S3 버킷 페이지로 이동합니다.

그리고 우측에 "버킷 만들기" 버튼으로 버킷을 생성합니다.

버킷 이름은 원하는대로 작성합니다.

객체 소유권은 비활성화됨을 유지합니다.

원래는 모든 퍼블릭 액세스를 차단하는 것이 맞습니다.

하지만 S3만으로 배포할 때는 차단을 해제합니다.

이는 추후에 업로드할 CloudFront로 보완할 수 있습니다.

나머지 설정은 기본으로 놔두고 버킷을 생성하시면 됩니다.

이렇게 생성된 버킷의 액세스는 "객체를 퍼블릭으로 설정할 수 있음" 상태입니다.

이것을 "퍼플릭" 상태로 변경해야 합니다.

이를 위해 버킷 -> 권한 -> 버킷 정책에서 "편집" 버튼을 눌러 버킷 정책을 넣어주시면 됩니다.

1시 방향의 "정책 생성기" 버튼으로 편하게 정책을 생성할 수 있습니다.

그 전에 왼쪽의 버킷 ARN을 복사하고 넘어가도록 합시다.

먼저 Policy Type은 "S3 Bucket Policy"를 선택합니다.

Principal은 *

Actions는 GetObject

ARN은 방금 복사했던 ARN + /*을 넣습니다. (/*을 반드시 포함해야 합니다.)

그러면 Add Statement 버튼이 활성화되며, 클릭합니다.

Generate Policy 버튼까지 누르면 JSON 형식으로 버킷 정책이 생성됩니다.

위 내용을 복사합니다.

그리고 다시 버킷 정책으로 돌아와서 복사한 내용을 붙여 넣으면 됩니다.

그리고 "변경 사항 저장" 버튼을 눌러 저장합니다.

그러면 객체의 액세스가 퍼블릭으로 변경된 것을 확인할 수 있습니다.

다시 해당 버킷으로 들어갑니다.

여기에 아까 build했던 파일을 다 업로드합니다.

업로드가 완료되면 이런 상태가 됩니다.

그리고 속성에서 맨 밑으로 내려가면 "정적 웹 사이트 호스팅"이 있습니다. 편집을 누릅니다.

우선 활성화부터 해주시고, 기본 페이지로 index.html 을 넣어줍니다.

그리고 변경사항을 저장합니다.

그러면 이렇게 URL을 발급 받을 수 있습니다.

그리고 해당 URL을 클릭하면 배포가 완료된 것을 확인할 수 있습니다.

다만 이 방법은 객체가 퍼블릭 상태고, https가 적용되지 않아 보안상의 이슈가 있습니다.

이를 해결하기 위해서는 CloudFront에 S3를 연결해주는 작업이 필요합니다.

CloudFront 관련 글은 아래 링크에서 확인해주시면 되겠습니다.

https://whyeskang.com/412