본문 바로가기
Web Development/AWS

[ AWS ] Amazon S3를 이용한 React 앱 배포하기

by Krystal K 2023. 7. 27.

Amazon S3를 이용한 React 앱 배포하기

[Index]

1. AWS란?

2. Amazon S3란?

3. Amazon S3를 통해 사이트를 배포하는 과정

4. 느낀점


1. AWS란?

AWS(Amazon Web Services)

아마존 웹 서비스는 클라우드 컴퓨팅 및 서비스 제공 플랫폼으로, 기업과 개발자에게 다양한 IT 서비스를 제공합니다.  기업과 개발자에게 확장 가능하고 안정적인 인프라를 제공합니다. AWS의 다양한 보안 서비스와 IAM을 통해 안전한 클라우드 환경을 구축할 수 있습니다. AWS는 선택적으로 사용 가능한 클라우드 인프라로 비용 절감과 전 세계적으로 안정적인 서비스를 제공합니다. CloudWatch를 활용하여 AWS 리소스의 상태를 모니터링하고 로깅, 경보를 통해 효율적인 운영이 가능합니다. AWS는 지속적인 업데이트를 통해 클라우드 컴퓨팅 분야에서 선도적인 역할을 수행하고 있습니다.

 

2.  Amazon S3란?

Amazon Simple Storage Service(S3)는 Amazon Web Services(AWS)의 클라우드 기반 객체 스토리지 서비스입니다. S3는 사용자가 웹을 통해 언제 어디서나 안전하게 파일을 저장하고 검색할 수 있는 확장 가능하고 내구성 있는 스토리지를 제공합니다. 정적 웹 사이트 호스팅을 지원하여 직접 웹 서버를 구축하고 호스팅하는 작업을 진행하지 않아도 웹사이트를 배포할 수 있습니다.

 

Amazon S3의 주요 특징과 기능

  1. 객체 스토리지: S3는 객체 기반 스토리지 시스템으로, 파일, 이미지, 비디오 등 다양한 종류의 데이터를 저장할 수 있습니다.
  2. 무한한 확장성: S3는 필요에 따라 저장 용량을 동적으로 조정할 수 있어, 무제한의 확장성을 제공합니다.
  3. 데이터 내구성과 가용성: Amazon S3는 여러 데이터 센터에 데이터를 복제하여 내구성과 가용성을 높입니다. 이를 통해 데이터의 손실 없이 안정적인 서비스를 제공할 수 있습니다.
  4. 다양한 권한 및 접근 제어: S3는 사용자가 객체에 대한 액세스를 제어할 수 있는 다양한 권한 및 접근 제어 옵션을 제공합니다. 이를 통해 데이터 보안을 강화할 수 있습니다.
  5. 버킷: S3에서 데이터는 버킷이라는 단위로 저장됩니다. 버킷은 S3에 데이터를 저장하는 컨테이너 역할을 합니다.
  6. 버전 관리: S3는 객체의 버전을 관리할 수 있는 기능을 제공합니다. 이를 통해 이전 버전의 객체를 복원하거나 비교할 수 있습니다.
  7. 라이프사이클 관리: S3는 데이터의 수명주기를 관리할 수 있는 기능을 제공합니다. 이를 사용하여 자동으로 데이터를 이동하거나 삭제함으로써 비용을 절감할 수 있습니다.
  8. 이벤트 알림: 객체에 대한 변화(생성, 삭제 등)에 대한 알림을 구성하여 이벤트 기반의 작업을 수행할 수 있습니다.

장점

  1. 확장성과 신뢰성: Amazon S3는 높은 확장성을 제공하며, 대규모 데이터를 안정적으로 저장할 수 있습니다. Amazon S3는 여러 데이터 센터에 걸쳐 데이터를 분산 저장하므로 신뢰성이 높습니다.
  2. 빠른 전송 속도: Amazon S3는 Amazon의 글로벌 네트워크를 이용하므로 빠른 파일 전송 속도를 제공합니다. 이는 웹 사이트의 로딩 속도를 향상시키는 데 도움이 됩니다.
  3. 비용 효율성: Amazon S3는 사용한 만큼만 비용을 지불하도록 설계되어 있습니다. 필요한 만큼의 저장 공간을 사용하고 데이터 전송에 대해서만 비용을 지불하므로 비용을 효율적으로 관리할 수 있습니다.
  4. 간편한 관리: Amazon S3는 사용자 친화적인 웹 콘솔을 통해 쉽게 관리할 수 있습니다. 버킷을 만들고 파일을 업로드하는 것이 간단하며, 접근 권한 등을 세밀하게 제어할 수 있습니다.
  5. 정적 웹 호스팅 지원: Amazon S3는 정적 웹 호스팅을 지원하므로, 단순한 웹 페이지나 정적 콘텐츠를 호스팅하는 데 적합합니다.

