[React] (3) 배포의 의미(Release, Deploy, Distribute)와 배포(Deploy)해보기

배포의 의미

 

프로그래밍에서 배포는 3가지의 단어로 나뉘어져있다.

 

 

Release: 같은 제품을 새롭게 만드는 것(예: 새로운 버전을 배포, 새로운 아이피 번로 부여)

 

Deploy: 프로그램 등을 서버와 같은 기기에 설치하여 서비스 등을 제공하는 의미

 

Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미

 

 

이번 포스팅에서는 React를 Deploy하는 방법을 배워볼 것이다.

 

---

 

1. npm run build

  아래 명령어를 입력하게 되면 build 파일이 생긴다 이곳에는 2장에서 여러개로 나뉜 파일들이 필요한 것들만 하나로 소스코드까지 줄여주면서 컴팩트하게 만들어준다.

npm run build

  알아보기는 힘들지만 이렇게 줄여준다.

 

 

2. nxp serve -s bulid

  아래 명령어의 뜻은 serve라는 웹서버를 생성해서 실행시킬 때 build를 document root로 하겠다는 뜻이다. 여기서 만들어진 localhost:5000은 실행시킬때 용량이 적다.

npx serve -s build

 

  아래는 그냥 localhost:3000일 때다 2.1MB를 불러올 때 쓰는데 엄청난 용량이라는 것을 알 수 있다. 그래서 우리는 배포 후에 사용자들을 위한 서버가 따로 열리기 위해 위 코드를 쓰는 것이다.

개발자 실행

  아래에 보면 localhost:5000에는 602kb만 사용한다는 것을 알 수 있다. 배포 후 사용자들이 사이트를 읽을 때 아래 페이지를 읽기 때문에 적은 용량으로 사이트를 여는 것을 확인 할 수 있다.

배포후 사용자들을 위한 실행