📌리액트 앱 깃헙 배포하기

1. 깃 데스크탑을 통해 new repo를 함 (깃헙 데스크탑을 통해!! 해야함, 나중에 관리 어려워짐)

 

2. new repo로 만들어진 폴더안에서 아래 코드로 리액트 설치

npx create-react-app .

 

* 버전 낮다고 오류뜨면 최신버전으로 생성 

npx create-react-app@latest .

 

3. npm start로 잘 나오는지 확인 (바이탈 오류뜨면 그 파일 찾아서 삭제)

 

4. 깃헙에 페이지 셋팅 main 과 docs 로 변경 <기존 root에 하면 복잡해짐

 

 

 

 

 

5. 코드 파일에서 bulid 를함 (이 파일들이 배포에 필요한 파일이 됨)

npm run build

 

위에서 docs로 변경했기 때문에 bulid라고 생긴 폴더명을

docs로 바꿈

OR

이게 매번하기 번거로우면

애초에 빌드시 docs 폴더 안에 만들어지도록 설정함 (이러면 run bulid 했을때 폴더명이 docs가 됨)

* 방법 : 최상위 파일에 .env 라는 폴더 만들어서 아래 코드 삽입

BUILD_PATH=docs

 

빌드 했는데 docs로 생김ㅇ

 

 

 

 

6. 위에거까지 push 하면 시간이 조금 지나서 깃헙 페이지에 사이트로 가는 경로가나옴

이 경로를 package.json 에  "homepage"라는 코드를 넣어 복붙해줌

  "homepage":"https://ㅇㅇㅇ.github.io/bmpo_react/",

 

7. 다시 빌드하고 push 하면 깃헙에 나옴

* 다시빌드 하기전에 테스트할때 homepage부분 주석하면 오류걸림. (테스트 할 시, 아예 코드지우고 해야함)