리액트 프로젝트 배포

 

리액트 프로젝트를 그대로 배포하면 용량이 크고 보안 문제가 발생할 수 있다.

 

단지 hello, react만 출력하는 리액트 프로젝트를

웹에서 실행하고 구글 개발자도구에서 네트워크 탭 하단부분을 살펴보면

단지 이것만 출력하는 프로젝트인데...

리액트 프로젝트를 실행하면 아무것도 없는 페이지일지라도 뭔가 잔뜩 실행된다.

2.2 MB 리소스를 다운로드하였다.

이는 리액트가 개발에 용이한 여러가지 기능들을 추가해놓았기 때문이다.

 

이를 해결하기 위해 프로덕션 모드의 애플리케이션을 생성(build) 하여 배포한다.

npm run build

이를 실행하면 builder라는 폴더가 생긴다.

build 폴더가 생성되었다.

이곳에 생성된 index.html 파일을 살펴보면

코드의 내용이 압축된 index.html

코드를 압축시켜 공백을 제거하고 용량을 최소화하였다.

 

임시 웹서버를 설치하고

npx serve

build 디렉터리를 Document Root로 지정하는 옵션을 실행한다.

npx serve -s build

이후 나타나는 주소를 통해 접속을 한 뒤, 리소스를 살펴보면

동작 모습은 같지만 확연히 줄어든 리소스를 발견할 수 있다.