react GitHub 배포하기

 

 

react 연습을 하던 도중 문득 배포를 해보고 싶다! 해서 적어보는 react 배포하는 방법

 

 

1. 깃허브 로그인을 하고 위에 버튼을 누른다.

 

 

 

2. 나는 하위 파일을 만드는거라 그냥 파일 이름을 적었지만 그게 아니라면 파일이름.github.io를 적고 버튼들을 클릭하고 생성한다.

 

 

 

3.  settings -> Pages에 들어가서 Branch를 main으로 바꾸고 sava를 해주면 5-10분 사이에 사이트가 따란-! 만들어진다.

 

 

 

4. 이제 작업중인 파일에 패키지를 설치해줘야한다.

 

npm install gh-pages

 

 

5. 패키지 설치가 끝나면 package.json 파일로 들어가서 아래 부분을 추가한다.

 

"homepage": "만들어진 사이트 URL",
 "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

 

 

6. 수정이 끝난 파일들은 Repository에 업로드 후   npm run deploy  명령어를 실행 후 github pages로 돌아가 branch에  main을 gh pages로 바꾼 뒤 save한다.

 

 

 

7. 최초 배포에는 약간 시간이 걸린다. 5-10분 정도 기다리면 화면이 나온다.

 

 

8. 만약 react-router-dom을 사용하고 있고 화면에 빈 화면만 나온다면 아래 코드를 수정하고 다시  npm run deploy  를 해보자

 

basename={process.env.PUBLIC_URL}

 

!! 이미지나 특정 페이지가 안 나온다면 경로가 잘못된거니 다시 확인해보자