AWS S3 정적 웹호스팅

YOOJIN PARK·2022년 11월 16일
0
post-thumbnail

오늘은 리액트로 만들어진 웹을 aws로 정적 웹호스팅 하려고 합니다.
리액트로 만들어진 웹은 S3로 정적 호스팅을 하는 이유는
우선 처음 사이트에 접근했을때 각자 브라우저에서 파일을 다운받게 되는 구조라
인스턴스에 부담이 없다는 점을 들 수 있습니다.

우리가 무언가를 시작할때 파일을 다운받아서 실행하는 것처럼 처음에 브라우저에서 다운받아 시작하기 때문에 동적으로 리퀘스트를 처리해야하는 부담이 줄어들게 됩니다.
이러한 이유로 리액트와 같은 CSR은 정적 호스팅을 많이 사용하게 됩니다.

우선 본인 계정으로 aws에 들어가서 S3항목으로 들어갑니다.

S3로 들어가면 해당 화면이 나오게 됩니다.
이때 버킷 만들기를 클릭해주세요.

우선 버킷 만들기 화면을 들어가게 되면 여러 정보를 입력하게 됩니다.

버킷이름을 정해주시고, AWS 리전을 선택해 줍니다.
그리고 기존의 버킷과 동일한 설정으로 진행하고 싶다면,
기존 버킷에서 설정 복사하기를 클릭후, 해당 버킷을 선택해주면 자동으로 설정이 들어가게 됩니다.

만일! 기존버킷에서 설정 복사를 하지 않았다면
아래와 마찬가지로 진행해주시면 됩니다.

다음은 버킷 소유권 관련 내용인데, ACL비활성화는 이 버킷을 현재 이용중인 계정이 소유한다는 것이고, ACL 활성화는 이 버킷을 다른 계정이 소유할 수있도록 선택하는 것입니다.

다음은 퍼블릭 액세스 차단 설정입니다.
기본은 모든 퍼블릭 액세스 차단으로 되어 있는데, 우선 앞에서 퍼블릭으로 접근해야 하는 부분이 있어서 진행을 위해 저는 이 부분을 해제하고 진행하겠습니다.

나머지 부분도 필요하신 분들은 태그나 암호를 선택할 수 있지만,
저는 우선은 기본값으로 하고 버킷 만들기를 완료하겠습니다.

버킷이 생성된 이후에는 버킷에 외부에서 도메인을 통해 접근할 수 있도록 약간의 설정을 변경해주어야 합니다.

우선 권한에 들어가서 버킷 정책에서 - 정책생성기를 클릭합니다.
정책 생성기 팝업이 뜨면 해당란들을 체크해 줍니다.

우선 Type of Policy는 우리는 S3에 대한 것이기 때문 S3 Bucket Ploicy 로 선택했습니다.
그리고 Principal의 경우 로 작성하면 모든 부분에 적용되게 됩니다.
Action은 GetObject로 선택하고, ARN은 앞에 있는 arn값을 복사해서 붙여놔줍니다. 이때 끝에 /
붙여주면 해당 버킷안에 모든 파일에 접근하겠다는 의미가 됩니다.(안하면 오류가 뜰 수 도 있어요)

정책생성을 하면 아래와 같은 메모장이 뜨게 됩니다.

그대로 복사해서 정책란에 아래와 같이 붙여넣기 해주시면 됩니다.

변경사항을 저장하고 나오면 이제 정책이 저장 되었습니다.
그리고 올릴 프로젝트의 속성을 설정해 주어야 겠죠?
해당 버킷에서 속성을 클릭해주고, 아래로 쭉 내려서 정적 웹호스팅 - 편집을 눌러 줍니다.

클릭하고 들어가면 해당 편집 페이지가 뜨게 됩니다.

정적 웹 사이트 호스팅 활성화를 누르면 아래에 안보이던 필드들이 보이게 됩니다. 인덱스 문서를 작성해주시고,(보통의 경우 index.html) 에러의 경우 인덱스 문서도 따로 작성해줍니다. 없으시다면 index.html로 작성하면 됩니다.

그리고 저장하고 나옵니다.

그럼 이제 해당 프로젝트를 빌드해주세요. 그리고 빌드파일을 업로드 하면 됩니다.

build 파일을 업로드하고 잠시 기다리면 업로드가 완성 됩니다.

업로드가 성공적으로 완료 되었다면 속성-정적웹호스팅아래 버킷 웹 사이트 엔드포인트로 들어가게 되면 프로젝트가 배포 되신걸 볼 수있으실 거에요!

여기까지 aws s3로 정적 웹호스팅 하는 방법이었습니다.
혹시 틀린점이나 고칠점 있으면 댓글은 언제나 환영입니다:)

profile
개발자를 꿈꾸는 개린이입니다.

0개의 댓글