AWS - S3,Cloudfront를 활용한 웹 페이지 배포

 

CloudFront

컨텐츠(파일, 동영상)을 빠르게 전송해주는 서비스이다.

• 컨텐츠가 S3에 저장되어 있을 때 S3저장소가 한국에 있다고 가정하자
• 이때 한국인이 한국에 S3를 활용하는 게, 외국인이 한국의 S3를 사용하는 것 보다 빠를 것이다.
• 이는 물리적 거리가 멀기 때문이다. 이를 해결하기 위해 전세계 곳곳에 컨텐츠의 복사본을 저장해 둘 수 있는 임시 저장소를 구축하고, 가까운 저장소에서 복사본을 꺼내서 빠르게 볼 수 있도록 하는데
• 이를 CDN이라한다. (Content Delivery Network)  CloudFront는 이런 CDN서비스의 일종이다.
• 기본적으로 S3만 사용해도 웹페이지를 배포할 수 있지만, 성능향상 및 HTTPS 적용을 위해 S3를 활용한 웹 페이지 배포시 CloudFront는 필수이다. 
• 웹 서비스 배포시 S3말고도 Netlify, Vercel, Cloudflarere 같은 서비스를 활용하기도 한다.

• 위와 같은 구성으로 만들 것이다.

---

1. S3 버킷에 배포할 웹 서비스 파일 업로드 하기 

 

• 버킷 생성 후 파일을 하나 만들어서 업로드하면 된다. (ec index.html)

• 다음으로 정적 웹 사이트 호스팅을 설정하자 

• 인덱스 문서를 설정하면, 맨처음 접속했을 때 페이지를 설정할 수 있다. 
• index.html밖에 없기 때문에 일단 이로 둔다.

• 호스팅 후 주소를 누르면 들어갈 수 있다.

---

2. CloudFront 생성하기 

• 배포 생성을 하자 클릭하면, S3 버킷을 선택할 수 있다.
  • (원본 버킷 엔드포인트 말고, 정적 호스팅 웹사이트의 엔드 포인트를 사용하자 - 이름에 website가 들어가 있다.)

• 다음으로 HTTP, HTTPS 캐시 동작을 선택하자 
• Redirect HTTP to HTTPS로 설정해준다.

• 

• WAF(애플리케이션 방화벽)은 일단 비활성화 해두었다. 

• 복사본 생성 범위에 따라 가격이 책정된다함 서비스가 주로 사용되는 범위를 설정하자 

 

• 기본 루트 객체는 첫 페이지를 의미한다. index.html로 뒀으니 이로 하자 

• 마지막으로 배포 생성하기를 누른다.
• 2~3분 정도 시간이 소요된다. 

  

---

3. Cloud에 도메인 연결하기, HTTPS 적용

 

• 먼저 인증서를 발급받아야한다. Certificate Manager로 접속하자 
• 이때 인증서를 발급받는 Region이 미국 동부 버지니아이어야한다. (CloudFront만)
• HTTPS 인증서 발급은 지난 글을 참고해서 받으면 된다. (Cloud Front에 연결할 도메인 주소로 발급)
• 도메인에 대한 인증서를 발급받았다면, CloudFront로 돌아오자 

• 대체 도메인에 SSL인증받은 도메인을 적어준다.

• 

• Route 53에 접속해서 인증받은 도메인을 등록한다. 

• CloudFront가 아직 배포중이라면, 저게 안뜬다 쫌만 기다리자 
• 적용 후 레코드를 생성하면 마무리 된다.

 

---

추가 React를 S3에 배포하는 방법

https://velog.io/@jwo0o0/AWS-S3%EB%A1%9C-React-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[AWS] S3로 React 애플리케이션 배포하기

https://velog.io/@kimkevin90/React-CRA-%EB%B0%B0%ED%8F%ACAWS-S3-CloudFront

React CRA 배포(AWS S3 & CloudFront)

*CRA란 손쉽게 최신의 리액트 앱을 설정할 수 있게 하는 명령어임 

 

 

Github Action으로 S3버킷 CI/CD

https://velog.io/@jwo0o0/AWS-S3-%EB%B2%84%ED%82%B7-Github-Action%EC%9C%BC%EB%A1%9C-CICD

[AWS] S3 버킷 Github Action으로 CI/CD