github로 웹 배포하기

깃허브로 웹배포하기

그 전에 최종 결과물 깃허브에 올리기!!!!!!!!!!!!! 중요!!!!!!!!!!

터미널에 입력!

npm i gh-pages

 

(결과물을 깃허브페이지에 업로드 할 수 있게 해줒는 패키지.
html,css,javascript 만든 결과물을 도메인을 가진 웹을 배포해줌)

 

터미널에 입력(시간 쫌 걸림 20~30초정도?)

npm run build

이 스크립트를 실행하면 웹사이트의 production ready code 생성
production ready는 코드가 압축되고 모든게 최적화된다는 의미

 

실행하면 파일안에 build라는 폴더가 생성됨(안에 우리가 작성한것들이 압축되있음)

package.json 파일로 다시 이동!!!!

맨밑에서 위 }(중괄호 위에다가) 입력해줘야함

 

   },----- 여기서 ,꼭 적어줄것
  "homepage": "https://github usename.github.io/github repository" --- 사이에 홈페이지 주소입력
}---맨밑

"homepage": "https://github usename.github.io/github repository" 주소 의미는
https://(여기에는 깃허브 유저이름).github.io/결과물 올린 깃허브레포지토리 입력
(레포지토리 이름 모르면 터미널에 git remote -v 입력)

 

그리고 다시 package.json 파일에서

위에 쭉 올려보면 "scripts" 있음 
중괄호 안에다가 
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
2개 적어줄것

저장저장!!!

다적은 후

생성했던 build 폴더 삭제하기 우클릭해서 delete(삭제)하면됨

삭제하면 터미널에 npm run deploy입력

 

웹배포 끝!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

---

5분정도 걸림(웹 배포 미완료시 404 에러뜸)
주소는 아까 package.json파일 맨밑에 입력한 hompage 주소
컨트롤키 + 마우스 좌클릭하면 들어가짐

---

성공 확인 방법은 터미널 중간쯤 올려보면 
Creating an optimized production build...
Compiled with warnings.
하고 맨 마지막에 Published라고 입력됨

---

배포 실패 떳을때 에러번호가 -4058이였나... 어쨋든 검색해서 찾아보고 올라온 글보고 node-modules폴더  , package.json 삭제해보고 npm install 했는데 또 에러뜨고 글보고 터미널에 명령어 다 입력해봤는데도 에러떠서 만든 파일 전부 지우고 깃허브에 마지막으로 저장된 최종 파일 다시 clone(파일받기) 해서 다시 배포시도함 ㅜㅜ

 

결과물을 추가로 업데이트 하고 싶으면 npm run deploy만 입력해주면됨!!!