[React JS] 리액트 어플리케이션 배포하기 (with gh-pages)

1. terminal에 명령어: npm i gh-pages // (i = install)를 통해 gh-pages를 설치하기
   
   • gh-pages : 결과물을 github pages에 업로드할 수 있게 해주는 패키지
   • github pages : github에서 제공하는 무료 서비스, html css javascript 를 올리면 웹사이트로 만들어서 무료로 배포해줌
2. 설치가 완료됐으면 package.json에 있는 script를 확인하기 
   
   • "build" 스크립트: 실행 시, 내 웹사이트의 production ready code 생성( *production ready - 코드가 압축되고 모든게 최적화 된다라는 의미) -> build 폴더가 생성된다. 폴더 내부에는 압축된 JS코드들이 담긴 파일들이 있음
   • build 스크립트 실행 명령어 ->npm run build 
   • build 폴더를 push해주기 전에 package.json으로 돌아와서 "homepage" URL추가해주기 
3. package.json 에서 "homepage" URL 를 만들어주고 2개의 script도 만들어주기
   • package.json에서 homepage의 위치는 맨 아래에서 바로 윗줄이고 코드작성 전에 콤마로 구분을 주는 것을 잊지마세요.
   • script의 경우, 기존에 있는 스크립트에 deploy와 predeploy스크립트를 추가해줍니다. 이 역시 콤마로 구분을 줍니다. deploy의 경우 build를 먼저 실행시킨뒤에 하는 작업을 담당하므로 npm run build코드를 predeploy로 만들어주면 자동으로 deploy가 실행되기전에 predeploy가 실행되고 그 다음 deploy 스크립트가 실행된다.  즉, deploy(명령어: npm run deploy)를 하면 node.js가 predeploy를 먼저 실행시킨다. 
   • deploy 스크립트 : gh-pages가 build 폴더를 아래에 적어놓은 homepage 웹사이트에 업로드하도록 함  
   • 위의 스텝을 잘 따라왔다면 npm run deploy 명령어 하나를 통해서 배포가 완료되겠죠?😁

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy":"gh-pages -d build",
    "predeploy": "npm run build"
  },

※"homepage" URL 코드 작성위치- package.json 맨 아래에서 바로 윗줄 ▼

}, <-여기 콤마 넣어라!!
  "homepage":"https://내깃허브아이디.github.io/깃허브레포지토리이름"
} //맨아래 코드

 

★레포지토리 이름 모를 때 찾는 방법: git bash 에서 명령어: git remote -v 를 하면 된다. 만약에 레포지토리가 없다면 먼저 만들어야 함 

• 참고로 vscode의 기본 터미널이 Window의 Power Shell로 설정되어 있기 때문에 위의 gir remote -v 명령어가 실행 오류가 뜰텐데요. 당황하지 마시고 터미널의 종류를 cmd or Git Bash 로 변경하면 됩니다.(맞음 내가 당황했음) 

 

터미널에 npm run deploy 했는데 또 에러가 났습니다. (젠장)

아래는 오류메세지 부분▼

Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:467:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn git',
  path: 'git',
  spawnargs: [ 'config', 'user.name' ]
}

npm ERR! Failed at the first-react-app-2022@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

읽어보니 npm에서의 문제라기보단 git 의 문제인듯해보이네요.

해결방안을 찾아봤는데 ,https://github.com/facebook/create-react-app/issues/8243

How to fix throw er; // Unhandled 'error' event? Error: spawn git ENOENT? Emitted 'error' event on ChildProcess instance at:? ·

위의 링크를 타고 답변을 읽어보니 

The error spawn git ENOENT means that the program tried to spawn git, but that no git binary could be found. Installing git should fix this.

-> 프로그램이 git을 찾을 수 없으니 git을 설치하면 해결될 것이다. 라는 말을하고 있는데요. 

 

결국 이번 이슈도 같은 문제입니다. Vscode의 기본 Terminal이 powershell이라는 말을 했지요(윈도우의 경우)? 이 부분을 bash로 바꿔서 다시 명령어 npm run deploy 를 하면 정상작동합니다. 어쨌든 마지막에 push를 해야하니까요. git bash로 명령어를 입력해야겠죠. 또한, push를 할 때, github에서 최근에 인증방식으로 토큰(기존에 password 를 쓰는 것말고 랜덤값을 담은 토큰을 대체제로 사용)을 도입했기 때문에 아이디와 토큰을 입력해주는 것이 필요합니다. 

 

->응 배포해도 또 404 오류떠서 빈화면이야~ ^ ^

ㅎ ㅏ gh-pages가 브라우저라우터의 경우 지원하지않기 때문이라는데 내일 다시 도전해봐야겠다..

 

+ 2022 05 16 업데이트 

확인해보니 사용한 무료 영화 API가 사라졌네요. 불러올 수 없는 상황이라 다른 API 로 대체해서 확인해보는 수밖에 없습니다.