[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” 키값을 추가한다.
![](https://www.saichoiblog.com/wp-content/uploads/2021/12/스크린샷-2021-12-21-오전-11.57.31.jpg)
build 하기
터미널에서 아래와 같은 명령어를 실행한다.
방법1. yarn build
방법 2.npm run build
build가 성공하면 프로젝트 내에 build
라는 폴더가 생성된다. 이 폴더를 서버에 올리면 브라우저가 해석할 수 있는 사이트를 만들 수 있다.
![](https://www.saichoiblog.com/wp-content/uploads/2021/12/스크린샷-2021-12-21-오후-12.01.23.png)
Github Page 배포하기
Github Page 생성
1.Github repository 생성
![](https://www.saichoiblog.com/wp-content/uploads/2021/12/스크린샷-2021-12-21-오후-12.04.05.png)
![](https://www.saichoiblog.com/wp-content/uploads/2021/12/스크린샷-2021-12-21-오후-12.13.01.jpg)
2.build 파일 업로드
3.Github Page 생성
4.20분 정도 후에 만들어진 페이지에 접속한다.
흔한 Github Page 404 에러
![](https://www.saichoiblog.com/wp-content/uploads/2021/12/스크린샷-2021-12-21-오후-12.17.43.png)
- 호스팅 후 시간이 얼마 지나지 않았을 때(10분 정도 대기)
- 새로고침이 되지 않았을 때
- 레파지토리 생성 문제
- 주소 잘못 적었을 때
리액트 프로젝트 배포시 팁
1. 첫 페이지 속도 빠르게 하기
리액트로 만든 웹앱은 첫 방문시 필요한 파일을 전부 로드한다. 로드시 트래픽을 줄이기 위한 방법으로 lazy 로딩 방법이 있다.
2. 사이트 업데이트가 생긴 경우
build를 다시 해서 다시 그 파일을 업로드 하면된다. build 할 때마다 css, js 파일명이 무작위로 생성되기 때문에 build 파일을 통째로 다시 업로드하는 것이 좋다.
3. 빌드시 압축하고 싶지 않을 경우
./ 경로로 시작하는 경로로 첨부한 이미지나 js 파일들은 빌드시 파일명이 변경된다. 파일명이 변경되지 않게 하기 위해서는 public 폴더 안에 넣고 빌드한다.