[React 포트폴리오 페이지 제작기] 1. github.io로 배포하기

😸 github.io

• GitHub에서 제공하는 "GitHub Pages"  웹 호스팅 서비스로, 여기서 제공받는 도메인 주소 형식
• Public으로 설정된 Repository로 정적 페이지에 한해서 서비스 제공

 

😸 GitHub Pages 호스팅 및 배포

1. github.io Repository 생성

 

 

• Repository 이름은 사용자이름.github.io로 설정
• 위에서 말했듯 Public으로 설정
• README 파일 생성

 

2. React  App 생성

 

 

• Repository clone을 위해 HTTPS 주소 복사

 

 

• 터미널에서 원하는 폴더 위치로 이동 후 git clone 복사한 HTTPS 명령어 입력 → 사용자이름.github.io 폴더 생성
• 사용자이름.github.io 폴더 터미널에서 React 프로젝트 생성
  • npx create-react-app ./
• 프로젝트 생성 후 react 안에 있는 README.md 파일 제거 (github.io Repository에 이미 존재)

 

• gh-pages 패키지 설치 (GitHub Pages 배포를 도와주는 패키지)
  • npm install gh-pagees
  • yarn add gh-pages (yarn 사용 시)

 

• package.json 수정 
  • "script" 부분에 아래 내용 추가 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    
    //추가된 부분
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

 

• • "homepage" 항목 추가 후 호스팅 주소 입력

{
  //추가된 부분
  "homepage": "https://jeonkyungwon.github.io/",
  
  "name": "jeonkyungwon-blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^6.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.13",
    "web-vitals": "^2.1.4"
  },

 

 

3. React를 github.io에 배포

• add와 commit을 하여 변경내용 저장 후 Repository에 push
• push 후 터미널에 npm run deploy 입력
• github.io Repository로 돌아와서 branch에 gh-pages 브랜치 생성 확인

• setting에 있는 Pages로 이동하여 Branch를 gh-pages로 변경

• 페이지에 수정 사항이 변경되는데 약간의 시간 필요
• 반영이 안되면 npm run deploy 입력 여부 확인

• 배포 완료!!

 

😸 느낀 점

처음에는 github.io 배포는 그냥 구글링해서 찾아보고 따라하면 쉽게 따라할 수 있을 것이라고 생각했다.

하지만 배포를 처음 해보는 입장에서는 약간의 어려움이 있었다.

 

일단 첫 난관이 clone 후 react 프로젝트 생성할 때였다. 

react 프로젝트 생성을 평소에 하던대로 npx create-react-app 프로젝트이름으로 진행했더니

사용자이름.github.io 폴더 안에 또 다른 폴더가 생성되어서 제대로 배포가 진행되지 않았다.

※ npx create-react-app ./ 로 생성할 것!!

 

다음으로 배포를 마무리하고 배포된 페이지를 확인했는데 몇분을 기다려도 반영이 안되는 문제가 있었다.

뭐가 문제인가 계속 찾아보다가 npm run deploy를 배포 전에 입력하고

배포 후 다시 입력해주지 않아서 변경사항이 반영되지 않았던 것이다.

※ 새로운 변경 사항을 push 해주면 항상 npm run deploy 입력할 것!!

 

그래도 이런 난관을 해결하면서 이제 누군가 github.io 배포에 대해 알려달라고 하면 확실하게 알려줄 수 있을 것 같다.

 

 

 

끝!!