[GitHub] GitHub pages 를 사용해 리액트 프로젝트를 배포하기 & 수정 배포하기

 

 

GitHub 에서 제공하는 pages 기능을 사용하여 리액트 프로젝트를 배포하기

리액트를 사용하여 포트폴리오를 작성하고 작성된 포트폴리오를 GitHub 에 배포하고자 한다.

 

배포 과정을 간단히 설명하자면 아래와 같다.

------------------------------------------------------------------------------

1. React 프로젝트를 생성

▿

2. gh-pages 패키지 설치

▿

3. package.json 폴더 내에 홈페이지 주소 추가하기 및 predeploy, deploy 추가하기

▿

4. GitHub Repository 생성하기

▿

5. 등록한 Repository 를 원격지로 등록하기 ( add, commit, push )

▿

6. GitHub pages 에 배포하기

▿

7. 배포된 화면 확인하기

------------------------------------------------------------------------------

 

그럼 GitHub Pages 를 사용하여 배포하는 과정을 자세하게 살펴보겠다.

 

 

 

1. React 프로젝트를 생성

npx create-react-app {프로젝트명} : react 프로젝트를 생성

 

 

 

2. gh-pages 패키지 설치

우선 gh-pages 패키지를 설치하기 위해서 생성된 React 프로젝트 디렉토리로 이동하여 진행한다

생성된 프로젝트로 이동 > npm install --save gh-pages 명령어를 사용하여 gh-pages 패키지를 설치

 

 

 

3. package.json 폴더 내에 홈페이지 주소 추가하기 및 predeploy, deploy 추가하기

package.json 파일을 열어 homepage 항목을 추가한 뒤 값은 http://{사용자이름}.github.io/{생성될 저장소 이름} 으로 지정하고 predeploy 항목과 deploy 항목을 추가해준다

 

 

 

4. GitHub Repository 생성하기

아까 package.json 에서 작성한 저장소 이름으로 레포지토리를 생성해준다.

 

 

 

5. 등록한 Repository 를 원격지로 등록하기

생성된 레포지토리를 원격지로 등록 및 프로젝트를 add, commit, push 를 진행

 

 

 

6. GitHub pages 에 배포하기

설치한 gh-pages 를 사용하여 배포 ( npm run deploy - package.json 에서 설정한 deploy 라는 별칭의 명령어를 실행 )

 

 

 

7. 배포된 화면 확인하기

레포지토리 주소로 접속하게 되면 정상적으로 배포된 화면이 띄워지는 것을 확인할 수 있다.

 

 

 

---

 

 

 

수정 배포하기

프로젝트를 수정 > npm run deploy 실행 > 배포된 페이지 확인

 

수정 배포 테스트를 위해 App.js 파일 수정

 

 

 

npm run deploy 로 배포 실행

 

 

 

레포지토리의 Actions 탭에서 배포된 항목에 초록불이 들어와 있다면 배포 성공!

 

 

 

배포된 사이트를 통해 확인!

 

 

 

---

728x90