[Github Pages] 리액트 프로젝트 깃허브 페이지로 배포하기🌟

개요

맨날 로컬에서만 개발하면서 화면공유해서 진행상황을 공유했었는데ㅎㅎ,,, 

프론트 결과물을 수시로 다른 파트 분들이 확인할 수 있게 적당히 배포할 필요성을 느꼈다.

아직 EC2 파서 배포해본 경험이 많지는 않아서 깃헙 페이지로 배포해보기로 했다.

html 처음 공부할 때였나 한 번 배포해보려다가 실패한 기억이 있었어서 어려운 줄 알았는데 진짜 겁나 쉬웠다.. 버튼 3번 클릭 정도?ㅠㅠ 

 

배포하기! 

일단 레포지토리 만들어서 프로젝트에 연결하셔야 해요! 

저는 이미 레포 파놨어서 이건 생략할게요. 

 

git remote add origin 링크복붙

git add .

git commit -m 브랜치명

 

하시면 됩니당

 

그 다음부터 차근차근 하시면 돼요~!

 

1. 프로젝트 폴더 가서 npm install --save gh-pages

 

2. package.json 가서 밑에 있는 코드처럼 predeploy, deploy, homepage를 추가해주세요.

"deploy" : gh-pages -d build는 깃허브 페이지에 build 폴더를 배포하겠다는 의미이고, 

"predeploy" : "npm run build" 는 배포하기 전에 build가 안 되어 있다면 npm run build 부터 하겠다는 의미입니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "homepage": "http://깃헙아이디.github.io/레포지토리 이름",

 

3. npm run build 

predeploy를 설정해두었기 때문에 생략하셔도 됩니다.

 

4. npm run deploy

published가 뜨면 성공🎇입니다~!

 

5.깃허브 해당 레포지토리 설정 들어가면 왼쪽에 Pages 있어요! 

자동으로 gh-pages가 생성될 건데 브랜치를 얘를 바꿔주시면 끝입니다.

 

6. http://깃헙아이디.github.io/레포지토리이름 으로 접속하면 뜰 거에요. 

만약 안 뜬다면 좀 기다려보시는 걸 추천드립니당

 

 

 

근데.. 이게 제가 설정해놓은 라우팅대로 계속 바뀌어서..ㅠㅠ 

navigate('/')로 설정해놓은 페이지를 가면 http://아이디/github.io/로 가더라고요....

서브 디렉토리를 파주어야 하는 것 같은데.. 이건 다음에 해보겠습니당ㅎㅎ