일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 컴퓨팅사고
- 삼성코딩테스트
- 코딩테스트
- BFS
- 그리디
- 자료구조
- 코테 문제
- tflite
- TensorFlow Lite
- tinyml
- 임베디드 딥러닝
- 코테
- dfs
- DP문제
- bfs문제
- 포스코 교육
- 초소형머신러닝
- 다이나믹프로그래밍
- DP
- MCU 딥러닝
- 삼성역테
- sort
- 딥러닝
- 영상처리
- 삼성코테
- 포스코 ai 교육
- dfs문제
- 포스코 AI교육
- 삼성역량테스트
- 알고리즘
- Today
- Total
코딩뚠뚠
[AWS] 카톡분석 프로젝트-6 / S3 정적웹호스팅에 https 적용 본문
이전장에서는 AWS S3 bucket을 이용한 정적 웹호스팅까지 진행해보았다.
하지만 정적 웹호스팅을 위해서는 퍼블릭엑세스를 허용해줘야돼서 보안에 구멍이 생긴다.
따라서 보안향상을 위해 이번 포스팅에서는 https를 적용해보고자 한다.
S3 버킷에 보안 설정이 필요한 이유
- https 가 아닌 http 통신을 해야되기 때문
- 버킷이 퍼블릿 공개라는 점
- 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 :
'공부 > AWS' 카테고리의 다른 글
[AWS] 카톡분석 프로젝트-8 / React useNavigate (1) | 2022.06.19 |
---|---|
[AWS] 카톡분석 프로젝트-7 / React 라우터 사용 (2) | 2022.06.14 |
[AWS] 카톡분석 프로젝트-5 / S3 이용한 정적웹호스팅 (0) | 2022.06.05 |
[AWS] 카톡분석 프로젝트-4 / React 연동 파일 업로드 (1) | 2022.06.05 |
[AWS] 카톡분석 프로젝트-3 / S3 trigger로 Lambda 호출 (1) | 2022.06.04 |