React 프로젝트 Github Pages로 배포하기

작성중인 프로젝트를 지인에게 보여주고 싶어서 React 프로젝트 배포방법을 조사하던 중 Github Pages 라는 것을 알게 되었습니다.

Github Pages

Github Pages는 GitHub의 정적 웹 호스팅 서비스입니다. 정적 웹 사이트를 무료로 호스팅하고 공개할 수 있는 플랫폼으로, GitHub 리포지토리에 저장된 HTML, CSS, JavaScript, 이미지 등의 파일을 호스팅하여 웹 사이트를 온라인에 배포하고 공유할 수 있도록 해줍니다.

무료로 제공되기 때문에 많은 개발자들이 GitHub Pages를 활용하여 개인 프로젝트, 포트폴리오, 문서 등을 온라인에 배포하고 공유하고 있다고 합니다.

이제 이용 방법을 알아봅시다.

배포 방법

1. React 프로젝트에 package.json 에 homepage 를 추가해주어야합니다.

// 예시
"homepage": "https://yourusername.github.io/repo-name"

2. React 프로젝트를 build 해줍니다.

npm run build

3. Github Repository를 생성해줍니다.
   (<yourUserName>.github.io 형식으로 작성)
   

4. React 프로젝트를 build 후 생긴 결과물인 build 디렉토리에 들어간 후, 내부의 모든 파일들을 작성한 Repository에 Push 해줍니다.
   

5. 그 후, 조금만 기다린 뒤(10분?)
   https://(yourUserName).github.io/
   위의 링크에 접속합니다.

이렇게 하면 간단하게 배포가 완료됩니다.

저도 아직 이렇게 정적인 페이지로 간단하게 배포를 하였지만 추후 프로젝트에서는 아마존 웹 서비스(AWS)를 이용한 배포도 한번 작성해볼까 합니다.

긴글 읽어주셔서 감사합니다.