S3를 사용하여 프론트 서버 배포하기👊

 

만든 프로젝트를 배포하기 위해 서버는 보통 프론트 서버와 백엔드 서버로 나눈다.

 

프론트서버는 웹페이지를 렌더링하는데 필요한 HTML, CSS, JS 파일을 브라우저에게 전송하는 역할을 한다.

 

백엔드 서버는 웹페이지에서 필요한 동적인 데이터를 생성하고 전송하는 역할을 한다.

 

우리가 만든 웹페이지를 배포하면 해당 파일들은 프론트 서버에 올라가고

홈페이지를 들어가기 위해 URL을 입력하면 프론트 서버에서 저장된 파일을 불러오게 된다.

 

그렇다면 프론트 서버를 구축하고 배포하는 방법에는 무엇이 있을까?

 

 

• S3와 CloudFront:
  • React로 빌드한 정적 파일(HTML, CSS, JavaScript)을 S3 버킷에 업로드합니다.
  • CloudFront를 설정해 S3의 콘텐츠를 전 세계로 빠르게 배포하고, SSL 인증서를 적용하여 HTTPS를 지원할 수 있습니다.
• EC2에 프론트엔드 서버 추가:
  • 백엔드와 마찬가지로 EC2에 프론트엔드 애플리케이션을 배포할 수도 있습니다.
  • 이 방법은 프론트엔드가 정적 파일이 아닌 SSR(Server-Side Rendering) 애플리케이션이라면 유용할 수 있습니다.
• Elastic Beanstalk:
  • 서버를 통해 프론트엔드를 배포해야 하고, EC2 인스턴스 관리 작업을 최소화하고 싶다면 Elastic Beanstalk도 좋은 선택입니다.
• Amplify:
  • AWS Amplify는 빠르게 프론트엔드 배포를 지원하는 서비스입니다. S3와 CloudFront를 함께 사용하고, 자동화된 배포 파이프라인을 제공합니다.

---

 

본 포스팅에서는 S3와 CloudFront 를 사용하여 프론트 서버를 구축해보겠습니다.

 

1. S3에 React 애플리케이션 업로드

1-1 React 애플리케이션 빌드

터미널에서 프로젝트 디렉토리로 이동한 후, 배포를 위한 빌드를 생성합니다

npm run build

build 폴더가 생성되며, 이 폴더에 배포할 정적 파일들이 들어 있습니다.

 

1-2 S3 버킷 생성

S3 버킷을 생성하기 이전에 S3는 무엇인가?

Amazon S3(Simple Storage Service)는 AWS에서 제공하는 클라우드 스토리지 서비스입니다.
파일, 이미지, 비디오 같은 데이터를 인터넷을 통해 저장하고 접근할 수 있게 해주는 서비스로,
주로 정적 웹사이트 파일이나 백업 데이터, 미디어 파일을 저장하는 용도로 많이 사용됩니다.

 

AWS Management Console에서 S3로 이동하여 버킷을 생성합니다.

버킷 이름은 고유해야 하며, 이후 CloudFront에서 사용하므로 기억해 두세요.

ACL(Access Control List)은 접근 제어 목록을 의미하며,
시스템이나 네트워크, 데이터에 대한 접근 권한을 관리하는 규칙 목록입니다

 

퍼블릭 액세스 차단 설정에서 모든 차단 옵션을 해제해야 합니다.
(보안 설정은 CloudFront에서 처리할 것이므로 S3 자체에선 퍼블릭 액세스를 허용해야 합니다.)

버킷 버전관리에서 비활성화를 체크해줍니다.

이렇게 화면에 나오면 버킷 생성이 완료 된 것입니다.

 

1-3 버킷 정책 생성

버킷을 생성하였다면 버킷 정책을 생성해줘야합니다. 아래 사이트에 들어간 뒤

 

http://awspolicygen.s3.amazonaws.com/policygen.html

AWS Policy Generator

 

• Select Type of Policy: S3 Buckey Policy
• Effect: Allow
• Principal: *
• Actions: GetObject (조회만 가능하도록 getObject 권한만 체크했습니다.)
• Amazon Resource Name (ARN): arn:aws:s3:::{버킷이름}/*

다 수정하셨으면 Add Statement 버튼을 클릭해주세요.

생성된 정책을 확인하고 Generate Policy 버튼을 클릭하고 나온 Json 값을 복사합니다.

 

 

버킷 정책 적용을 위해 AWS에서 생성한 버킷을 클릭합니다.

 

 

버킷에서 권한 > 버킷 정책 편집 을 클릭합니다.

 

위에서 복사한 JSON 값을 붙여넣고 변경 사항 저장을 클릭합니다.

 

 

1-4 객체 업로드

버킷 → 객체 → 업로드

아무사진이나 업로드 한 후 올린 객체를 클릭하고 속성 → 객체 URL 클릭합니다.

사진이 업로드 된 것을 확인할 수 있습니다.

 

---

2. CloudFront 설정

1. CloudFront 배포 생성
   AWS Management Console에서 CloudFront로 이동하여 배포 만들기를 클릭합니다.
   • 오리진 도메인에 S3 버킷을 선택합니다.
   • 오리진 접근에서 "원본 액세스 ID(OAI)"를 사용하도록 선택하여, S3 버킷에 직접 접근을 제한하고 CloudFront를 통해서만 접근할 수 있도록 합니다.
   • 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS로 설정하여 HTTP 요청을 HTTPS로 리디렉션합니다.
2. 캐시 정책 설정
   • 기본 캐시 동작에서 Cache Policy를 선택하고, 표준 캐시 정책(Managed-CachingOptimized)을 선택합니다.
3. 배포 완료 후 CloudFront 도메인 확인
   CloudFront 배포가 완료되면 도메인 이름이 생성됩니다. 이 도메인 이름을 통해 S3에 있는 정적 웹 사이트를 HTTPS로 안전하게 접근할 수 있습니다.

3. 테스트

CloudFront 도메인 이름을 브라우저에서 입력하여 애플리케이션이 정상적으로 표시되는지 확인하세요.

이 방법으로 S3와 CloudFront를 통해 React 프론트엔드를 안전하고 빠르게 배포할 수 있습니다.