AWS S3와 CloudFront

원도훈·2024년 11월 28일
aws
1
post-thumbnail

AWS S3와 CloudFront를 사용해 React 애플리케이션을 배포하는 것은 매우 효율적이고 강력한 배포 방법입니다. 이 글에서는 S3에 React 프로젝트를 업로드하고 CloudFront를 통해 배포를 최적화하는 전 과정을 안내합니다. 이 가이드를 통해 처음부터 끝까지 독자 스스로 React 프로젝트를 배포할 수 있습니다.

1. AWS S3와 CloudFront 개요

AWS S3란?

S3(Simple Storage Service)는 AWS에서 제공하는 오브젝트 스토리지 서비스로, 데이터를 안전하게 저장하고 빠르게 접근할 수 있도록 합니다. React 애플리케이션의 정적 파일(HTML, CSS, JavaScript)을 S3에 업로드함으로써 간편하게 웹 사이트를 호스팅할 수 있습니다.

AWS CloudFront란?

CloudFront는 AWS의 CDN(Content Delivery Network) 서비스입니다. CloudFront는 전 세계 여러 엣지 로케이션을 활용해 사용자의 요청에 대해 지리적으로 가장 가까운 서버에서 콘텐츠를 제공함으로써 로드 시간을 크게 줄여줍니다. S3와 연동하여 정적 웹 사이트의 성능을 극대화할 수 있습니다.

2. React 애플리케이션 빌드하기

S3에 업로드하기 전에, React 프로젝트를 빌드하여 정적 파일을 생성해야 합니다.

2.1 React 프로젝트 빌드

  1. 터미널을 열고 React 프로젝트 디렉토리로 이동합니다.
  2. 다음 명령어를 입력하여 프로젝트를 빌드합니다:
    npm run build
  3. build 폴더가 생성되며, 이 폴더 안에는 배포할 준비가 완료된 정적 파일들이 들어 있습니다.

3. AWS S3에 버킷 생성하기

3.1 S3 버킷 생성

  1. AWS 관리 콘솔에 로그인하고 S3 서비스를 선택합니다.
  2. 버킷 만들기(Create Bucket) 버튼을 클릭합니다.
  3. 버킷 이름을 입력합니다. 이 이름은 전 세계에서 고유해야 하므로 신중하게 정합니다. 예: my-react-app-bucket
  4. AWS 리전(Region)을 선택합니다. 사용자와 가까운 리전을 선택하여 성능을 최적화할 수 있습니다.
  5. 나머지 설정은 기본값을 유지하고, "버킷 만들기" 버튼을 클릭하여 버킷을 생성합니다.

3.2 정적 웹 사이트 호스팅 설정

  1. 새로 생성한 버킷을 클릭하고, 속성(Properties) 탭으로 이동합니다.
  2. 정적 웹 사이트 호스팅(Static website hosting) 섹션으로 스크롤하고, 사용을 선택합니다.
  3. 인덱스 문서 필드에 index.html을 입력합니다.
  4. 필요하다면 오류 문서(Error document)에 404.html을 입력합니다.
  5. 설정을 저장합니다.

4. React 빌드 파일 S3에 업로드하기

  1. 버킷으로 돌아가서 "업로드(Upload)" 버튼을 클릭합니다.
  2. build 폴더 내의 모든 파일과 폴더를 선택하여 S3 버킷에 업로드합니다.
  3. 업로드가 완료되면 S3 버킷에 React 애플리케이션의 모든 정적 파일이 저장됩니다.

5. 퍼블릭 액세스 설정 변경하기

5.1 퍼블릭 액세스 차단 해제

  1. 권한(Permissions) 탭으로 이동하여, 퍼블릭 액세스 차단 설정(Public access settings)에서 모든 퍼블릭 액세스 차단을 해제합니다.
  2. 변경 사항을 저장하고 확인합니다.

5.2 버킷 정책 설정

  1. 버킷 정책(Bucket Policy) 섹션으로 이동합니다.
  2. 모든 사용자가 버킷의 객체에 접근할 수 있도록 아래의 정책을 추가합니다:
    {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-react-app-bucket/*"
    }
  ]
}
  3. "my-react-app-bucket"을 실제 버킷 이름으로 바꿔야 합니다.

6. CloudFront 설정하기

S3에 파일을 업로드했으므로, 이제 CloudFront를 설정해 사이트 성능을 극대화합니다.

6.1 CloudFront 배포 생성

  1. AWS 관리 콘솔에서 CloudFront 서비스를 선택합니다.
  2. 배포 생성(Create distribution) 버튼을 클릭합니다.
  3. 원본 도메인(Origin Domain Name)에 S3 버킷을 선택합니다.
  4. 나머지 설정은 기본값을 사용하거나 필요에 따라 조정합니다.
  5. "배포 생성(Create distribution)" 버튼을 클릭하여 CloudFront 배포를 시작합니다.

6.2 CloudFront 배포 완료 후 엔드포인트 확인

  1. 배포가 완료되면 CloudFront에서 제공하는 도메인 이름(Domain Name)을 통해 React 애플리케이션에 접근할 수 있습니다.
  2. 이 도메인 이름을 사용하여 애플리케이션을 배포하고 사용자에게 제공할 수 있습니다.

7. HTTPS 적용하기

CloudFront는 기본적으로 HTTPS를 지원합니다. 이를 통해 웹 사이트를 더 안전하게 만들 수 있습니다.

7.1 AWS Certificate Manager(ACM)에서 SSL 인증서 생성

  1. AWS Certificate Manager(ACM)으로 이동하여 SSL 인증서를 생성합니다.
  2. 도메인 이름을 인증하고, 생성된 인증서를 CloudFront 배포에 연결합니다.

7.2 CloudFront에 SSL 인증서 연결

  1. CloudFront 배포 설정에서 대상(Viewers) 섹션을 수정하여 HTTPS를 강제합니다.
  2. ACM에서 생성한 SSL 인증서를 연결하여 HTTPS를 사용하도록 설정합니다.

8. 테스트 및 배포 완료

CloudFront 도메인 이름을 통해 웹 사이트가 정상적으로 배포되었는지 테스트합니다. 모든 파일이 제대로 로드되고 HTTPS로 안전하게 연결되는지 확인합니다.

마무리

이제 AWS S3와 CloudFront를 사용하여 React 애플리케이션을 성공적으로 배포할 수 있습니다. 이 과정은 정적 웹 사이트를 효율적으로 배포하고, CloudFront를 통해 전 세계 어디에서나 빠르게 콘텐츠를 제공할 수 있도록 해줍니다. 배포 후에는 항상 사이트의 성능과 보안을 점검하여 최상의 사용자 경험을 제공하세요.

이 가이드를 통해 스스로 React 프로젝트를 클라우드에 배포해보세요! 😊

profile
원도훈
개발
이전 포스트

AWS S3로 웹 프로젝트 호스팅하기

다음 포스트

CloudFront

0개의 댓글