AWS CloudFront와 Route 53을 활용한 도메인 연결 및 HTTPS 설정

코딩로그·2025년 4월 2일
0

DNS (Domain Name Service) 개념과 작동 과정

DNS

  • 도메인 이름을 IP 주소로 변환해주는 시스템
  • 사용자가 웹사이트 주소를 입력하면, 해당 도메인이 실제 서버의 IP 주소로 변환되어 웹사이트 콘텐츠를 요청하고 불러올 수 있게 함
  • 예시: 사용자가 google.com이라고 입력하면 DNS는 이를 IP 주소(예: 8.8.8.8)로 변환하여 연결

IP 주소와 Port

  • IP: 인터넷에서 장치나 서버의 위치를 나타내는 고유한 주소

  • Port: 특정 IP 내에서 여러 애플리케이션이나 서비스를 구분하기 위한 번호

  • Well-Known Port : 잘 알려진 포트

    • 포트 번호는 0~65,535까지의 포트까지 사용 가능
    • 0~1023까지의 포트 번호는 주요 통신 규약에 따라 정해져 있는 포트
    • 22번 (SSH): 원격 접속을 위한 포트 번호
    • 80번 (HTTP): HTTP 프로토콜로 통신할 때 사용
    • 443번 (HTTPS): HTTPS 보안 통신을 위한 포트

Route 53과 CloudFront 설정

Route 53

  • 도메인 이름을 관리하는 서비스

  • 도메인 구매 및 DNS 레코드를 설정하는 곳

  • A 레코드와 CNAME 레코드를 설정하여 트래픽을 지정된 서버로 전달하는 역할

CloudFront

  • 콘텐츠 전송 네트워크(CDN)로, 전 세계적으로 사용자에게 더 빠르게 콘텐츠를 제공하는 역할

  • S3 버킷에 저장된 콘텐츠를 CloudFront 엣지 서버에 캐시하여 빠르게 전달

DNS시스템이 적용된 웹사이트 아키텍처

클라이언트

  • 사용자가 브라우저에서 www.example.com과 같은 도메인으로 접속

Route 53 (DNS)

  • 사용자의 도메인 요청을 받아 어떤 리소스로 연결할지 결정
  • 여기서 설정되는 것이 바로 A 레코드 또는 CNAME 레코드
    • A 레코드: example.com → IP (CloudFront)
    • CNAME 레코드: www.example.com → d123.cloudfront.net
  • CloudFront 도메인을 이 CNAME에 연결하여 사용자 도메인을 매핑

CloudFront (콘텐츠 전송 네트워크 - CDN)

  • 사용자에게 더 빠르게 콘텐츠를 전달하기 위한 중간 캐시 서버
  • 정적 파일을 S3 버킷에서 가져와 전 세계 엣지 로케이션에 캐싱
  • 첫 요청은 S3에서 가져오고, 이후는 캐시된 데이터를 제공

S3 (정적 웹 호스팅 저장소)

  • 실제 정적 웹사이트 파일(HTML, CSS, JS 등)을 저장한 공간
  • 퍼블릭 액세스를 막고, 오직 CloudFront에서만 접근하도록 설정하는 게 일반적

[실습] 도메인 발급받고 웹사이트 배포하기

무료 도메인 발급

무료 도메인 사이트 접속 후 로그인

🔗내도메인 한국

원하는 도메인 검색

도메인 정보 설정

  • IP연결 (A 레코드)
    • A 레코드는 도메인 이름을 IP 주소와 연결해주는 설정
    • example.com → 123.456.78.90 (이 IP 주소가 서버)
  • 별칭(C NAME 레코드) :
    • CNAME은 다른 도메인 주소로 연결시킬 때 사용하는 방식
    • www.example.comd123abc.cloudfront.net
      • 즉, "www.example.com은 사실상 cloudfront 도메인이야" 라는 의미
    • 사용자 친화적인 도메인으로 바꾸고 싶을 때 CNAME을 사용
      • 실제 CloudFront 주소: d1234abcd.cloudfront.net
      • 사용자 도메인: cdn.mysite.com
      • 설정: cdn.mysite.com → CNAME → d1234abcd.cloudfront.net

