내맘대로 frontend 낙서장

React로 만든 플젝 GItHub Pages로 배포하기 본문

react

React로 만든 플젝 GItHub Pages로 배포하기

deadeye 2023. 4. 4. 01:12

Vue랑은 또 다른 배포방법 까먹지 않게 남겨둡니다...

만들고 배포한 Url : https://hyunjunyong.github.io/react-study/

 

gh-pages 패키지는 사용안함 -> 해보니깐 안되서

 

1. 일단 repository가 public으로 되면 안됨 사이트 개설해야 되기 때문(유료버전쓰면 모르겠다만은..)

 

2. package.json에 밑에 처럼 추가 ㄱㄱ

{
	"homepage": "https://hyunjunyong.github.io/react-study",
}

이건 내url이니깐 이걸보는사람이 있으면(있을까) 자신의 github page url을 남겨 놓으시길...

 

3. react-router를 쓰고 있으면 index.js에 다음과 같이 추가

<BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
  
// process.env.PUBLIC_URL은 2번에 설정한것과 같은 url임

 

4. npm run build 

 

5. .gitignore파일에서 /build부분 찾아서 지우던지 주석처리하던지 ㄱㄱ

 

6. 그다음 add commit push ㄱㄱ

 

7. 이제 배포해야되기 때문에 build폴더만을 쓸 branch를 만들고 거기에 넣을꺼임

git subtree push --prefix build/ origin gh-pages

 

8. 이제 github repository에 들어가서  settings -> pages 밑에처럼 설정하면 끝

 

끝 뭐 별거 없다 간단