[AWS] AWS S3 리액트 정적 웹 호스팅 하기

 리액트 프로젝트를 AWS S3를 활용하여 정적 웹 호스팅 하기

---

관련 포스팅

1. AWS S3 리액트 정적 웹 호스팅 하기

2. AWS S3 CloudFront(CDN)-S3 정적 웹 호스팅 하기

3. AWS AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기

4. [Git Actions] React 프로젝트 AWS S3 CloudFront 자동배포 하기

---

버킷 생성

 

 

 

버킷 이름 설정

버킷 이름 : dalkom-web

 

객체 소유권 설정

ACL 비활성화됨

 

• ACL 활성화
  • ACL이 활성화되어 있을 때, 각 파일이나 리소스에 대해 개별적인 액세스 권한을 설정
  • 특정 사용자나 그룹에게만 접근을 허용하거나, 공개적으로 접근 가능
  • 웹 사이트의 특정 섹션을 특정 사용자에게만 공개하거나, 관리자 페이지를 관리자에게만 접근 가능하게 하는 것이 가능합니다.

• ACL 비활성화
  • 파일이나 리소스에 대한 개별적인 접근 권한 설정이 불가능
  • 대신 모든 파일과 리소스는 호스팅 설정에 따른 일괄적인 접근 권한을 따르게 됩니다
  • 웹 사이트의 모든 부분을 공개적으로 접근 가능하게 하거나, 전체 사이트에 대한 접근을 제한하는 경우에 사용됩니다

 

 

 

퍼블릭 엑세스 차단 설정

S3와 함께 CloudFront를 사용할 예정입니다

보안을 위해 모든 퍼블릭 액세스 차단을 해줘야 하지만

지금은 S3로만 정적 웹 호스팅이 잘 되는지 확인하기 위해 차단을 해제 하겠습니다.

 

*추후 CloudFront 연동에서 다시 차단하겠습니다.

 

 

 

 

버킷 버전 관리

버킷 버전 관리 활성화

버킷 버전 활성화를 하면 버킷에 저장된 모든 버전의 객체를 모두 보존, 검색 및 복원할 수 있습니다.

장애로부터 더 쉽게 복구할 수 있으므로 활성화 해줍니다.

 

 

 

 

 

버킷 버전 관리

Amazon S3 관리형 키(SSE-S3)를 사용한 서버 측 암호화

이 방식은 AWS S3 에서 관리하는 키를 사용하여 암호화하는 방법입니다.

S3 managed data key는 S3에 의해 완전히 소유되고 관리 됩니다.

AES-256 알고리즘을 이용해 암호화 합니다.

 

 

 

 

 

버킷 생성 완료

 

 

 

 

버킷에 프로젝트 업로드

이제 리액트에서 빌드한 파일을 S3 버킷에 올려보겠습니다.

 

 

 

 

스토리지 클래스 설정

 

스토리지 클래스는 높은 처리량과 낮은 지연 시간을 제공해주고 웹 호스팅시 많이 사용하는

Standard를 사용하겠습니다.

 

 

 

 

 

정적 웹 사이트 호스팅

 

속성 → 정적 웹 사이트 호스팅에서 정적 웹 사이트 호스팅을 활성화 합니다.

인덱스 문서는 리액트 빌드된 파일에 있는 index.html을 기본 페이지로 지정합니다.

 

 

버킷 엔드 포인트 주소 확인

 

활성화 완료시 버킷 엔드포인트 주소를 확인할 수 있습니다.

해당 URL로 접속을 해보겠습니다.

 

 

 

 

 

 

버킷 권한 설정

 

해당 엔드포인트로 접속 시 403 Forbidden 에러가 뜹니다.

버킷에 접근 가능하도록 버킷 정책에 접근 권한 설정을 해주지 않아서 입니다.

 

 

 

 

 

버킷 정책 편집

 

 

 

버킷 정책에 해당 코드를 추가해줍니다.

모든 사용자가 지정된 S3 버킷 안의 모든 객체를 검색할 수 있도록 허용해주는 정책입니다.

 

 

 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1654095607580",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{생성한 버킷 명 넣어주기}/*"
        }
    ]
}

 

 

 

짜잔 웹 호스팅이 잘 되었네요~

 

 

 

 

다음 포스팅에서는 S3를 CloudFront와 연동을 진행해 보겠습니다.

 

다음 포스팅 : AWS S3 CloudFront(CDN)-S3 서비스를 사용하여 리액트 프로젝트 정적 웹 호스팅

AWS S3 퍼블릭 액세스 차단 , CloudFront OAC로 S3 버킷 접근 설정하기