[React] 프로젝트 GitHub Pages 배포하기

BYJIYE·2020년 4월 21일
66

React

목록 보기
1/2
post-thumbnail

🌝 React 프로젝트 GitHub Pages 배포하기

저는 프로젝트 create-react-app 으로 만들었습니다 :)

◼ 1. GitHub 저장소 만들기

먼저 자신의 github에 저장소를 하나 생성해줍니다.
(저는 저장소 이름을 react-github-pages로 만들었습니다)

저장소이름, 설명 작성하고 Create repository 클릭

◼ 2. 프로젝트 폴더에 git 설치하기

  1. 작업 프로젝트 디렉토리에서 터미널 실행
  2. 아래 명령어 차례대로 실행
  3. push까지 완료되면 github 페이지로 돌아가 새로고침하면 소스들이 올라와있다.
git init
git add *
git commit -m 'first commit'
git remote add origin https://github.com/JIHYE-P/react-github-pages.git
git push -u origin master

명령어에 대해서 간단히 설명을 덧붙히자면,,,
git init - 프로젝트 폴더에 git설치
git add * - .gitignore에 입력되어있는 파일 제외하고 모두 저장소에 올리기
git commit -m 'first commit' - commit 메세지 작성
git remote add origin https://github.com/JIHYE-P/react-github-pages.git - git 저장소 연결
git push -u origin master - git master로 push

◼ 3. github pages 배포하기

  1. 먼저 프로젝트에 gh-pages 패키지를 설치해야합니다.
npm install gh-pages --save-dev
  1. 설치가 완료되면 프로젝트에 있는 package.json 파일을 열어 "homepage" 주소를 추가합니다.
    형식은 http://{사용자 이름}.github.io/{저장소 이름}로 작성합니다.
//....
"homepage": "http://JIHYE-P.github.io/react-github-pages"
  1. 다음, script 부분에 predeploy, deploy 를 추가합니다.
"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
  1. 저장하고 터미널창을 열어 npm run deploy를 실행합니다.

확인을 위해 github 해당 저장소 페이지로 돌아가 우측에 있는 Settings -> Options 에서 GitHub Pages 에서 확인하실 수 있습니다.
(만약 사이트에서 README.md 파일 내용이 나올 경우 GitHub Pages의
Source 부분에서 gh-pages branch로 변경하면 사이트가 정상적으로 배포됩니다!!)

배포완료! 👍

◼ 4. 참고 (2021.01.14)

다른 프로젝트를 배포하는 과정에서
hompage : "http://{사용자 이름}.github.io/{저장소 이름}" 로 설정된 주소로 접속하니까 404 페이지가 나왔다.
이럴때 http://{사용자 이름}.github.io/{저장소 이름}/index.html 로 접속하면 나온다.

profile
프론트엔드가 되기 위해 그냥 닥치는 대로 배우고 써보는 4년차 퍼블리셔

2개의 댓글

comment-user-thumbnail
2021년 5월 17일

예쁜누나 글도잘쓰시네요

답글 달기
comment-user-thumbnail
2023년 8월 13일

너무나 큰 도움을 받고 갑니다 친절한 설명 글 정말 감사합니다

답글 달기