[React] create-react-app github pages를 통해 배포하는 방법

[React] create-react-app github pages를 통해 배포하는 방법

오늘 포스팅 내용은 Create-React-App으로 개발한 앱을 github pages를 활용해 배포하는 방법입니다.

프로젝트 개발을 완료한 상태라는 가정 하에 터미널에서 React앱 root폴더로 이동해 yarn build를 입력합니다.

프로젝트 폴더 내부에 build 폴더가 생성됩니다.

완료 후 메시지를 보면 package.json에 아래와 같이 작성하라고 되어있습니다.

"homepage" : "http://myname.github.io/myapp",

여기서 myname은 github 닉네임을 작성하면 되고, myapp에는 저장소명을 입력하시면 됩니다.

저는 테스트를 위해 아래와 같이 github 저장소를 생성했습니다.

프로젝트 폴더 내 package.json으로 이동해서 시킨대로 입력했습니다.

이제 다시 build 해줍니다!

성공적으로 빌드가 됐다면 아래처럼 메시지가 나옵니다.

다음으로 할 일은 아래 두 가지입니다.

1. 먼저 위에서 http://fed-gren.github.io/deploy_test를 배포하기 위해서

yarn add --dev gh-pages를 입력하라고 나옵니다.

입력하고 성공적으로 끝나면 아래처럼 결과가 나옵니다.

2. 두번째로는 scripts 마지막에 predeploy, deploy를 설정하라고 하네요.

package.json에 scripts에 그대로 추가해줍니다.

package.json을 수정했으니 yarn build를 입력해 다시 빌드해줍니다. 

그리고 나서 yarn run deploy를 실행합니다.

그대로 입력해줍니다.

그런데 에러가 나네요!? 

메시지를 읽어보니 저장소와 연결이 안되어있어서 생긴 오류입니다.

아까 생성한 저장소를 연결해주기 위해 git remote add를 해줍니다!

git remote add origin https://github.com/fed-gren/deploy_test.git

origin 뒤에 적은 주소는 각자 저장소 주소로 하시면 됩니다.

저장소 생성 시 초기화면에 설명이 잘 나와있습니다!

git push -u origin master 까지 입력하면 연결 완료입니다.

이제 다시 yarn run deploy를 실행합니다.

완료되었습니다! homepage에 작성했던 주소로 들어가보겠습니다.

이상없이 잘 접속됐습니다.

가끔 404 에러가 발생할 때가 있는데, 터미널에서 오류없이 실행됐다면 조금 기다린 후에 다시 접속해보시면 접속되실 겁니다.

끝~!

끝까지 읽어주셔서 감사합니다.

여러분들의 공감 클릭, 댓글 하나가 큰 힘이 됩니다!