S3 + CloudFront로 HTTPs 배포하기

S3?

• S3(Simple Storage Service)는 단순 스토리지 서비스이며 이미지나 파일을 저장할 수 있다.
• HTML, CSS, Js와 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있다.
• 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있다.

정적 웹사이트?

• 웹 사이트는 서버 측  스크립트 사용 유무를 깆누으로 동적 웹사이트와 정적 웹 사이트로 나눌 수 있다.
• 서버 측 스크립트는 PHP, JSP, ASP와 같은 것들을 말한다.
• 정적 웹 사이트는 HTML, CSS, Js처럼 정적 자원으로만 이루어진 웹 사이트다.

S3 버킷 설정하기

• 우선 가비아에서 도메인을 하나 구입하자.

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

• AWS에 로그인해서 S3 탭으로 이동한 후 버킷 만들기를 클릭하자.

• 버킷 이름을 지정해주자. 나는 헷갈리지 않기 위해 도메인 이름과 똑같이 짓는당

• 모든 퍼블릭 액세스 차단
  • S3를 이용해서 정적 호스팅을 하는게 아니라 CloudFront를 이용해 캐시된 CDN 서버에 데이터를 요청해서 배포하기 때문
• 아래로 내려서 버킷 만들기 클릭

---

S3에 프로젝트 올리기 + 정적 웹사이트 호스팅 설정

• 관리 탭 선택

• 아래로 쭉 내려서 정적 웹 사이트 호스팅 편집 클릭

• 정적 웹 호스팅: 활성화
• 호스팅 유형: 정적 웹 사이트 호스팅
• 인덱스 문서: index.html
• 오류 문서: index.html
• 위와 같이 설정 후 변경사항 저장

• 아래 명령어로 프로젝트 빌드 파일 생성하기

yarn build

• build 파일 안에 있는 모든 파일 드래그해서 업로드!

---

CloutFront 설정

• S3로 배포를하면 CloudFront보다 안좋은 점이 몇가지 존재한다.
  • https 배포가 안됨 → 보안에 취약
  • 비싸고 더 느림
• CloudFront로 이동해서 CloudFront에 배포 생성 클릭

원본탭 설정

• 원본 도메인 클릭 후 만들었던 S3 버킷 이름의 도메인을 선택

• S3 버킷 엑세스: 예, OAI 사용
  • CloudFront로만 배포하기 위해 S3에서 모든 퍼블릭 엑세스 차단을 했기 때문에 CloudFront가 S3에 접근하는데 사용되는 권한 객체인 OAI 생성하기
  • 이후, 새 OAI 생성을 클릭하면 원본 액세스 ID를 지정해준다
  • 버킷정책: 예, 버킷 정책 업데이트를 선택해서 OAI에 대한 읽기를 허용하도록 버킷의 정책을 업데이트

• Origin Shield 활성화 후 리전 서울 선택
  • Origin shiled는 CDN과 origin server 사이에 추가적인 캐싱 레이어를 둬서 컨텐츠를 캐싱하기 때문에 S3에 직접적으로 요청할 확률이 줄어든다.
  • Origin에 대한 모든 요청이 Origin Shield를 거쳐가기 때문에 캐시 적중률이 높아지고 동일 객체에 대한 요청을 합쳐서 동시 요청수를 줄이는 장점을 가진다

기본 캐시 동작탭 설정

• 자동 객체 압축: yes
• 뷰어 프로토콜 정책: Rediret HTTP TO HTTPS
  • HTTP를 HTTPS로 리다이렉트 !!
• 허용된 HTTP 방법: GET, HEAD
  • 정적 리소스 배포이므로 GET, HEAD 만 허용해도 상관 X
• 뷰어 엑세스 제한: NO

• 캐시 키 및 원본 요청: Cache policy and origin request policy (recommended)
  • 캐시 정책: CachingDisabled
    • 디폴트인 CachingOptimized는 배포 후 24시간 이내에 배포가 이루어지면 변경 사항을 확인하기 전까지 24시간이 걸린다. 변경사항을 바로바로 확인하기 위해 CachingDisabled 선택!

설정탭 설정

• 가격 분류: 모든 엣지 로케이션에서 사용 선택.
  • 비용을 감소시키려면 특정 리전을 선택

 

• 기본값 루트 객체: /index.html
• 표준 로깅: 그기
• IPv6: 켜기
• 마지막으로 배포 생성 클릭!

• 이후 나오는 화면에서 오류 페이지 선택

• 사용자 정의 오류 응답 생성 클릭

• SPA는 html이 index.html 하나기 라우팅을 사용하면 때문에 403 오류를 뱉으므로 응답 페이지를 /index.html로 리다이렉트 시킨후 200 확인 상태코드로 응답하게 한다

• 이후 일반 탭에 있는 CloudFront 배포 도메인 이름으로 접속하면 https가 적용된 정적 웹사이트 호스팅을 확인할 수 있다!

• https가 잘 적용된 모습!

도메인 설정하기

ACM에서 SSL 인증서 발급받기

• CloudFront에서 편집 클릭

• 대체 도메인 이름에서 구입한 도메인 입력
• 사용자 정의 SSL 인증서에서 인증서 요청 클릭

• 도메인 이름에 내가 구입한 도메인을 입력하고 요청 클릭

• 검증 대기중인 인증서 이름 클릭

• CNAME 이름과 CNAME 값을 잘 저장해두자!

• 가비아에 접속해서 My 가비아 클릭

• DNS 관리 툴 클릭!

• 사용할 도메인의 설정 클릭

• 레코드 수정 클릭

• 타입: CNAME
• 호스트: 위에서 저장한 CNAME 이름에서 첫번째 . 전까지
  • 예를들어 CNAME 이름이 _7a5c41c3b62b2fa86593affa0fa43f24.duckgugong.shop.라면 _7a5c41c3b62b2fa86593affa0fa43f24까지 입력
• 값/위치: CNAME 값 전부 입력
• 모두 입력했다면 확인후 저장 클릭

• 잠시 기다리면 인증서 발급 요청이 완료된다!

• 다시 CloudFront 편집 창으로 돌아와서 생성된 인증서를 선택한 후 설정을 완료하자!

• 마지막으로 가비아에서 레코드를 하나 추가한다! 
• 타입: CNAME
• 호스트: @
• 값/위치: https://을 제외한 클라우드 배포 도메인 url + .
  • 클라우드 배포 도메인 url 뒤에 .을 꼭 붙이자 안붙이면 오류 발생!

• 값을 모두 입력했으면 확인 후 저장 클릭!

• 이제 구매한 url로 들어가면 https 프로토콜이 적용된 도메인을 사용할 수 있다!!