aws S3, CloudFront, Route53 연동하기

aws S3, CloudFront, Route53 연동하기

회사에서 자체 개발한 플랫폼을 실제 도메인과 서버와 연결하기 위해 S3를 처음 사용해 보았다.

대략적 흐름은 이렇다.

- 로컬에서 파일 build (npm build / yarn build)

- 생성된 build 폴더 안의 파일들을 S3에 업로드 -> cloudfront 연동 -> Route 53 연동

s3와 cloudFront Route 53에서 기본 설정값에서 변경사항 위주로 기록하였다.

나의 기억 저장소...!

1. S3 생성하기

ACL 활성화: 객체 라이터 로 변경

퍼블렉 엑세스 차단 비활성화

이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다 체크

여기는 수정할게 없으니 버킷 만들기 클릭

로컬에서 build한 파일들을 드래그 앤 드롭

이제 할 일은 버킷에 퍼블릭 권한을 활성화 해주어야 한다.

모든 버킷은 처음 생성 시 프라이빗으로 접근이 불가능하게 되어 있는데

위에서 버킷 생성 시 한 설정은 퍼블릭 액세스 차단을 비활성화 했을뿐이지

실제로 이 버킷은 퍼블릭이 아니기 때문에 따로 퍼블릭 권한을 활성화 해주어야 한다.

버킷 이름 클릭 → 권한 → 버킷 정책 편집

버킷 정책은 JSON 형식의 문서인데 JSON을 직접 작성하기는 어려우니 정책생성기를 이용해 자동으로 JSON을 생성할 수 있다.

오른쪽 상단에 정책생성기 를 선택

Select Type of Policy에서 S3 Bucket Policy 선택

Effect는 Allow 를 선택하는데 유저가 접속할 수 있도록 설정해준다.

Principal는 누구에게를 지정하는 것으로 * 로 설정하는 것은 모든 유저를 의미한다.

Action은 GetObject 를 찾아 선택. 유저들이 이 버킷에 접근할 수 있는 권한을 준다는 뜻이다.

아마존에 있는 모든 리소스는 고유 id가 부여돼 있는데 그것을 Amazon Resource Name (ARN)이라고 한다.

하단에 회색으로 ARN 형식이 적혀있는 것 을 볼 수 있는데 형식에 맞게 ARN을 적어주자.

형식 -> arn:aws:s3:::bucket_name/*

여기서 bucket_name이라고 적혀있는 부분에 자신이 만든 버킷의 이름을 넣어주면 된다.

뒤에 /*의 뜻은 모든 오브젝트에 대해서라는 뜻!

기입 후 Add Statement 버튼을 누르면 Generate Policy 버튼이 나타나는데 클릭해주면

아래와 같이 버킷 정책의 JSON이 생성되는 것 을 알 수 있다.

JSON을 복사하여 버킷정책에 붙여넣은 뒤 변경 사항 저장

속성 탭에서 정적 웹 사이트 호스팅을 편집을 클릭하면 위와 같이 나오는데 활성화 를 클릭

인덱스 문서와 오류 문서 모두 index.html 을 넣어준다.

리액트 앱을 호스팅 할 때는 오류 문서에 반드시 index.html을 넣어줘야 하는데

싱글 페이지가 아닌 멀티 페이지로 여러 가지 라우팅을 할 때는 반드시 넣어줘야 정상적으로 작동한다고 한다.

변경사항 저장 클릭하면 S3 생성이 완료된다 !

2. CloudFront 생성하기

cloudFront에 접속하여 배포 생성을 클릭

1) 원본

원본 도메인 ⇒ 반드시 S3 에서 정적 웹사이트 호스팅한 주소를 입력 해주자!!

‘website’ 저 부분이 안나오는 것으로 입력해서 사이트가 안뜨는 상황 발생..

input focus 하면 나오는 버킷이름으로 하면 안된다.

이름 => 원본 도메인을 입력하면 자동 생성된다.

2. 기본 캐시 동작

뷰어 프로토콜 정책 ⇒ Redirect Http to HTTPS

허용된 HTTP 방법 ⇒ GET, HEAD OPTIONS ... (추후 확인 필요..)

캐시 키 및 원본 요청 ⇒ Legacy cache settings

(cloudFront 캐시를 disable 할때는 첫번째 버튼인 Cache Policy and Origin을 선택해야 한다..

추후 블로그에서 설명)

3. 함수 연결 pass

4. 설정

가격분류 ⇒ 북미, 유럽, 아시아, 중동 및 아프리카 사용

대체 도메인 이름 ⇒ 처음에 원본 도메인에 정적 웹사이트 호스팅 주소를 적었기 때문에 여기서 실제 사이트의 주소를 입력 해준다!

사용자 정의 SSL 인증서 ⇒ 백엔드에서 생성한 인증서 클릭

IPv6 ⇒ 끄기 (추후 확인 필요..)

배포 생성 완료!

3. Route 53

왼쪽 메뉴에 호스팅 영역으로 이동

연결하고자 하는 도메인 이름 링크를 클릭하고 들어간다.

cloudFront 에서 생성한내용으로 레코드 생성

오른쪽 별칭을 클릭 하여 트래픽 라우팅 대상 메뉴로 변경해준다

레코드 이름에 클라우트프론트에서 설정한 CName 을 입력한다.

전체 레코드이름 = 배포할 주소 라고 보면 된다.

트래픽 라우팅 대상에는 cloudFront에서 배포한 Domain name 을 선택한다.

뭐였는지 기억안나면 cloudFront management 로 이동해서 Domain name 을 확인하자

레코드 생성이 끝나면 배포가 완료된다.

지금 세팅으로는 local 환경에서 코드 수정이 이루어질때마다

yarn build를 해서 변경된 build파일을 매번 직접 s3에 업로드하여 배포해야 한다.

이러한 손수 작업을 줄이기 위해 githubAction을 연동하는 것이다.

nodejs.yml 파일을 만들어서 s3 도메인 이름을 연동하고 build-deploy를 설정해주는 방법이다.

env.prod로 설정한 환경에서 git push를 하면

build-prod -> deploy-prod -> s3 -> cloudFront -> Route 53

연동된 순서대로 자동으로 배포가 이루어지는 것이다.

githubAction 또한 이번에 알게 되었는데 추후에 정리해보겠다.

[참고 자료] https://velog.io/@lllen/AWS-S3%EC%99%80-Cloudfront%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B0%B0%ED%8F%AC

from http://whoyoung90.tistory.com/19 by ccl(A) rewrite - 2021-12-30 23:01:04