[코딩애플;React] React를 github으로 배포하기

- 리액트의 경우 파일을 그대로 올리지 않고 build용 파일을 생성하고 올려야함

: 웹브라우저는 오직 html, css, js만 해석할 수 있기 때문.

 

1.배포 전 체크할 사항

-터미널과 콘솔창에 에러가 뜨지 않는지 (warning 메세지 제외)

 

-사이트 배포 시 하위 경로( http://codingapple.com/blog/ ->요런 느낌)로 배포하고 싶으면 

packge.json에

"homepage": "http://codingapple.com/blog",

 

위의 코드 추가

만약 리액트 라우터가 설치되어 있다면 라우터가 제공하는 basename="" 속성 추가하기

 

2. 터미널에 build 명령어 입력하기

 

npm run build

 

작업 프로젝트 폴더 내에 build 폴더 생성됨

->요거를 github에 올리면 됨.

 

 

3.github에 배포하려면

https://yunmee0704.tistory.com/99

투두리스트[valila JS] 완료 표시, 추가, 삭제,수정 기능구현+git으로 배포(+수정한내용)

하단 참고

 

4.tips

-첫 페이지 로딩 속도를 빠르게 하려면

: 모든 리액트와 뷰로 만든 웹앱은 첫 방문할 때 모든 필요한 파일을 로드하느라 시간이 걸리는데 이 시간을 줄여서 더 빠르게 하려면 lazy함수를 사용해보자

https://ko.legacy.reactjs.org/docs/code-splitting.html#reactlazy

코드 분할 – React

 

-build하면 ./로 시작되는 경로로 첨부한 js,이미지 파일은 이름이 변하므로 이것이 싫다면 public폴더 안에 넣고  / 경로로  import하여 사용하고 bulid.

 

-서버에 올린 후 이상한 페이지가 나오거나 일부 img,css파일이 로드가 안되면 build시 에러가 안났는지, 하위폴더에서 배포한 것은 아닌지, 파일들의 경로가 잘 되어있는지 체크할 것.