깃허브 리액트 배포하기 & 리액트 라우터 배포하기

안녕하세요 홍가 입니다.

 

오늘은 깃허브 리액트 배포를 해보려고 합니다.

 

리액트는 html로 배포하는 것과 다르게 설정을 줘야 하는데요

 

페이지 Branch를 설정해 주면 사이트가 생성이 됩니다.

 

하지만 리액트 및 넥스트 등등 을 사용하시면 사이트가 생성이 돼도 

 

리드미 부분이 보이게 됩니다.

왜냐면 최상위파일에 html로 된 파일이 없으면 README를 보여준다고 하네요.

 

이제 리액트 파일에 설정을 줘봅시다 

npm install gh-pages

설치 후 

package.json

"script": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
}

"homepage": "https://아이디.github.io/레포지토리 이름/"

설정을 다 해주셨으면

 

npm run deploy

입력 후 

 

이렇게 나오시면 성공입니다.

 

gh-pages로 설정을 해주시고 새로고침 후 조금만 기다려 주시면 창이 잘 나오게 됩니다.

 

리액트 라우터를 사용하시는 분들이 많으실 텐데 

 

basename={process.env.PUBLIC_URL}

를 넣어주시고 

 

npm run deploy

 

하신다면 정상작동이 됩니다.