React 프로젝트를 GitHub Pages에 배포하는 과정은 몇 가지 추가 작업이 필요합니다. 이 글에서는 이러한 과정을 단계별로 정리하겠습니다.
배포 전 준비 사항
프로젝트 공개 설정 확인
배포할 프로젝트의 repository가 public으로 설정되어 있는지 확인해야 합니다. private repository는 GitHub Pages에서 지원되지 않기 때문입니다.
package.json 수정
리액트 프로젝트 폴더 내의 package.json 파일에 다음을 추가해야 합니다.
json
"homepage": "https://<GitHub 계정 이름>.github.io/<저장소 이름>/"
여기서 <GitHub 계정 이름>과 <저장소 이름>에 해당하는 정보를 입력합니다.
React Router 설정
React Router를 사용하는 경우, BrowserRouter에 basename 속성을 추가해야 합니다. index.js 파일에서 다음과 같이 설정합니다.
javascript
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
이 설정은 package.json에서 설정한 homepage URL이 적용됩니다.
React 프로젝트 빌드 및 배포
1. 빌드하기
리액트 프로젝트를 배포하기 위해서는 먼저 빌드 과정을 진행해야 합니다. 아래 명령어를 실행하여 빌드 폴더를 생성합니다.
bash
npm run build
빌드 폴더는 GitHub 저장소에 push해야 하므로 .gitignore 파일에서 /build 부분을 주석 처리합니다.
“`bash
production
/build
“`
이후 빌드 폴더를 GitHub 저장소에 추가합니다.
bash
git add .
git commit -m "커밋 메시지"
git push -u origin main
2. gh-pages 브랜치 생성
GitHub Pages에 배포하기 위해서는 빌드 폴더 전용 브랜치를 만들어야 합니다. 다음 명령어를 입력합니다.
bash
git subtree push --prefix build/ origin gh-pages
3. gh-pages 패키지 사용
gh-pages 패키지를 사용하면 배포 과정이 더 간편해집니다. 먼저 패키지를 설치합니다.
bash
npm install gh-pages --save-dev
그 다음 package.json의 scripts 섹션에 다음 내용을 추가합니다.
json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
이제 다음 명령어를 입력하면 빌드와 배포를 동시에 수행할 수 있습니다.
bash
npm run deploy
배포 확인
GitHub은 기본적으로 gh-pages라는 브랜치를 GitHub Pages용으로 인식합니다. 따라서 이 브랜치에 빌드 폴더를 올렸다면 특별한 설정 없이도 배포가 가능합니다. 배포가 완료되면 Settings > Pages에서 브랜치가 gh-pages로 설정되어 있는지 확인할 수 있습니다. 배포 사이트 주소도 여기서 확인할 수 있으며, 몇 분 후에 해당 주소로 접속하여 배포가 잘 되었는지 확인할 수 있습니다.
프로젝트 수정 후 재배포
프로젝트를 수정하고 다시 배포할 때는 다음과 같은 명령어를 사용합니다.
1. gh-pages 패키지를 사용하지 않는 방법
bash
npm run build
git add .
git commit -m "커밋 메시지"
git push -u origin main
git subtree push --prefix build/ origin gh-pages
2. gh-pages 패키지를 사용하는 방법
bash
npm run deploy
gh-pages 패키지를 사용하는 방법이 훨씬 간편하므로 추천드립니다.
자주 묻는 질문
질문1: GitHub Pages에 배포 시 주의할 점은 무엇인가요?
GitHub Pages는 public repository에서만 지원되므로, repository 설정을 확인해야 합니다.
질문2: React Router를 사용할 때 특별한 설정이 필요한가요?
네, BrowserRouter에 basename 속성을 추가해야 합니다. 이는 homepage URL에 맞춰 경로를 설정하기 위함입니다.
질문3: 배포 후 사이트 주소는 어떻게 확인하나요?
GitHub의 Settings > Pages에서 배포된 사이트 주소를 확인할 수 있습니다.
질문4: gh-pages 패키지를 사용하는 이유는 무엇인가요?
gh-pages 패키지를 사용하면 빌드와 배포 과정을 간편하게 관리할 수 있어 편리합니다.
질문5: 빌드 후 .gitignore 설정은 왜 필요한가요?
빌드 폴더가 GitHub 저장소에 포함되어야 하므로, .gitignore 파일에서 해당 부분을 주석 처리해야 합니다.