리액트 프로젝트 git 배포

https://cocoon1787.tistory.com/831

[GitHub] 리액트 프로젝트 GitHub Pages에 호스팅하기

 

1. git 저장소 생성

 

2. 올릴 리액트 프로젝트 터미널에 차례대로 작성

git init // 프로젝트에 git 설치
git add -A // 해당 프로젝트 폴더 내의 파일 전부 올리기
git commit -m "first commit" // commit 메시지 작성
git remote add origin https://github.com/K-Junyyy/Portfolio.git // 원격저장소 설정
git push origin master // master로 push

 

3. npm install gh-pages --save  프로젝트에 gh-pages 설치

 

4. package.json파일에 

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


맨 하단 hompage추가
"homepage": "https://깃허브계정이름.github.io/레포지토리이름/"

 

5. npm run deploy 실행

 

6. 레포지토리 setting-pages에서 브랜치를 gh-pages로 변경

 

 잘 안될 때 체크리스트

• homepage 주소 맨 뒤에 ("/")를 입력하였는지
• 레포지토리는 public으로 설정되었는지
• remote add로 원격 저장소와 연결하였는지
• gh-pages 브랜치에 build 파일이 올라가 있는지
• 배포 후 바로 접속하면 흰 화면에 404 에러 발생. 배포 후 페이지 뜨는데 시간이 좀 걸림(필자의 경우 3~5분)
• 그래도 안된다면 npm run deploy 한번 더 실행
  
  BrowserRouter 사용 시 basename 사용
  <BrowserRouter basename={process.env.PUBLIC_URL}>