React 프로젝트 생성부터 깃허브 페이지 배포까지

웹개발자로 쪼금 끄적였답시고 시작하는 토이프로젝트마다 DB 연결부터 하고 보니 프로젝트 크기가 쓸데없이 커져서

항상 이걸 어디에 어떻게 배포해야할지....웹호스팅하려면 또 돈이 나가는데...하면서 집에서 대충 코드를 짜다가 말기만 수차례

 

그러다 리액트에 입문한지 어언 반년...

DB 연결 없이 간단하게 돌아가는 앱 정도라면 내 사랑 깃허브가 제공하는 github page에서 배포가 가능하다는 것을 깨달았다...!

기쁨에 겨워 처음 리액트 어플리케이션 생성에서부터 배포하는 과정까지를 남겨본다.

 

1. 리액트 프로젝트 생성

• 원하는 폴더 위치로 이동
• 명령어 입력 : create-react-app [애플리케이션명]

• 소스 코드 수정 후 로컬에서 실행

 

2. github에 새로운 저장소 생성

• 편의를 위해 생성했던 애플리케이션명과 동일하게 저장소 생성

 

3. git 저장소 연결

• 1에서 만들어둔 프로젝트 폴더로 돌아감
• 원격 저장소 지정 명령어 : git remote add origin https://github.com/[깃허브 ID]/[저장소명].git

• 참고 : 이미 2에서 저장소 신규 생성 후 아래와 같은 화면이 나오는데, 여기에 나오는 커맨드라인을 그대로 복사해서 터미널에 입력하면 편함. 아예 깃을 연동하지 않은 상태라면 git init 명령어부터 순서대로 실행

• 성공적으로 연결 후 소스 코드 커밋 & 푸시 (git commit, git push -u origin master 입력)

 

4. package.json 설정

• 프로젝트 폴더 위치에서 명령어 실행 : npm install --save-dev gh-pages

• "homepage" 에 github page 주소 추가 : 형식은 https://[깃허브 ID].github.io/[저장소명]/ 이나 모르겠으면 그냥 github 저장소의 Settings 메뉴에서 스크롤을 좀 내리다보면 GitHub Pages 라는 항목이 있다. 여기서 Source 를 master branch 로 변경하면 아래와 같이 내 깃허브 페이지 주소를 보여준다.

• "scripts" 에 "predeploy" 및 "deploy" 명령어 추가
  • "predeploy": "npm run build"
  • "deploy": "gh-pages -d build"
• 완성된 package.json

 

5. github page 설정 및 배포

• 프로젝트 폴더 위치에서 명령어 실행 : npm run build

• 빌드가 성공하면 수정된 package.json 을 github 저장소에 커밋 & 푸시
• github의 저장소로 와서 Settings 메뉴로 이동, 스크롤을 조금 내려서 GitHub Pages 항목에 오면 이제 Source 선택 셀렉트 박스에 gh-pages branch 가 추가되어 있다. gh-pages branch를 선택한다.

• 내 깃허브 페이지 주소로 이동하면 아까 만들어둔 페이지가 뜨는 것을 볼 수 있다