React 프로젝트, GitHub으로 배포하기

6월부터 스터디원과 함께 React 토이 프로젝트를 만들었다.

7, 8월 동안 SSAFY 프로젝트로 바빠서 진행하지 못했고, 이제부터는 각자 원하는 방향대로 기능 또는 디자인을 추가하기로 했다.

 

프로젝트명

Hi, My Calendar

 

기능 설명

1. Todo
   1. 할 일 생성
   2. 할 일 조회
   3. 할 일 완료처리
   4. 할 일 삭제
2. Emotional Calendar (예정)
   
   1. 감정 입력
   2. 수정
   3. 삭제
3. WebView 연동

 

현재 프로젝트는 서버가 없고, localStorage에 데이터를 저장하는 방식으로 구현되어 있다. 반응형으로 만들었기 때문에 웹뷰를 이용해 모바일에서도 활용하도록 하고 싶은데, 그러기 위해서는 배포를 할 필요가 있다.

본격적인 배포 방법은 배우는 데 시간이 많이 걸릴 것 같아, github에서 제공하는 배포 기능을 활용했다.

 

프로젝트 배포

먼저, 기존 프로젝트 파일 구조는 아래와 같다.

• React-Calendar
  • .git 
  • toy-project
    • node_modules
    • public
    • src
    • .gitignore
    • package.json
    • package-lock.json
    • README.md
    • requirements.txt
  • README.md

빌드할 때 이 프로젝트 구조 때문에 문제가 발생했는데, 그 이유는 public 때문이다.

build 시 배포 url은 github 폴더명이다. 따라서 https://jeong57.github.io/React-Calendar/ 이 배포될 url이다. 배포 시에 public/index.html 파일을 찾아오는데, 현재 프로젝트 구조에서는 React-Calendar/toy-project 안에 public이 들어있기 때문에 파일을 찾지 못해서 빌드가 되지 않았다.

결론적으로, React-Calendar 폴더에서 build를 해야하는데 React-Calendar 폴더 안 toy-project 폴더에서 빌드를 시도했기 때문에 배포 url로 들어가면 404 페이지가 떴다.

 

따라서 toy-project 폴더 내에 있는 파일들을 밖으로 빼서 프로젝트 폴더 구조를 변경했다.

• React-Calendar
  • .git
  • node_modules
  • public
  • src
  • .gitignore
  • package.json
  • package-lock.json
  • README.md
  • requirements.txt

1. Pages 생성

GitHub의 프로젝트 폴더의 Settings/Pages에 들어간다.

Build and deployment > Branch > master를 선택하고 save를 누른다.

그럼 https://jeong57.github.io/React-Calendar/ 페이지에 들어갈 수 있는데, 현재는 README 파일 내용이 뜬다.

 

2. package.json 파일 변경

{
  "dependencies": {
    ...
    "gh-pages": "^4.0.0",
    "prop-types": "^15.8.1",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },
  "homepage": "https://jeong57.github.io/React-Calendar/",
  ...
}

"homepage"에 배포 url을 입력하고, "deploy"를 추가한다.

나는 프로젝트 폴더 구조를 바꾸는 과정에서 gh-pages를 찾을 수 없다는 에러가 떴는데, 이것은 아래 코드로 해결했다. 그러면 위 코드와 같이 package.json 파일의 dependencies에 "gh-pages": "^4.0.0" 가 추가된다.

npm install gh-pages

 

3. Build 및 Deploy

npm run build
npm run deploy

위 코드를 입력하고, 빌드 및 배포가 완료되면 "Published" 문구가 뜬다.

배포 이후 페이지가 업데이트 되는 데까지 시간이 좀 걸리기 때문에 5~10분 뒤 배포 url로 들어가면 완료된 것을 볼 수 있다.

 

 

4. 완료 페이지

아직 완성된 프로젝트는 아니지만 배포까지 완료했다. 이제 이 url을 가지고 WebView에서 apk를 추출하면 휴대전화에서도 프로젝트를 열 수 있다.