AWS 엘라스틱빈스톡으로 React 프로젝트 배포하기

벌써 다음주로 다가온 학술제를 준비하기 위해 프로젝트를 배포하기로 했다. 우리 팀은 최종 발표 PPT의 실제 실행 화면 페이지에 배포한 서비스를 직접 체험할 수 있게 QR 코드를 띄워둘 예정인데, AWS 과금이 무서워 최대한 나중에 하기로 했다. 최종 발표 자료 제출은 11월 5일(화)까지고, 이전에 모든 서버 배포를 성공했었기 때문에 금방 할 것이라고 생각하고 전날까지 미뤄왔는데..

리액트 프로젝트 배포 실패

분명 지난 해커톤에 참가하기 위해 리액트 프로젝트를 배포할 땐 그냥 모든 파일을 압축하고 업로드만 하면 됐었다. 그래서 따로 글도 작성하지 않았던 것 같다. 그런데 각종 라이브러리들이 추가됐기 때문이었을까? 아무튼 설정을 계속 바꿔가며 배포를 시도해봤지만 Degraded가 뜨고, 어쩌다가 Ok가 떠도 실제로 들어가보면 원인을 알 수 없는 에러로 아무 것도 할 수 없었다. 그래서 구글링을 하며 새벽까지 삽질을 하게 되었다..

$ npm run build

지금까지는 리액트 프로젝트를 $ npm start 명령어를 통해 실행했다. 하지만 해당 명령어는 개발 모드로 프로그램을 실행하는 명령어라고 한다. 배포 환경에서 사용할 환경을 만들기 위해선 $ npm run build 명령어를 실행해야 한다.

해당 명령어를 실행하게 되면 프로젝트의 루트 디렉터리에 build 디렉터리가 생기고, 해당 디렉터리에 파일에 용량을 줄이기 위해 공백 하나 없이 코드들이 정적으로 압축된 index.html 파일을 포함한 배포할 준비가 된 파일들이 생성된 것을 볼 수 있다.

참고한 블로그는 아래와 같다.

[리액트] package.json 명령어 npm start, npm run build 스크립트 차이점

server.js

리액트 프로젝트 배포를 위한 엘라스틱빈스톡은 기본적으로 Node.js 애플리케이션을 위한 플랫폼이다. 그러기 때문에 위에서 생성한 정적 파일을 제공하는 간단한 Express 서버를 만들었다.

const express = require('express');
const path = require('path');
const app = express();

// 빌드된 정적 파일을 서빙
app.use(express.static(path.join(__dirname, 'build')));

// 모든 경로에 대해 index.html 반환
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

해당 서버는 빌드된 정적 파일을 서빙하고, 모든 경로에 대해 index.html을 반환한다. 또한 엘라스틱빈스톡 환경의 포트 번호인 5000이 .env 파일에 존재하지 않는다면 3000번 포트로 실행되도록 설정했다.

package.json 파일의 start 스크립트 설정

엘라스틱빈스톡은 이러한 Node.js 애플리케이션을 배포하기 위해 $ npm start 명령어를 사용하기 때문에 아래와 같이 package.json 파일의 start 스크립트를 server.js를 실행하도록 수정해야 한다.

"scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    /* 이하 생략 */
}

프로젝트 압축

이제 엘라스틱빈스톡에 배포하기 위해 프로젝트를 압축해야 한다. 필요한 파일들은 build 디렉터리, server.js, package.json, package-lock.json, 그리고 node_modules 디렉터리이다.

node_modules 디렉터리를 포함하면 프로젝트를 받은 사람이 추가적인 설치 과정 없이 바로 실행할 수 있다. 하지만 node_modules 디렉터리는 모든 라이브러리를 전부 저장하기 때문에 용량이 매우 크기 때문에 압축 파일의 크기가 크게 증가하며, 압축 이후에 엘라스틱빈스톡의 업로드 가능한 최대 파일 크기인 500MB를 넘을 수 있기 때문에 관련 문제가 생긴다면 또 다시 구글링을 통해 해결해야 할 것이다.

아무튼 압축을 마친 이후 업로드 및 배포에서 압축한 파일을 선택하고 배포 버튼만 누르면 끝이다.

참고한 사이트는 아래와 같다.

aws elastic beanstalk 배포 - 코딩애플 온라인 강좌

---

결론

리액트 프로젝트를 이전에 사용했던 방법이 아닌 정적 파일로 빌드하여 배포했다. 너무 오래되어서 추가로 설정했던 것이 있었나 긴가민가했지만, 이전에 작성한 글이 없었기 때문에 확신이 없어서 더 오래 삽질을 했던 것 같다.

해당 프로젝트를 제외한 스프링 서버를 배포할 때도 내가 적었던 글을 보면서 진행했는데 관련 내용들이 너무 곳곳에 나눠져있어서 헤맸는데, 시간이 나면 또 다른 나중을 위해 계정을 새로 만들어서 아예 처음부터(!) 배포 총정리 글을 작성해야겠다는 생각이 들었다.