무료 도메인 서버의 한계

무료 도메인은 초기 비용을 절감할 수 있고 간단한 블로그나 테스트 용도로는 적합하나, 제공 업체에 소유권이 귀속되어 도메인을 잃을 위험이 있으며, 브랜드 신뢰도나 SEO 측면에서 불리할 수 있음

CloudFront 세팅 및 도메인 연결

CloudFront 배포 설정

  • Alternate Domain Name (CNAME) 설정: 사용할 도메인 주소를 삽입
  • SSL 인증서 적용

    Amazon Certificate Management에서 인증서 발급 필요, SSL 인증서 설정

배포 완료

  • 구매한 도메인으로 접속하면 아래와 같이 배포 성공

SSL 인증서 설정

AWS Certificate Manager에서 인증서를 발급받고, 이를 CloudFront에 연결하여 HTTPS를 적용

certificate manager에서 인증서 발급

  • Request a certificate (인증서 요청)

  • 퍼블릭인증서 요청 (Request a public certicicate)

  • Domain names에 구매한 도메인 oz-practice.p-e.kr주소 입력

  • 인증서 발급 절차 완료

  • AWS에서 SSL 인증서 (HTTPS 적용)를 하기 위해 도메인 소유권 확인 절차가 필요

    • oz-practice.p-e.kr 도메인에 HTTPS(보안 연결)를 적용하려고 할 때, AWS는 해당 도메인에 대한 소유권이 있는지 확인을 요구함

    • 확인 방법 : CNAME 레코드를 DNS에 추가하는 것

    • 이를 위해 CNAME value 제공 (AWS 인증서에서 확인 가능)

      항목설명
      CNAME name인증을 위한 서브 도메인 (자동 생성됨)
      CNAME valueAWS가 제공한 인증값 (우리가 붙여야할 주소)
      도메인 사이트 (가비아, 카페 24 등)CNAME을 설정하는 곳
    • 도메인 사이트에서 CNAME 설정

      • AWS에서 보여준 CNAME name / value 복사

      • 도메인 관리 페이지 (예: 가비아, 카페24, 호스팅케이알 등)에 접속

      • DNS 관리에서 CNAME 레코드 추가
        - 왼쪽 빈 칸에 name, 오른쪽 빈 칸에 value

  • 해당 사항 저장하고 기다리면 SSL 발급 완료

Cloud Front 코드 업데이트 방법

새롭게 수정된 React 프로젝트는 S3 버킷에 업로드 된다. 하지만 해당 변경사항이 바로 Cloud Front에 실시간으로 적용되지 않는다.

수정된 React 프로젝트 파일 업로드

수정한 React 프로젝트를 저장하고 새로 build 명령어 실행

npm run build

배포한 Cloud front와 연결된 S3에 새로운 파일 업로드

  • 기존의 파일 삭제
  • 새롭게 build된 파일들 업로드
  • s3의 도메인에서는 변경사항 반영

    수정한 React 프로젝트를 저장하고 새로 build 명령어 실행

npm run build

배포한 cloud front와 연결된 s3에 새로운 파일 업로드

  • 기존의 파일 삭제

  • 새롭게 build된 파일들 업로드

  • S3의 도메인에서는 변경사항 반영

  • Cloud front에서는 반영 X

  • 왜 안될까?

    • 실시간 동기화가 안됨 (s3 서버 - 클라우드 프론트 저장소)
    • 일정 시간이 지난 후 업데이트가 반영

S3 업데이트 사항을 강제로 반영하기 위해 Cloud front 설정

Cloud front에서 무효화 생성

객체 경로에 모든 변경 사항을 강제로 수용하도록 ‘/*’를 삽입하고 무효화 생성

업데이트 완료

무효화 자동화 : CI/CD (자동배포)

CI/CD 자동화

  • 앱 개발 단계에 자동화를 통합하는 앱 제공 방식

  • 자동 배포를 위해 CI/CD 파이프라인을 사용하여, 애플리케이션 업데이트 시 자동으로 CloudFront 캐시 무효화와 파일 업데이트가 이루어지도록 설정할 수 있음

profile
hello world!

0개의 댓글