AWS S3로 프론트엔드 배포하기

개발인턴 1주차 React, TypeScript로 프로젝트를 진행하고 있다.

S3는 이전에 토이 프로젝트에 적용한 경험이 있는데, 정리를 안해놔서 그런지 구글링을 해야 했다.

다음에는 더 잘 적용할 수 있게, [AWS S3로 프론트엔드 배포] 한 과정을 정리하고자 작성한다.

AWS 접속 후 로그인을 하고, S3 메뉴로 접속한다.

 

1. S3 버킷 생성

[버킷 만들기] 버튼을 누르고 나서 버킷 이름을 입력한다.

버킷 생성하기

 

나는 엑세스 차단 설정을 제외하고 나머지 항목 다 default 값으로 설정하였다.

나중에 필요한 부분은 편집하여 수정하면 되기에..

 

2. permission 설정

권한 칸에 접속한다. 추후 별도로 필요한 것들만 설정해두면 된다.

퍼블릭 액세스 차단

 

버킷 정책 칸에서 [편집] 버튼을 누른다. [정책 생성기] 버튼을 누른다.

아래와 같은 화면이 새로운 탭 칸에 생성된다.

버킷 정책 생성하기

나 같은 경우에는 일단 아래와 같이 설정하였다.

 

Effect: Allow

Principle: *

Actions: GetObject, PutObject

ARN: arn:s3:::[버킷_이름_작성]/* (모든 객체 다 읽을 경우)

 

4. 빌드 파일 업로드

작업하던 React Vite 빌드하기

npm run dev 명령어를 터미널에 입력한다.

에러 없이 정상 빌드 되면 아래와 같이 뜬다.

빌드 후

빌드 후에 객체 칸의 [업로드] 버튼을 누르고 assets/ 폴더와 index.html 파일을 업로드하면 된다.

객체 업로드

 

5. S3 URL을 통해 배포된 사이트 확인

속성 칸에 들어가서 '정적 웹 사이트 호스팅' 부문에서 엔드포인트 링크를 확인한다.

접속하면 내가 빌드한 파일이 잘 나타나 있을 것이다.

사이트 접속하기

https 설정은 추후에..

 

 

+ 참고자료

개념이 자세히 적혀 있기에 참고하기 좋은 블로그이다.

https://inpa.tistory.com/entry/AWS-%F0%9F%93%9A-S3-%EB%B2%84%ED%82%B7-%EC%83%9D%EC%84%B1-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%8B%A4%EC%A0%84-%EA%B5%AC%EC%B6%95 

[AWS] 📚 S3 개념 & 버킷 · 권한 설정 방법