AWS cloudFront

거의 12시간 동안 헤매고 헤매서 해낸 ... 배포였습니다 ㅜ ㅜ

까먹지 않기 위해 블로그 작성하겠습니다.

 

S3를 이용하는 이유

aws S3은 버킷이라는 공간에 정적 콘텐츠를 저장하여 인터넷을 통해 접근할 수 있도록 하는 서비스입니다.

간단히 말하면 웹상에 존재하는 하드 공간인겁니다.

다른 자료들을 보다보면 EC2에 배포를 하는 경우도 있는데 (EC2는 작은 컴퓨터라 생각하면 됩니다)

프론트엔드의 정적 콘텐츠를 배포할때에는 S3면 충분하기 때문입니다.

 

CloudFront 로 배포하는 이유

CloudFront 를 사용하지 않고 S3 자체만으로 배포하는 방법도 있습니다.
하지만 S3 로 배포했을 때와 다르게 다음과 같은 장점으로 CloudFront 를 이용하기로 하였습니다.

CloudFront 를 이용했을 때의 장점 
1. HTTP → HTTPS 

손쉬운 설정으로 http 로의 접속을 https로 리디렉션 시켜줄 수 있습니다.

 

2. CDN 을 통한 더 빠른 페이지 응답속도 

 S3으로만 배포하는 경우 

선택한 리전 내에서만 생성이 되기 때문에 해당 리전에서 멀어질수록 접속 속도가 느려집니다. 

하지만 CloudFront 를 이용하면 전 세계에 분포된 엣지 로케이션이라고 하는 데이터 센터의 엣지 서버를 사용해 

콘텐츠를 캐싱하고, 

사용자가 위치한 곳에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공받을 수 있도록 해주는 역할을 합니다.

 

 

 

---

1. 프로젝트 build 폴더 생성

프로젝트 터미널에서 yarn build 시행해서

build 폴더 만들어두기(알아서 생성됩니다요)

 

 

 

2. AWS S3 버킷 만들기

*****만약 회사에서 배포를 해야하는 상황이라면 *****

AWS IAM 으로 권한을 줬는지 확인을 해야 저처럼 ㅜㅜ 여러번 권한 제한을 겪지않을 수 있습니다 ..

 

 

자 그러면 내가 루트권한이 아닌,

IAM 콘솔로 로그인 했다면 진행해주시면 됩니다.

맨 오른쪽 위에 보면 내 아이디를 누르면 뜨는 화면 중 하나인데요.

IAM 사용자인지 확인해주시고,

그 아래에 보안 자격 증명에 들어가서
(엑세스 관리에서)사용자 클릭 -> (사용자 이름에서)내 아이디 클릭 -> 권한 확인

 

AmazonS3FullAccess(직접)

CloudFrontFullAccess(직접)

 

그리고 Route53에서도 필요하기 때문에

AdministratorAccess(직접)

 

이 세가지 권한은 꼭 있어야합니다 ...

< ☝혹시라도 꼭 필요한 권한이 빠진거라면 추가하도록 하겠습니다. 댓글 남겨주시면 복많이받으실거에유☝>

 

---

 

모두 확인했으면 AWS S3페이지에서 버킷을 눌러주세요.

S3 주소 : https://aws.amazon.com/ko/s3/

 

버킷에 미리 생성된 버킷들이 있을거고,

없어도 상관없습니다.

우리는 새로만드는거니까!!

 

버킷에서 맨 오른쪽에 버킷만들기 버튼을 클릭!

 

이런 화면이 나올겁니다.

버킷 이름을 입력하고, AWS 리전을 선택합니다.

(서울 혹은 뭐 미국이든~기본값이기때문에 걱정 ㄴㄴ)

 

 

그 아래에 객체 소유권 탭에서는

ACL 활성화됨 버튼을 눌러주세요.

 

 

그 아래에 퍼블릭 엑세스 차단은 풀어주세요.

그리고 맨아래 있는

'현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 어쩌구'의 체크 박스 클릭!

 

차단을 하면 웹으로 접근이 불가능하니 꼭 풀어주세요.

 

나머지 항목은 기본값으로 그대로 둬도 되고, 상황에 맞게 설정하는데

저는 회사에서 그전에 만들어둔 버킷을 참고해서 만들었습니다.

 

 

만약 엔드포인트 주소가 필요할 경우 

속성에서 정적호스팅 활성화를 누르시면 됩니다.

 

 

 

엔드포인트는 공부를 더 해봐야할 것 같음!

 

---

 

그리고 버킷 권한에서 

초큼 아래쪽으로 내려보면

버킷 정책이 있을겁니다.

버킷 정책 편집을 눌러서 정책 생성기를 클릭!

 

 

