[React] 프로젝트 웹 서버 배포 / Github pages

React 프로젝트를 배포하려면 여러 가지 방법이 있습니다.

GitHub Pages, Vercel, Netlify, Firebase Hosting 등

나는 그 중에 GitHub Pages를 사용해서 배포하려 합니다.

무료 서비스이며 Github Repository에서 호스팅 가능하기에 편리합니다.

 

1. Github

• 깃허브 레파지토리를 생성
• Settings > Pages로 이동 
• 브랜치 선택 > Save

 

2. React 프로젝트 배포

배포하기 위한 패키지를 설치해줍니다

npm install gh-pages

 

package.json 파일에 아래 코드 추가

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
}

"homepage": "https://깃허브아이디.github.io/Repository명/"

 

App.tsx

<Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
</Router>

 

깃허브에 업로드하고 npm run deploy 명령어를 실행합니다.

완료 후 깃허브 Settings > Pages로 들어가면 브랜치에 gh-pages가 생성되었음을 알 수 있음

선택 후 Save

 

Visit site로 접속해보기

 

- 수정할 때는 코드를 수정하고 add > commit > push > npm run deploy 로 다시 배포해주면 된다

 

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."