[React]리액트 프로젝트 build 및 Github Page로 배포하기
리액트 프로젝트에는 state, JSX, SASS 등의 파일이 포함되어 있어 브라우저가 해석할 수 없습니다. 이러한 프로젝트를 build하여 브라우저가 해석할 수 있는 html, css, js 파일로 변경합니다. 이렇게 build된 프로젝트를 Github Page로 배포할 수 있습니다.
배포하기 전 체크 사항
1. 콘솔창, 터미널에 에러가 있는지 체크
warning의 경우 사이트 구동시에 큰 영향을 주지 않기 때문에 무시하셔도 괜찮습니다.
2. 사이트를 하위 경로로 배포할 경우
https://www.saichoiblog.com/ 이렇게 배포하실 경우 설정을 따로 할 필요가 없으나 만약 https://www.saichoiblog.com/category 이런식으로 하위 경로에 배포하실 경우 별도의 설정이 필요합니다.
주소 설정하는 방법
리액트 프로젝트의 package.json 파일 오픈하여 “homepage” 키값을 추가한다.
build 하기
터미널에서 아래와 같은 명령어를 실행한다.
방법1. yarn build
방법 2.npm run build
build가 성공하면 프로젝트 내에 build라는 폴더가 생성된다. 이 폴더를 서버에 올리면 브라우저가 해석할 수 있는 사이트를 만들 수 있다.
Github Page 배포하기
Github Page 생성
1.Github repository 생성
2.build 파일 업로드
3.Github Page 생성
4.20분 정도 후에 만들어진 페이지에 접속한다.
흔한 Github Page 404 에러
- 호스팅 후 시간이 얼마 지나지 않았을 때(10분 정도 대기)
- 새로고침이 되지 않았을 때
- 레파지토리 생성 문제
- 주소 잘못 적었을 때
리액트 프로젝트 배포시 팁
1. 첫 페이지 속도 빠르게 하기
리액트로 만든 웹앱은 첫 방문시 필요한 파일을 전부 로드한다. 로드시 트래픽을 줄이기 위한 방법으로 lazy 로딩 방법이 있다.
2. 사이트 업데이트가 생긴 경우
build를 다시 해서 다시 그 파일을 업로드 하면된다. build 할 때마다 css, js 파일명이 무작위로 생성되기 때문에 build 파일을 통째로 다시 업로드하는 것이 좋다.
3. 빌드시 압축하고 싶지 않을 경우
./ 경로로 시작하는 경로로 첨부한 이미지나 js 파일들은 빌드시 파일명이 변경된다. 파일명이 변경되지 않게 하기 위해서는 public 폴더 안에 넣고 빌드한다.
