AWS S3 + CloudFront 배포 생성

실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.

설정하는 과정을 정리하였다.

 

 

 

 

 

 

🍒 CloudFront 가 뭐야?

🍒 S3 + CloudFront 배포 생성은 어떻게 해?

 

 

 

 

 

 

 

 

---

---

 

 

Amazon CloudFront ? 

---

AWS 에서 제공하는 CDN 서비스. 캐싱을 통해 사용자게에 좀 더 빠른 전송 속도를 제공함을 목적으로 한다.

.html .css. .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다.

CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다.

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

 

 

 

 

 

 

 

 

콘텐츠를 전송하도록 CloudFront를 구성하는 방법

---

1️⃣ Amazon S3 버킷 또는 고유 HTTP 서버와 같은 오리진 서버를 지정하고, CloudFront는 이로부터 파일을 가져온 다음 전 세계 CloudFront 엣지 로케이션에 배포한다.

 

오리진 서버는 객체의 최종 원본 버전을 저장한다. HTTP를 통해 콘텐츠를 서비스하는 경우 오리진 서버가 Amazon S3 버킷 또는 웹 서버 같은 HTTP 서버이다. HTTP 서버는 Amazon Elastic Compute Cloud(Amazon EC2) 인스턴스나 사용자가 관리하는 서버에서 실행할 수 있다. 이 서버를 사용자 지정 오리진이라고도 한다.

 

 

2️⃣ 오리진 서버에 파일을 업로드한다.

 

객체라고도 하는 파일은 일반적으로 웹 페이지, 이미지 및 미디어 파일을 포함하지만 HTTP를 통해 제공될 수 있는 모든 항목이 될 수 있다.

Amazon S3 버킷을 오리진 서버로 사용할 경우 버킷에 있는 객체를 공개적으로 읽을 수 있는 상태로 만들 수 있으므로 객체의 CloudFront URL을 아는 사람이라면 누구나 액세스할 수 있다. 객체를 비공개로 유지하고 액세스할 수 있는 사용자를 제어할 수 있는 옵션도 있다. 

 

 

3️⃣ 사용자가 웹 사이트나 애플리케이션을 통해 파일을 요청할 경우 &CF;에 어떤 오리진 서버에서 파일을 가져올지 알려 주는 CloudFront 배포를 만든다. 동시에 CloudFront에서 모든 요청을 기록할지, 배포를 만들자마자 활성화할지 여부와 같은 세부 사항을 지정한다.

 

 

4️⃣ CloudFront는 새 배포에 도메인 이름을 할당하고, 이는 CloudFront 콘솔에서 볼 수 있다. 또는 API 요청 등과 같은 프로그램 요청에 대한 응답으로 반환된다. 원하는 경우 대신 사용할 대체 도메인 이름을 추가할 수 있다.

 

 

5️⃣  CloudFront에서는 배포의 구성(사용자의 콘텐츠가 아님)을 모든 해당 엣지 로케이션 또는 CloudFront가 파일의 사본을 캐싱하는 지리적으로 분산된 데이터 센터의 POP(Point of Presence) 서버 모음으로 보낸다.

 

 

 

 

 

 

 

 

 

 

배포 과정 (AWS S3 + CloudFront)

---

1. S3 확인

 

먼저 IAM 계정으로 AWS 에 가서 로그인을 한다.

CloudFront 와 연결할 S3를 확인한다

 

 

 

 

2. 버킷 만들기 클릭 

 

• ex) dev-{project-name} or prod-{project-name}  등 원하시는 이름을 넣으시거나,
• 추후 도메인을 연결할 경우, 도메인 명과 동일하게 버킷 이름을 정해준다.

 

• AWS 리전은 서울 선택
• 초기 생성시, 해당 버킷의 퍼블릭 액세스를 차단으로 체크되어 있는데 -> CloudFront 에서 접근하고 다른 사용자들이 접근해야하는 퍼블릭 목적을 갖기에, 모든 퍼블릭 액세스 차단 체크박스를 해제한다.
• 아래와 같이 체크박스들이 비어있는 상태가 되어야 하며, “현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다”. 에는 체크를 하면 된다.

 

 

 

3. 태그 추가