단점

  1. 동적 콘텐츠 처리의 한계: Amazon S3는 정적 콘텐츠를 주로 다루는데 적합하며, 동적 콘텐츠 처리에는 한계가 있습니다. 따라서 동적 콘텐츠를 처리해야 하는 웹 애플리케이션의 경우에는 추가적인 서비스가 필요할 수 있습니다.
  2. 보안 설정의 주의가 필요: 적절한 보안 설정이 이루어지지 않으면 데이터 노출이 발생할 수 있습니다. AWS Identity and Access Management(IAM)을 통한 적절한 권한 관리가 필요합니다.
  3. 데이터 용량 초과시 비용 증가: 일정한 데이터 용량을 초과할 경우 추가 비용이 발생할 수 있습니다. 따라서 데이터 사용량을 지속적으로 모니터링하고 필요에 따라 조정해야 합니다.
  4. 서버리스 아키텍처의 제약: Amazon S3는 주로 정적 콘텐츠를 호스팅하는 데 사용되지만, 서버리스 아키텍처를 구축하려면 AWS Lambda와 같은 다른 서비스와 조합하여 사용해야 합니다.

 

 

3. Amazon S3를 통해 사이트를 배포하는 과정

1.  앱 빌드 생성하기

npm run build로 빌드 생성하기

정상적으로 생성이 완료되면 아래와 같이 build 디렉토리가 생성됩니다.

호스팅하게 될 정적 컨텐츠입니다.

 

 

2. Amazon S3로 배포하기

2-1 AWS S3 Bucket 생성

AWS S3에서 버킷 만들기

 

 

생성하려는 버킷의 고유 이름을 작성합니다. ( 글로벌 값이기 때문에 중복되지 않도록 합니다)

 

퍼블릭 엑세스를 허용을 변경합니다.

그럼 버킷이 생성됩니다.

 

 

 

2-2 Bucket에 빌드한 프로젝트 올리기

 

업로드를 눌러서 빌드한 폴더를 업로드합니다.

빌드 폴더 안의 파일 구조 그대로 올라가도록 합니다.

 

 

2-3 정적 웹 호스팅 활성화

속성에서 정적 웹 사이트 호스팅을 수정해줍니다.

호스팅이 잘 되었는지 확인합니다.

 

2-4 Bucket Policy 추가

Bucket 내에 존재하는 Object, 즉 정적 파일들에 대한 접근 정책을 작성하지 않았기 때문에 Access Denied라는 문구와 함께 에러창이 뜹니다.

권한 > 버킷 정책 편집에서  Policy를 입력해줍니다.

 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "s3GetObject",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": "arn:aws:s3:::BucketName/*"
    }
  ]
}

 

 

정책까지 설정을 완료하고 다시 돌아와 버킷 웹 사이트 엔드포인트로 접근하면 배포한 사이트를 볼 수 있습니다.

 

 

4. 느낀점

처음으로 프로젝트 사이트를  배포하는 경험을 해보았습니다. 첫 팀프로젝트를 진행하며 로컬로만 보던 사이트를  S3를 통해 배포해 팀원들과 공유하니 감회가 새로웠습니다. 정적 호스팅이 가능하고 버킷 생성 과정이 어렵지 않아 비교적 손쉽게 사이트를 배포할 수 있었습니다. 확실히 비용적인 축면에서 효율적이라 부담이 없었고, 프로젝트 업로드부터 배포 후 까지전반적인 관리가 용이하다고 느꼈습니다. 안정성 문제와 관련해서는 추가적인 보완이 필요하다는 생각을 했습니다. 

 

728x90