AWS S3 - React app 배포하기

어떻게 배포할까

문득 react 로 만든 앱을 어떻게 배포했었지?.. 기억을 잃은 듯한 느낌을 받았다. 오늘은 AWS S3 를 활용해서 웹호스팅을 해보자!

 

1. Create react app & build

# react app 만들기
$ npx create-react-app react-app
 
# /react-app
$ npm run build

React app 을 만들고 build 해주면 build 폴더가 생성되고 그 안에 static 폴더와 index.html 을 포함해 필요한 파일들이 생성된다.

 

2. AWS S3 버킷 만들기

 

AWS S3 콘솔에서 Create bucket 을 클릭해서 새로운 버킷을 만들어준다.

버킷 이름은 중복될 수 없다

 

3. S3 설정하기

 

생성된 버킷을 클릭하고 상단의 Properties 탭에서 Static website hosting 또는 정적 웹사이트 호스팅을 클릭한다.

 

 

그럼 아래와 같이 선택하고 index.html 을 입력하고 Save 한다. 여기서 Endpoint 가 배포된 react-app 의 주소값이다.

 

 

다음으로 Permissions 탭으로 넘어가서 Block public access 에서 "Block all public access" 설정을 해제하고 Save 한다.

 

 

저장되면 다음 Bucket Policy 로 이동해서 Policy 를 만들어준다.

 

 

하단에 위치한 Policy generator 를 클릭하면 아래와 같은 새창이 열린다. Actions 에서는 GetObject 라는 것을 선택하면 되고, ARN 은 화살표처럼 버킷이름과 키이름을 입력하고 Add Statement 를 클릭한다.

 

 

아래와 같이 statement 가 추가된 걸 확인 할 수 있다. 그럼 이제 Generate Policy 를 클릭.

 

 

JSON 으로된 Policy 가 열리면 해당 JSON 파일을 복사한다.

 

 

위에서 복사한 JSON Policy 를 아래와 같이 Bucket Policy 에 붙여넣기 하고 Save 한다. 아마 Save 가 되면 경고가 뜰텐데 S3 를 public 접근하도록 했기 때문에 알려주는 것이다. 넘어가자. 

 

4. Static 파일들 업로드하기

 

이제 마지막이다. 상단의 Overview 탭으로 가서 아까 생성했던 build 폴더에 있는 모든 파일을 드래그애서 업로드하자.

 

5. 배포 끝

 

자, 이제 Endpoint 로 접속하기만 하면, 짠!!

 

" 참 쉽죠? 배포하러 고고씽! "