[0419] (페어) AWS - 도메인 연결과 CDN 및 HTTPS 적용

Prerequisite

• Sprint1인 HTTP 배포를 완료해야 합니다.
• HTTPS에 대한 이해와 학습이 선행되어야 합니다.
• AWS Route53을 통해 구매한 도메인이 있어야 합니다.

Bare Minimum Requirements

• HTTPS로 웹 애플리케이션을 배포할 수 있어야 합니다.
• CloudFront, Certificate Manager, Elastic Load Balancer, Route53 등의 서비스에 대해서 이해합니다.
• 모든 테스트를 통과하고, 제출해야 합니다.

Getting Started

• HTTPS를 적용하기 위해서는 어떤 아키텍처와 어떤 AWS 서비스가 필요한지 구상합니다.
  • 구상한 내용을 draw.io 등을 이용해 다이어그램으로 그리고, 해당 이미지파일을 S3에 httpsdiagram 이라는 이름으로 업로드합니다.
  • 이때 해당 객체에 대한 퍼블릭 액세스를 허용해야 테스트를 통과할 수 있습니다.
• .env파일에 HTTPS 적용을 위한 환경설정으로 적절하게 작성합니다.
• npm run test2 명령을 사용해 테스트가 통과하는지 확인합니다.
• 실제로 웹 애플리케이션이 브라우저 상에서 HTTPS 프로토콜로 작동하는지 확인합니다.

 

3. 프론트엔드 CDN 및 HTTPS 적용

• Origin Domain을 설정해야 합니다.
• Viewer protocol policy는 Redirect HTTP to HTTPS로 지정해야 합니다.
• Certificate Manager에서 발급받은 인증서를 사용해야 합니다.
• Default root object 부분에 index.html을 작성해야 합니다.
• 대체도메인과 인증 받은 도메인의 이름이 같아야 합니다.
• 생성된 배포의 Distribution domain name으로 접속이 되는지 확인합니다.
• 아래 레퍼런스를 참조하여, 스프린트를 진행합니다.

 

4. Route53 레코드 등록

• 백엔드와 프론트엔드의 별칭 레코드를 Route53 호스팅 영역에 생성합니다.
• 백엔드는 https://api.yourdomain.click으로 접속 시, 로드밸런서로 연결되어야 하며, 프론트엔드는 https://www.yourdomain.click으로 접속 시, Cloudfront로 연결되어야 합니다.

---

Elastic Load Balancer 생성

https에 적용할 것이기 때문에 Application Load Balancer로 생성한다

internet-facing: 외부 접속 허용

최소 2개의 지역을 설정해준다

기존에 만들어둔 보안그룹으로 설정하고 리스너 설정을 해준다

엔지니어님은 443만 해도 된다고 하셨는데 80도 열어야 접근이 되던데,, 알아봐야겠다

CloudFront 생성

찾아봤던 글에서는 리스트에서 선택하지 말고 버킷 주소 복사해오라고 했는데 그렇게 하면 접근이 안됐었다

웹사이트 엔드포인트를 사용하지 않고 리스트에서 버킷을 골라서 생성했다 아래 사진이랑 다름.!!

Redirect HTTP to HTTPS로 설정해준다

가격 분류를 뭐로 해야되는지 모르겠는데 두번째가 제일 저렴해보여서 저걸로 했다

대체 도메인을 넣어주고 인증서를 선택해준 후 배포 생성해준다

근데,, 오류가 떴다 왜?!



찾아보니 발급받은 인증서에 도메인을 제대로 설정을 안했었다

ks001.click만 등록하고 *.ks001.click는 등록을 안한 것,,

인증서를 추가로 발급 받았더니 해결됐다

CloudFront의 DNS 주소로 접속했을 때 S3로 정상접근 되는 것을 확인할 수 있다!

내가 생성한 주소로 접근하기 위해 Route 53에서 레코드 생성을 해준다

www로 접근하기 위한 레코드에는 CloudFront의 DNS 주소를 넣어줬다

api로 접근하기 위한 주소는 ELB의 DNS 주소를 넣어줬다

www 주소를 통해 https가 제대로 적용되고 접근 가능한 것을 볼 수 있다!

api 링크도 정상 접근 가능한 것을 볼 수 있다

test1 test2 모두 통과! 

그리고 우리가 만든 다이어그램~ ㅎ

www.ks001.click  링크로 접속하면 CloudFront를 통해 S3에 접근하고

S3는 ELB를 이용하여 EC2에 접근한다는 생각으로 만들었다 (지금 생각해보니 이게 좀 어색한 것 같다 흠)

AWS Certificate Manager로 CloudFront와 ELB에 인증 권한을 넘기고

EC2와 RDS는 연결이 되어 있는 구조..

사람을 제일 열심히 만들었다 귀엽죠?