태그는 AWS 관리자가 비용이나 서비스 구분 등에 대해 관리를 위해 AWS서비스들을 관리하는 그룹이다.

Name, Team, Service, Env의 4개의 필수 값으로 태그한다.

Name: (ex. 본인의 e-mail 앞의 이름)

Team: ~

Service: ~

Env: dev (dev, test, prod)

 

 

 

 

4. 버킷 만들기 버튼 클릭

그 이후의 설정은 건드리지 않고, 버킷 만들기 버튼을 클릭한다.

 

 

 

 

5. 상세 페이지 

다 작업 후 , 만들어진 버킷의 상세페이지로 이동한다.

 

 

 

6. 정적 웹 사이트 호스팅 편집

상세페이지 탭에서 속성 탭을 클릭 후 맨 아래로 스크롤을 내리면

정적 웹 사이트 호스팅 카드가 있다. 편집을 눌러 아래와 같이 설정한다.

 

 

생성한 S3를 정적 웹 사이트 호스팅으로 사용하도록 설정하는 것이다.

이때 static 파일의 인덱스 경로를 찾을 수 있도록 인덱스 문서의 경로를 index.html 로 적어준다.

 

 

 

S3 설정 끝

 

 

7. CloudFront 배포 생성

 

원본 도메인을 위해서 생성한 S3버킷으로 선택한다.

 

 

버킷을 선택시, 자동으로 이름 영역이 채워진다. 웹 사이트 엔드포인트 사용 버튼을 누르지 않는다.

 

 

 

 

8. OAI 를 생성

CloudFront에서, OAI를 통해 S3 에 접근할 수 있도록 Legacy access identities 를 선택한다.

Legacy access identities 라디오 버튼을 클릭 시, 아래와 같은 영역이 나타나며 새 OAI 생성 버튼을 눌러서 OAI 를 생성한다.

 

 

새 OAI 를 아래와 같이 이름을 작성 후 생성 버튼을 누른다.

 

 

 

9. 버킷 정책 업데이트 체크

OAI 가 버킷에 접근 할 권한을 갖는 설정 값이 들어가도록,

버킷 정책 - 예, 버킷 정책 업데이트 라디오 버튼을 선택한다.

 

 

 

 

10. Origin Shield 활성화

Origin Shield 활성화를 예로 선택 후, 서울 리전을 선택한다.

 

 

 

• 기본 캐시 동작은 (추가 내용) 뷰어 프로토콜 정책을 상황에 맞게 수정해준다

• RTI를 통해 cloudbric에서 도메인을 받아야 한다면 SSL redirect 를 cloudbric에서 해주기 때문에 HTTP and HTTPS를 선택하고
• Route53을 쓴다고 하면 별도의 리다이렉트를 해주지 않기 때문에 Redirect HTTP to HTTPS를 선택해준다.
• 가격 분류 - 북미,유럽,아시아, 중동으로 라디오 버튼 클릭
• 대체 도메인은 현재 없으면 넘기고 있으면 지정한다.
• 웹 ACL 은 선택하지 않고 넘긴다.

 

 

 

11. 사용자 정의 SSL 인증서 

 

사용자 정의 ssl 인증서는, HTTPS 프로토콜로 사용하고자 할 때 필요하다.

현재 사용하고자 하는 도메인과 일치하는 게 있으면 사용한다. ex)*.example.com

HTTP/2 가 기본 값으로 선택된 것까지 확인

 

 

 

12. CloudFront를 생성

배포 생성 버튼을 눌러 CloudFront를 생성한다.

 

 

 

 

13. 사용자 정의 오류 응답 생성

생성된 CloudFront 상세페이지에 접근 후, 오류 페이지 탭을 클립한다.

사용자 정의 오류 응답 생성 버튼을 누른 뒤, 위의 예시 참고

 

 

 

CloudFront 생성 완료

 

 

CloudFront 는, 캐싱된 데이터를 사용자에게 제공해준다. bitbucket으로 배포시마다, 캐싱된 데이터를 삭제하기에 사용자는 배포시마다 업데이트된 내용을 볼 수 있다.

 

 

 

 

 

 

🔽 bitbucket 과 연동하는법 은  아래의 글 참고

https://eonhwa-theme.tistory.com/184#google_vignette

Bitbucket tag base 배포