[리액트] 배포하는 법

애플리케이션을 배포(deploy) 하는 방법을 알아본다.

먼저 지금까지 만든 간단한 리액트 앱을 한번 살펴본다.

크롬 개발자 도구(F12) > [Network] 탭 > 상단 새로고침 버튼에 마우스 우측 클릭 > 메뉴 확인

 

일반적으로는 브라우저는 성능을 높이기 위해 리소스를 내려받아 캐시에 보관해 뒀다가

그 다음에는 같은 리소스를 내려받기 위해 다시 접속하지 않고 앞서 내려받은 리소스를 사용한다.

 + 캐시 용량을 늘리는 이유  : 속도를 높이기 위해서 

    ( 캐시가 남아있으면 인터프리터기가 다시 읽지 않아 속도가 향상된다.)

 

하지만 [캐시 비우기 및 강력새로고침] 버튼을 누르면 캐시를 모두 없애 버린다.

강력 새로고침 한 뒤 [Network] 탭의 하단을 보면 내려받은 리소스의 용량을 볼 수 있다.

 

리소스의 다운로드 용량이 1.8MB나 되는데 리액트가 개발의 편의성을 위해 여러 가지 기능을 추가해 놓았기 때문이다.

 

Create React App에서 앱을 시작할 때 npm run start 명령을 썼는데,

프로덕션 모드(production mode)의 애플리케이션을 만들 때, 

즉 빌드(build) 할 때는 다음 명령어를 사용한다. npm run build

+  '빌드한다' 또는 '배포한다.' 라는 표현은 잘못된 표현이다.
빌드(= 지핑 파일로 만들기) 를 한 후 배포를 하는것이다. 

 

위 명령어를 실행 한 후 새로 생성된 build 디렉터리를 보면 index.html 파일을 볼 수 있다.

 + build 디렉터리에 생성된 index.html 파일 = 지핑파일(=min.js) = 압축된 파일이다. (크기가 10~50배 차이가 난다.)

Create React App이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해 기존 index.html 파일에서 공백과 같이

불필요하게 용량을 차지하는 정보를 삭제하기 때문이다.

 

결론적으로 실제로 앱을 서비스할 때는 build 안에 있는 파일들을 사용해야 한다.

 

이제 실 서버 환경이 완성됐다.

터미널에 출력된 serve -s build 명령은 간단한 웹서버를 통해 빌드된 앱을 실행해 볼 수 있는 명령어다.

여기서 serve는 npm install -g serve 또는 npm serve 명령어를 통해 설치 하고, 

serve를 설치하면 현재 사용중인 컴퓨터 어디에서나 serve라는 명령을 통해 웹 서버를 실행할 수 있다.

 

npm serve를 실행한 결과에서 나오는 브라우저 주소로 접속하면 개발 서버와 같은 앱이 실행되는데,

개발자도구를 열고 [Network]탭을 선택한 다음 페이지를 새로고침하면 하단의 다운로드된 리소스의 크기를 확인할수있다.

 

기존의 크기가 1.8MB에 달했던 데 비해 147KB 밖에 되지 않는다.

 

이와 같이 앱 코딩+실행+배포 의 과정이 하나의 세트이다.