[Sprint] 도메인 연결과 CDN 및 HTTPS 적용

by

# 학습 목표

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

# 해결 과제

  • HTTPS를 적용하기 위해서는 어떤 아키텍처와 어떤 AWS 서비스가 필요한지 구상합니다.
  • .env파일에 HTTPS 적용을 위한 환경설정으로 적절하게 작성합니다.
REACT_APP_API_URL="https://[EC2 DNS].click"
S3_ADDRESS="http://[Bucket_Name].s3-website.ap-northeast-2.amazonaws.com"
HTTPS_ADDRESS="https://[Domain].click"
ELB_DNS_ADDRESS="http://[ELB_Public_DNS].ap-northeast-2.elb.amazonaws.com"
HTTPS_ARCHITECTURE_IMAGE="https://pckbucket.s3.ap-northeast-2.amazonaws.com/%ED%83%9C%EA%B2%BD%EC%B0%AC%EA%B7%9C_3Tier_diagram.jpg"
  • npm run test2 명령을 사용해 테스트가 통과하는지 확인합니다.
  • 실제로 웹 애플리케이션이 브라우저 상에서 HTTPS 프로토콜로 작동하는지 확인합니다.

# 실습 자료

sprint-aws

# 과제 항목별 진행 상황

✏️ 1. Certificate Manager를 통한 도메인 인증서 발급

  • 구매한 도메인을 기준으로 인증서를 발급 받습니다.
  • 인증까지 최소 30분의 시간이 소요될 수 있습니다.

✏️ 2. 백엔드 HTTPS 적용

  • 애플리케이션 로드밸런서(Application Load Balancer)를 생성합니다.
  • ALB의 리스너, 가용영역, 인증서를 설정합니다.
  • 대상 그룹(target group)을 등록합니다.
  • 로드밸런서 DNS 주소로 접속해, 테스트를 진행합니다.

✏️ 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로 연결되어야 합니다.

# TROUBLE SHOOTING LOG

💡 ACM에서 인증서 요청이 30분이 지나도 발급되지 않음

원인

CNAME 레코드를 생성을 하지 않음

해결 방안

CNAME 레코드를 생성하여 해결

💡 SSL 인증서를 발급했으나 ALB에서 인증이 되지 않는 현상

원인

ACM 에서 인증서 발급시 도메인명을 tkops.click 으로 발급받아 ALB 리스너에 추가하였으나,

ALB 의 도메인은 Route 53 의 api.tkops.click 레코드에 등록되어 있으므로 인증이 되지 않음.

해결 방안

ACM 에서 *.tkops.click 으로 와일드카드 인증서를 발급 받아 ALB 리스너에 추가하여 해결

💡 ALB 접속시 접속이 되지 않고, TimeOut 이 발생하는 현상

원인

ALB 생성시 VPC default 보안 그룹을 할당해, HTTPS 트래픽을 수신하지 못함.

해결 방안

새로운 보안 그룹을 생성해 HTTPS 트래픽을 허용하고 ALB 에 할당하여 해결

💡 S3 -> EC2 호출시 ERR_NAME_NOT_RESOLVED

원인

도메인 : bigheadck.click ~/client/.env

REACT_APP_API_URL="https://api.bigheadck.click"
S3_ADDRESS="http://pckbucket.s3-website.ap-northeast-2.amazonaws.com"
HTTPS_ADDRESS="https://bigheadck.click"
ELB_DNS_ADDRESS="http://WAS-968684666.ap-northeast-2.elb.amazonaws.com"
HTTPS_ARCHITECTURE_IMAGE="https://pckbucket.s3.ap-northeast-2.amazonaws.com/%ED%83%9C%EA%B2%BD%EC%B0%AC%EA%B7%9C_3Tier_diagram.jpg"

해결 방안

  1. S3의 환경변수 중 REACT_APP_API_URL 값이 api.bigheadck.click 으로 했어야 했는데

위와 같이 'ck' 를 뺀 api.bighead.click으로 되어있었음 우분투 환경에서 해당 변수를 수정하고 S3 다시 수차례 업로드 진행을 해왔지만 계속 첨부된 이미지 처럼 응답을 받았음

  1. S3의 리소스가 원본데이터인데 이를 가르키는 서비스가 CloudFront 이므로 CloudFront를 의심하며 접근
  2. 비활성화 후 재활성화 = 해결안됨
  3. CloudFront 재배포 = 해결 안됨
  4. 구글링으로 다른 원인 탐색
  5. AWS 서비스 중인 웹사이트를 운영중인데, 이미지를 변경하거나 추가경로를 생성하여 홈페이지에 변화를 주었는데도 내 브라우저의 캐시를 날리고 사이트에 접속해도 이전 상태가 보일 경우 CDN의 캐시를 무효화(Infalidation)을 해주어야 반영이 되며, CDN의 TTL을 조절하여 설정하는 방법이 있고 바로 하는 방법은 CDN 캐시 무효화 하는 방법

# 피드백

오태경박찬규
처음으로 아키텍처 구성도를 그려보면서 많은 고민을 하게됐고, 각 리소스의 영역을 구분하면서 VPC, 서브넷, 가용영역에 대한 이해도가 많이 올라갔다.오타로 인해 캐시 무효화까지 학습하게 되어 좋긴하지만 다음부터는 오타 조심하겠습니다

#References

Leave a Comment