[AWS] React 프로젝트 정적 배포하기

영근·2024년 1월 28일
aws
0

AWS

목록 보기
1/1
post-thumbnail

Deploying a React App on AWS S3, CloudFront & Route 53

2024.1.28.
GeunYeong Kim

개요

1. Route 53 에서 도메인 등록

이번 프로젝트에서는 미리 등록해주신 도메인으로 진행했기 때문에, 따로 방법을 기술하지는 않습니다.
방법은 이 글을 참고하세요.


2. AWS Certificate Manager 인증서 요청

HTTP 프로토콜에 SSL/TLS 암호화 프로토콜을 이용해 전송되는 데이터의 암호화를 진행하는 HTTPS 프로토콜을 위한 인증서

[중요] CloudFront에서 대체 도메인 사용을 하기 위한 인증서를 발급하기 위해서는 우측 상단 지역을 '미국 동부(버지니아 북부)'로 선택한 뒤 인증서를 발급받아야 합니다.

  • 인증서 요청 - 퍼블릭 인증서 요청으로 들어갑니다.

  • 도메인은 {도메인}.com 과 www.{도메인}.com 의 두 가지를 등록합니다.

  • 등록 후에는 아래와 같은 화면이 됩니다.


3. CloudFront 생성

  • AWS CloudFront로 이동한 뒤, '배포 생성'을 클릭합니다.

  • '원본 도메인'에 S3 버킷 엔드포인트를 설정해 줍니다.

  • CloudFront를 통해서만 S3에 액세스할 수 있게 설정을 해줍니다.

    • s3에 직접 접근해서 정적 파일들에 접근하는 것을 보안상 제한하는 설정입니다.
    • 여기서 OAI는 현재(2024년 1월) 기준 레거시로 권장되지 않는다고 합니다.
    • '제어 설정 생성'에서 하나 생성해준 뒤, 생성한 설정을 선택해줍니다.

  • Origin Shield는 캐싱 관련 기능이지만, 추가 과금 항목이므로 '아니오'를 선택해줍니다.

  • 뷰어 설정

    • 뷰어 프로토콜 정책 :프로젝트 정책에 맞게 설정해줍니다.(보통 2번째를 많이 사용한다고 해요)
    • 허용된 HTTP 방법: S3와는 GET, HEAD만 보통 사용하기 때문에 GET, HEAD
    • 뷰어 액세스 제한은 NO를 선택해줍니다.

  • 캐시 키
    • 어떤 걸 기준으로 캐싱할 것인가?(기본은 URL, 그 외에도 header, cookie 등 설정 가능)
    • recommended 된 옵션을 선택한 뒤 넘어갑니다.

  • 대체 도메인 설정

    • 사용할 도메인을 입력하고, Certificate Manager 에서 발급받은 인증서를 선택합니다.

  • 나머지 설정은 기본 값으로 두고 생성을 완료합니다.


4. S3와 연결

  • 방금 생성한 CloudFront 상세에서 상단 '원본'을 클릭한 뒤, 원본을 선택하고 '편집'을 클릭합니다.

  • 아래 버킷 정책에서 '정책 복사'를 클릭해 복사한 뒤, 'S3 버킷 권한으로 이동'을 클릭해 S3로 이동합니다.

  • 다음 S3 버킷 정책에서 '편집' 클릭 후 복사한 정책을 붙여넣기 한 뒤 저장합니다.


Route 53 레코드 생성

  • 호스팅 영역으로 이동한 뒤, '레코드 생성'을 클릭합니다.

  • 레코드 생성

    • 레코드 유형 : A
    • 별칭을 on으로 바꿔준 뒤, 트래픽 라우팅 대상은 'CloudFront 배포에 대한 별칭'을 선택합니다.
    • 위에서 생성해 준 CloudFront를 선택한 뒤 '레코드 생성'을 클릭합니다.

배포 완료 !

Reference

profile
영근
Undefined JS developer

0개의 댓글