[react] github 페이지 배포

안녕하세요. Jeonhui입니다.

이번 시간에는 gh-pages를 이용하여 react github페이지를 배포해보도록 하겠습니다.

---

요약.

1. Repository 생성

2. 해당 Repository clone

3. react 설치

4. 터미널 npm i gh-pages

5. package.json 수정

    -scripts 부분

        "predeploy": "npm run build", "deploy": "gh-pages -d build" 추가

    -최상위 {} 하단

        "homepage": "https://사용자이름.github.io/저장소이름" 추가

7. github 사이트의 repository -> settings - > pages -- source를 gh-pages로 변경

        (npm run deploy시 자동 생성)

8. homepage에 지정한 주소 접속 및 확인

 

---

먼저, github에서 repository를 생성해줍니다. 저는 wordle 사이트를 만들기 위해서 wordle로 이름을 지어주었습니다.

아래와 같이 생성되었습니다.

repository명은 webStorm에서 react프로젝트를 생성하기 위해서 대문자가 들어가면 안되기 때문에 모두 소문자로 만들어 주었습니다.

저는 github desktop 프로그램을 사용하기 때문에 이 프로그램을 이용하여 clone을 해보겠습니다.

Github Desktop 프로그램을 이용한 clone

이제 해당 폴더에 react를 설치하여 줍니다. react설치는 터미널을 이용하여도 되고, 프로그램을 이용하여도 됩니다.

저는 귀찮기 때문에 웹스톰의 react프로젝트를 이용하여 생성하겠습니다.

webstrom 리액트 프로젝트 생성

 

이제 터미널에 webStorm의 터미널에

npm i gh-pages

를 입력해주면 gh-pages는 설치가 완료되었습니다.

 

이제 package.json파일의 scripts 부분에 아래와 같이

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

이 두 코드를 추가 해주고, 맨 하단에 아래와 같은 형식으로 코드를 추가해줍니다.

"homepage": "https://사용자이름.github.io/저장소이름"

 

homepage 추가한 모습

 

이제 배포를 해봅시다. 터미널에 다음과 같은 코드를 입력합니다.

npm run deploy

published 라고 뜨면 성공한 것입니다.

 

이제 다시 github 사이트의 repository로 돌아가서 settings -> pages에 들어가 source를 gh-pages로 바꾸어줍니다. 

gh-pages는 npm run deploy를 하면 자동으로 생성됩니다.

 

이제 지정한 사이트에 접속을 해보시면 정상적으로 작동하는 것을 확인할 수 있습니다.

https://jeonhui.github.io/wordle​

 

---

 

리액트 gh-pages 배포는 여기서 마치겠습니다.  잘못된 부분이 있을 경우 댓글을 남겨주세요. :)​

읽어주셔서 감사합니다.