travisCI를 이용해 REACT 빌드 및 S3에 배포하기

배경

이전에 API서버인 스프링프로젝트는 EC2에 배포한 바 있었다. 이번엔 정적 페이지만을 구성하는 프론트 웹페이지를 S3에 배포해보자. 그런데 EC2와 같은 서버에 배포해야 맞는 것 같은 프론트 서버를 단지 파일서버인 S3에 배포해 접근하는 게 가능할까? 딥하게 가면 아직 이해하지 못하니 간단하게 이미 만들어진 html파일만 S3에 올리고 서비스하는 방식으로 이해하자.

 

 

S3버켓 만들기

원하는 이름과 리전을 선택하고 누구나 접근할 수 있도록 해야하기 때문에 퍼블릭 액세스 차단을 모두 풀어 놓고 나머지는 놔둔 상태로 버켓을 생성하자.

 

버켓에 들어간 뒤 속성에서 정적 웹 사이트 호스팅을 편집하자 활성화를 누르면 인덱스 문서를 설정할 수 있는데 리액트의 기본 인덱스 파일은 index.html이므로 따로 바꾸지 않았다면 index.html을 적는다.

 

 

마지막으로 권한으로 들어가서 버켓 정책을 편집한다. json으로 작성할 수 있는데 아래와 같이 작성한다. 본인도 복붙한 내용이라 자세히는 모르지만 직관적으로 현 버켓에 대한 요청을 허용하는 의미 같다.

 

이제 기본적인 준비는 끝났다. 사실 이 상태에서 리액트를 build한 뒤 build폴더 의 하위파일을 전부 버켓에 업로드하면 브라우저를 이용해 정적웹페이지에 접근할 수 있다. 다만, 이 방식은 수정 -> 빌드 -> 업로드라는 상당히 까다로운 과정을 거쳐야 하며 특히 S3에 빌드한 파일을 드래그 후 업로드하는 작업이 매우 귀찮다. 이를 github push만으로 자동화해보자

 

 

travis CI를 이용해 자동화

우선 github 리포지토리를 만들어 작업 중인 디렉토리와 연결한다. 이후 travis CI계정에서 해당 리포지토리를 활성화해준다(이 과정을 자세히 설명하는 건 생략) 이후 적절한 .travis.yml파일 작성 후 push하면 모든 게 해결된다.

 

미리 만들어둔 IAM 키를 travisCI에 저장하고 위 스크립트를 적어준다. 주의할 사항은 npm test를 진행하면 오류가 난다는 점과 deploy시 현재 브랜치가 가능하도록 해줘야 한다는 점이다.