[ReactJS] Publishing :: gh-pages, deploy, predeploy

gh-pages 라는 아주 nice 한 툴을 설치해 줄 거다.

npm i gh-pages

gh-pages 라는 것은 결과물을 github page 에 업로드 할 수 있게 해주는 툴,패키지 이다. 

터미널 창에 입력해주자.

 

github pages 는 github에서 제공하는 무료 서비스인데 완성된 결과물인 html, js,css 를 올리면 자동으로 웹사이트로 만들어 주는 것을 의미한다. 도메인도 주고.

 

가장 먼저 해야할 것은 package.json 의 scripts를 먼저 확인하는 것이다. 

 

scripts는 기본적으로 명령어인데, (start를 보면 알 수 있듯이, ex : npm run start) build 라는 명령어를 실행시키면 우리 웹사이트의 production ready code를 생성하게 된다. production ready 라는 건 코드들이 압축되고 모든게 최적화 된다는 의미이다. 

 

압축하고 최적화 하느라 시간이 좀 걸린다.

 

작업이 완료가 되면 build 라는 폴더가 하나 생성됐음을 확인할 수 있다.

안에는 온갖 이상한 Javascript 파일과 코드들이 있는데 왜 그렇게 생겼나 하면 다 압축이 된 것이다. 

 

브라우저가 이해할 수 있는 최적화된 결과가 나온다. build를 나오면.

 

이제 이걸 push 해야 한다. 

 

그리고 나서 해줘야 하는 것이. package.json 에 가서 제일 밑에, 

homepage: "https://<깃허브username>.github.io/<이 코드가 들어있는 깃허브 레포지토리명>"

새로운 property 추가 할때 콤마(,) 빼먹지 말고.

 

연결해둔 레포지토리를 확인하려면 git remote -v 명령어로 확인이 가능하다.

 

두번째는 script를 하나 추가해준다.

 

deploy 가 하는 일은 gh-pages를 실행시키고 build의 디렉토리를 가져온다.

 

먼저 build를 하고 deploy를 해야 한다는 사실을 기억하고 싶지 않기 때문에

 

predeploy 라는 명령어를 생성해주어 내가 deploy 라는 명령어를 실행시켜주면 predeploy 라는 명령어가 먼저 실행되고 predeploy는 npm run build를 실행시킨다. 

 

build 폴더를 제거하고

터미널 창에 npm run deploy를 실행시키면

nodejs는 predeploy를 실행시킨다음에 deploy를 실행시킨다.

 

 

 

 

gh-pages 가 build 폴더를 package.json 의 homepage 에 적어준 웹사이트에 업로드 하도록 해준다. 

 

 

 

File not found 가 뜨면 안된다. 주소창으로 보면 현재 오류가 있다. .git 이라고 URL 끝에 잘못들어가 있는 걸 볼 수 있다.

올라가는데 시간이 좀 걸린다. 5분 정도

 

혹시 문제가 발생한다면 username을 확인해 보고 hompage에 제대로 값을 주었는지 확인해 보자.

 

https://mswait.tistory.com/131

[Git] git config username, email 확인 및 변경

 

 

주소를 적을때 username을 확인하고 레포지토리 이름은 레포지토리 이름만! 들어가도록 하자

나는 .git 을 포함시키는 바람에 오래 걸렸다.

https://nomadcoders.co/react-for-beginners/lectures/3293

All Courses – 노마드 코더 Nomad Coders