aws에 react 배포하기

AWS에서 S3서비스는 스토리지 서버를 제공하는 서비스 입니다. S3는 정적 웹 호스팅을 지원해주기 때문에 이 기능을 사용하여 react 앱을 배포하는 방법입니다.

순서

1. S3 버킷생성

2. 빌드

3. S3에 업로드

1. S3 버킷생성

우선 Amazon S3로 접속한뒤 S3 버킷을 만들기위해 버킷만들기를 눌러주세요

버킷이름은 DNS와 호환할 이름을 정해줍니다. S3에 있는 기존 버킷 이름과 중복 되지 않아야하고, 버킷을 만든 후에 버킷 이름은 변경할 수 없습니다. 자세한 내용은 [S3 버킷 이름 규칙] 을 참고해주세요

버킷이 생성되었다면 버킷에 정적 웹 호스팅을 지정해주어야 합니다.  속성탭에서 '정적 웹 사이트 호스팅'을 선택해주세요

인덱스 문서와 오류 문서에 index.html을 기입한후 저장해줍니다.

이제 권한 설정을 해줘야 합니다.

 권한 탭에서 버킷 정책에 aws에서 제공하는 버킷 정책 예제의 익명 사용자에게 읽기 권한 부여를 사용하겠 습니다. 중요한것은 빨간색으로 명시한 부분은 버킷 생성시 적어넣었던 버킷의 이름을 적어야합니다.

버킷 정잭을 저장하면 '이 버킷에 퍼블릭 액세스 권한이 있음' 이라는 알림과 함께 권한 탭 밑에 퍼블릭이라는 표시가 뜨게 됩니다.

2. 빌드

react 프로젝트를 빌드해줍니다.

npm run build

명령어를 실행하면 프로젝트폴더에 build 폴더가 생성됩니다.

3. 파일 업로드

S3 버킷에 업로드 버튼을 누른후 build폴더안에 있는 파일들을 전부 올려줍니다. 

파일만 올라갈뿐 폴더는 올라가지않습니다. 폴더만들기를 통해 폴더구조를 만들어준후 static 폴더안 파일들도 넣어주었습니다.

이제 웹사이트로서 역활을 하는지 확인해 봅시다. 접속 주소는 index.html을 적었던 정적 웹 사이트 호스팅 설정에서 알 수 있습니다.

해당 주소로 접속 하면 배포하려 했던 react프로젝트가 뜨는걸 확인 할 수 있습니다.