이 화면이 뜰겁니다.

여기서 step1

select Type of Policy 에서 

S3 Buket Policy를 선택해주세요.

 

 

 

그리고  step2에서

Effect 는 Allow

Principal 은 * (모든 유저에 대해서 라는 뜻)

Action 에서는 GetObject를 선택해주세요.  (유저들이 이 버킷에 접근할 수 있는 권한을 준다는 뜻)

 

Amazon Resourse Names(ARN)에서는 

버킷 정책 편집에 있는 버킷 ARN을 복사해서 끝에 /* 만 추가해서 넣어주세요.

(*은 모든 오브젝트에 대해서 라는 의미입니다.)

 

예를 들어서

arn:aws:s3:::버킷이름/*

요렇게 붙여주세요.

 

다 입력한 후에 Add Statement 를 클릭하면 리스트가 생성됩니다.
아래의 Generate Policy 를 클릭하면 JSON 형태의 문서가 나오는데 전체 복사를 한 후에,

다시 버킷 정책 편집 탭으로 들어와 복사한 값을 붙여넣기 합니다.
아래에 변경 사항 저장 버튼으로 꼭 저장해주세요 !

 

 

 

 

그리고 버킷의 마지막 업로드 입니다.

이건 쉬워유..!

버킷 객체에 프로젝트 build 폴더를 드래그해서 옮겨 두시면돼요!

 

 

 

2-1. 가비아에서 도메인 구매 

일단 구매해야합니다!! (도메인이 필요하기 때문입니다용)

 

3. AWS Route 53 DNS 호스팅하기

호스팅 영역을 생성해줍니다.

 

 

도메인 이름은 가비아에서 구매한 도메인과 동일하게 적용해주세요.

그리고 유형은 퍼블릭! 호스팅으로 적용해야합니다.

 

 

 

호스팅을 하고나면 그 호스팅 세부 정보로 들어가주세요.

NS와 SOA 는 생성되어 있을겁니다.

자 여기서 다시 가비아로 넘어가야합니다!!!

 

 

 

4. 가비아에서 도메인 구매 

 

마이페이지에서 도메인에 들어간 후 

사용할 도메인 관리를 눌러주세요!

 

 

관리 페이지에 들어가면 

 

네임서버라고 있을겁니다.

여기에서 설정을 눌른 후 Route 53에 있던

NS 유형의 값/트래픽 라우팅 대상에 있는 url같이 생긴 텍스트를 옮겨주세요.

4줄로 되어있으면 1-4차까지 입력해주시고

맨 뒤에 있는 . 은 지워주셔야합니다.

 

 

그리고 관리페이지에서 좀더 내려가면 

DNS 정보에서 DNS 레코드 설정을 눌러주세요.

지금 수정하고 있는 도메인에서 DNS 정보칸에 설정 버튼을 눌러주세요.

 

 

DNS 관리 페이지로 옮겨 갈건데,

여기서 레코드 수정을 눌러서

 

 

이런식으로 작성해줘야합니다.

(저는 회사에서 그전에 했던 부분 확인해서 작성했습니다.)

 

 

5. 인증서 만들기 

대망의 인증서입니다..

진짜 저는 여기서 시간이 정말오래 걸렸는데,

구글링 하다보니 ..ㅎ 

지역을 [버지니아 북부]로 변경하지 않으면 무한 [검증 대기중]에 빠진다고 하니 주의하셔야합니다.

 

 

자.. 

AWS Certificate Manager에 인증서 나열을 눌러서 요청을 눌러야합니다.

 

 

퍼블릭으로 선택하고 다음!

도메인 이름은 당연히 가비아에서 산 도메인 이름과 동일하게 적용

검증 방법은 DNS 검증으로 해주세요

 

키 알고리즘도 동일하게 적용하고

요청 !

 

Route 53 레코드 생성을 눌러주시면 

알아서 Route53으로 CNAME이 적용됩니다.

 

 

그러고 나면 

5-10 정도 뒤에 검증대기중이던 도메인이 발급됨이 됨니당.

 

 

 

6. 인증서 연결 

거의 다왔습니다.

cloudFront에서 일반에서 설정 편집을 눌러주세요 

 

 

여기서 인증서를 선택해 주시고

대체 도메인에도 원래 가비아 도메인과 동일하게 적용해주세요.

 

 

 

 

 

7. Route 53 레코드 cloudFront 연결 

 

 

 

돋보기 옆에 있는 곳에는 

cloudFront 세부정보에 있는 배포 도메인 이름입니다.

이렇게하면 끗.. 입니다요....

 

 

참고 블로그 https://developer-ping9.tistory.com/330