[AWS] 카톡분석 프로젝트-6 / S3 정적웹호스팅에 https 적용

 

이전장에서는 AWS S3 bucket을 이용한 정적 웹호스팅까지 진행해보았다.

[AWS] Lambda 구축하기-5 / S3 이용한 정적웹호스팅

 

하지만 정적 웹호스팅을 위해서는 퍼블릭엑세스를 허용해줘야돼서 보안에 구멍이 생긴다.

따라서 보안향상을 위해 이번 포스팅에서는 https를 적용해보고자 한다.

 

S3 버킷에 보안 설정이 필요한 이유

1. https 가 아닌 http 통신을 해야되기 때문
2. 버킷이 퍼블릿 공개라는 점
3. AWS S3의 엔드포인트 주소를 그대로 사용해야 한다는 점

 

---

 

 

1. Route53 설정

 

1.1 https를 사용하기 위해서는 도메인을 생성해줘야 한다.

- Route53 접근 > 도메인등록 > 검색한 후 유효성 체크 > 장바구니에 추가하고 결제해준다

- 도메인명 짓고 결제를 하는 간단한 과정이다.

- 2022/06 현재 가장 싼 도메인은 4천원정도 한다 (.click)

 

- 5분후에 아래와 같은 메일이 온다 링크 눌러서 verify 해주면 된다.

 

1.2 route53 에 가서 호스팅영역을 클릭해준다

 

1.3 주소를 클릭해 들어가서 레코드 생성을 눌러준다

- 마지막 값/트래픽 라우팅 대상 부분에 리소스 없음이 뜨면  그 이유는 버킷 이름과 도메인 명이 다르기 때문이다.

둘의 이름을 맞춰줘야한다.

ex) abc.com 이면 버킷명도 abc.com 이여야한다.

 

- 이제 우리가 구매한 주소로 접속이 되는것을 확인해 볼 수 있다.

 

 

---

 

 

2. Certificate Manager 로 SSL 인증받기

 

- AWS의 https 는 자체적으로 Certificate Manager 를 통해 인증서를 발급한다.

 

2.1 AWS 서비스 검색 창에 AWS Certificate Manager 를 검색해 이동한다.

 

2.2 인증서 요청 - 퍼블릭 인증서 요청

- Route53에서 발급받은 도메인과  www 가 붙은 서브 도메인 이름까지 두개 를 써주고 요청 버튼을 누른다.

ex) abc.xyz / www.abc.xyz

 

2.3 Route53에서 레코드 생성을 눌러 레코드를 생성

 

 

---

 

 

3. CloudFront 와 S3 연결하기

 

- CloudFront 는 캐시기능을 제공하는 CDN 서비스

- S3에 저장된 컨텐츠에 직접 접근하지 않아도 되므로 S3 비용 감소, 빠른 응답속도

- 세계 곳곳에 서비스 한다면 S3를 여러 리전에 두는게 아닌 CloudFront를 적용하면 됨

 

3.1 CloudFront 배포 생성

- 배포할 S3 도메인을 선택하고 새 OAI를 생성한다.

 

3.2 기본 캐시 동작

- Redirect HTTP to HTTPS (HTTP로 접근하는 사용자도 HTTPS 로 redirect 할 수 있도록 해준다)

 

3.3 Origin Shield 활성화

- Origin에 대한 모든 요청이 Shield를 통과하므로 캐시 적중 가능성이 높아지고, 동시 요청 수가 줄어든다.

 

3.4 대체 도메인 이름(CNAME)

- 내 도메인 / www.내 도메인 두개를 등록해주자

 

3.5 설정 - 사용자 정의 SSL 인증서

- 이부분에서 시간을 많이 소모했다..

- 인증서가 us-east-1 리전에 있어야 하는데 설정방법이 따로 없었고, 버킷부터 Route53 까지 다시 만들어줬다.

- 하지만 단순히 우측상단에 리전을 변경하고 인증서를 발급받으니 해결됐다.

(다른 리전에서 발급받으면 아예 뜨지 않는다.)

 

 

3.6 기본값 루트 객체

 

 

---

 

4. CloudFront 도메인을 Route53을 이용해 실제 서비스 도메인으로 Mapping

 

4.1 Route53 접근 - 호스팅영역 - 레코드 생성

- CloudFront 배포에 대한 별칭

- subdomain 에 대해서도 생성해주자

(하나는 subdomain 없이 생성, 하나는 subdomain에 www 써놓고 생성)

 

---

 

5. S3 버킷을 다시 퍼블릭액세스 차단 상태로 변경

 

---

 

 

6. https 접속 확인해보기

 

- 기본 도메인

 

- 서브 도메인

 

- 모두 아래와 같이 React 로 구성한 frontend 가 잘 뜨는것을 볼 수 있다.

---

 

 

여기 까지 구동 아키텍쳐는 아래와 같다.

 

 

끝

 

 

 

 

 

 

References : 

https://velog.io/@kcy8507/Route53-CloudFront%EC%9C%BC%EB%A1%9C-AWS-S3-HTTPS-%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%98%B8%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0

https://techblog.woowahan.com/6217/

https://sleepybird.tistory.com/144