GitHub에 React 앱을 올리고 gh-pages를 이용해 배포하는 과정을 처음부터 단계별로, 에러 없이 진행하는 방법을 설명드리겠습니다.
이 과정은 명확하고 간결하게 진행되며, 중간에 발생할 수 있는 일반적인 문제를 피하는 데 중점을 둡니다.
1. React 앱 생성하기
만약 아직 React 앱을 만들지 않았다면, Create React App을 사용하여 새 앱을 생성합니다. 이 명령어는 React 개발에 필요한 모든 설정을 자동으로 완료합니다.
|
1
2
|
npx create-react-app my-app
cd my-app
|
cs |
2. GitHub 리포지토리 생성
- GitHub에서 새 리포지토리를 만듭니다. 이 리포지토리 이름은 나중에
package.json에 추가할homepageURL에 사용됩니다. - 리포지토리 이름은 예를 들어
my-react-app같이 선택합니다.
3. gh-pages 패키지 설치
gh-pages 패키지를 개발 의존성으로 설치하여, 나중에 React 앱을 GitHub Pages에 쉽게 배포할 수 있습니다.
|
1
|
npm install gh-pages –save-dev
|
cs |
4. package.json 설정
package.json 파일을 열고 다음 두 가지 변경사항을 적용합니다.
- “homepage” 추가: 이 값은 GitHub Pages URL 형식을 따릅니다.
[your-github-username]를 GitHub 사용자 이름으로,[your-repo-name]을 리포지토리 이름으로 대체합니다.
|
1
|
“homepage”: “https://[your-github-username].github.io/[your-repo-name]”,
|
cs |
배포 스크립트 추가: scripts 섹션에 배포를 위한 명령어를 추가합니다.
|
1
2
3
4
5
6
7
8
|
“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”
},
|
cs |
5. GitHub 리포지토리와 로컬 연결
처음부터 GitHub 리포지토리를 로컬 프로젝트와 연결합니다.
|
1
2
|
git init
git remote add origin https://github.com/[your–github–username]/[your–repo–name].git
|
cs |
6. 로컬 변경사항 커밋 및 푸시
React 앱의 모든 초기 파일을 GitHub 리포지토리에 커밋하고 푸시합니다.
|
1
2
3
|
git add .
git commit –m “Initial commit”
git push –u origin main
|
cs |
7. React 앱 배포
gh-pages 스크립트를 실행하여 React 앱을 GitHub Pages에 배포합니다.
|
1
|
npm run deploy
|
cs |
8. GitHub Pages 설정 확인 및 액세스
- GitHub 리포지토리로 이동하여
Settings>Pages섹션을 확인합니다. 여기서gh-pages브랜치가 소스로 설정되어 있어야 합니다. - 배포가 완료되면,
Settings>Pages에서 제공된 URL을 통해 배포된 앱에 액세스할 수 있습니다.
이 과정을 따라 GitHub에 React 앱을 성공적으로 올리고, gh-pages를 통해 배포할 수 있습니다.
** gh pages 진행시, 보안 취약점은 스킵하셔도 됩니다.
ex) 8 vulnerabilities (2 moderate, 6 high) To address all issues (including breaking changes), run: npm audit fix –force Run `npm audit` for details.