1. DNS
DNS
**DNS(Domain Name System)**는 도메인 이름을 IP 주소로 변환해주는 시스템입니다. 도메인 이름은 사람이 읽기 쉬운 주소를 제공하지만, 컴퓨터는 IP 주소를 통해 서로 통신합니다. DNS는 사용자가 도메인 이름을 입력하면 이를 서버의 IP 주소로 변환하여 해당 서버와 통신할 수 있도록 해줍니다.
IP
**IP(Internet Protocol)**는 네트워크 상의 장치들이 서로를 인식하고 통신하기 위해 사용하는 주소 체계입니다. IP 주소는 특정 서버나 컴퓨터를 유일하게 식별하며, 네트워크의 "주소" 역할을 합니다.
Port
**포트(Port)**는 서버 내에서 특정 서비스나 애플리케이션을 식별하기 위해 사용되는 숫자입니다. 예를 들어, 웹 서버는 일반적으로 포트 80(HTTP) 또는 **포트 443(HTTPS)**를 사용합니다. 포트는 하나의 IP 주소에서 여러 서비스를 구분하기 위해 사용됩니다.
S3, CloudFront, DNS를 사용한 아키텍처 구성과 흐름
- S3는 정적 웹 콘텐츠를 저장하는 원본 서버 역할을 합니다.
- CloudFront는 S3의 콘텐츠를 전 세계적으로 빠르게 제공하기 위해 사용됩니다. CloudFront는 S3에서 콘텐츠를 캐싱하고 사용자가 가까운 엣지 로케이션을 통해 콘텐츠에 접근할 수 있도록 합니다.
- DNS는 사용자로부터의 요청을 CloudFront로 라우팅하여 사용자가 도메인 이름을 통해 CloudFront에서 제공하는 콘텐츠에 접근할 수 있도록 해줍니다. 예를 들어, Route 53과 같은 DNS 서비스를 사용하여 사용자가 입력한 도메인 이름을 CloudFront 배포의 도메인으로 연결합니다.
무료 도메인 서버의 한계점
무료 도메인 서버는 비용이 들지 않으므로 초기 프로젝트나 개인 프로젝트에서 사용하기에 유용합니다. 하지만 다음과 같은 한계가 있습니다:
- 신뢰성 부족: 무료 도메인은 만료 기간이 짧거나 도메인 소유권을 지속적으로 보장하지 않는 경우가 많습니다.
- SSL 지원 부족: 무료 도메인은 HTTPS 인증서 설정에 제한이 있을 수 있어, 보안에 취약할 수 있습니다.
- 기능 제한: 고급 기능이나 설정을 제공하지 않아, 커스터마이징이나 비즈니스 용도로는 적합하지 않을 수 있습니다.
2. CloudFront에서의 코드 업데이트 방법
CloudFront에서의 코드 업데이트 방법
- S3 버킷에 파일 업데이트: CloudFront의 원본으로 사용하는 S3 버킷에 새로운 빌드 파일을 업로드합니다. 기존 파일을 교체하거나 새로운 파일을 추가합니다.
- CloudFront 캐시 무효화(Invalidation): CloudFront는 기본적으로 콘텐츠를 엣지 로케이션에 캐시합니다. 따라서 변경된 파일을 사용자에게 즉시 제공하려면 캐시를 무효화해야 합니다.
- AWS 관리 콘솔에서 CloudFront 배포로 이동하여 **무효화 요청(Invalidation Request)**을 생성합니다.
- 특정 파일 경로나 전체 경로를 지정하여 무효화할 수 있습니다. 예를 들어,
/*를 입력하면 모든 캐시된 콘텐츠를 무효화합니다.
- 배포 확인: 캐시 무효화가 완료된 후, CloudFront 도메인을 통해 변경된 콘텐츠가 올바르게 반영되었는지 확인합니다.
- 브라우저 캐시도 지우고 확인하여 최신 콘텐츠가 로드되는지 점검합니다.
3. 배포된 React 프로젝트에 도메인 연결하는 방법
AWS를 이용해 배포된 React 프로젝트에 도메인을 연결하는 방법에 대해 설명합니다. 이 가이드를 따라가면 스스로 처음부터 끝까지 도메인 연결을 완료할 수 있습니다.
3.1 도메인 구매 및 설정
- 도메인 구매: 먼저 도메인 등록 기관(예: GoDaddy, Namecheap 또는 AWS Route 53)에서 도메인을 구매합니다.
- Route 53에 도메인 등록: AWS의 Route 53을 사용해 도메인을 등록하거나, 다른 기관에서 구매한 도메인을 Route 53으로 옮깁니다.
3.2 호스팅 존(Hosted Zone) 생성
- AWS 콘솔에서 Route 53 서비스로 이동합니다.
- "호스팅 존 생성(Create Hosted Zone)"을 클릭하고, 구매한 도메인 이름을 입력합니다.
- 생성된 호스팅 존을 통해 도메인과 관련된 네임서버(NS) 및 SOA 레코드를 확인할 수 있습니다.
3.3 S3와 CloudFront 연결 설정
- CloudFront 배포 설정: 이미 배포된 React 애플리케이션이 있는 CloudFront 배포의 설정으로 이동합니다.
- 대체 도메인 이름(Alternate Domain Name - CNAME) 추가: CloudFront 배포 설정에서 대체 도메인 이름 항목에 연결하고자 하는 도메인 이름을 추가합니다. 예:
www.myreactapp.com - SSL 인증서 설정: HTTPS 연결을 위해 **AWS Certificate Manager(ACM)**에서 SSL 인증서를 생성하고, 이를 CloudFront 배포에 연결합니다.
- 도메인 인증을 위해 이메일 인증 또는 DNS 레코드 설정을 통해 인증 절차를 완료합니다.
3.4 Route 53에서 DNS 레코드 설정
- Route 53 콘솔로 이동하여 도메인에 해당하는 호스팅 존으로 들어갑니다.
- "레코드 생성(Create Record)" 버튼을 클릭하여 A 레코드를 생성합니다.
- **별칭(Target)**을 CloudFront 배포의 도메인 이름으로 설정합니다. 이렇게 하면 사용자가 입력한 도메인 이름이 CloudFront로 라우팅되도록 설정됩니다.
3.5 최종 테스트
- 도메인 연결이 완료되면, 브라우저에서 도메인 이름을 입력하여 React 애플리케이션이 정상적으로 로드되는지 확인합니다.
- HTTPS를 통한 안전한 연결 여부도 확인하여 보안이 잘 설정되었는지 점검합니다.
이 가이드를 통해 도메인 연결 과정 전체를 이해하고 직접 수행할 수 있습니다. Route 53과 CloudFront를 활용하면 React 프로젝트를 안정적이고 빠르게 사용자에게 제공할 수 있습니다.
개발