[배포] Github Pages로 리액트 앱 배포하기

가장 쉬운 방법
준비물: 깃허브 계정, 리액트 앱

1. build 파일 생성

npm run build

// 혹은 yarn을 사용하는 경우
yarn build 

우선 프롬프트에 빌드 명령어를 입력해 빌드 파일을 생성한다.
(리액트로 작성한 파일을 HTML, CSS, JS로 바꿔주는 작업)

명령어 입력하면 알아서 생성되고

프로젝트 폴더에 build 폴더가 만들어짐.

빌드 과정에서 warning 떠도 별다른 영향이 없으니 무시.
하위 경로에 배포하지 않을 거라
package.json에 "homepage": "./" 그대로 사용

2. 깃허브에 레포지토리 생성

새로운 레포지토리를 생성한다.
이름은 반드시 '깃허브 아이디'.github.io

organization으로 할 수 있지 않을까? 했는데 안됨

3. 새로 만든 레포에 build 파일 모두 업로드

build 폴더 내에 있는 파일을 모두 업로드해준다.
build 폴더 자체 말고 그 안의 내용물만.

드래그 앤 드롭으로 다 옮겨주고

커밋.

그럼 이제 https://아이디.github.io 입력하면 끗
404 에러가 뜨면 더 기다려보거나, 그냥 다시 할 것.

접속 잘 되는 것까지 확인 완료!

cf. 업데이트하려면?

그냥 build 파일 다시 업로드하면 된다.

장점: 간단함, 무료
단점: 수동으로 업데이트, 매번 빌드하고 다시 업로드 필요, 반영될 때까지 10분 정도 소요