react 프로젝트를 gitHub에 배포하자.. (feat. gh-pages)

🙋🏻‍♂️ Next.js로 만들어진 프로젝트 배포는 여기로

Step 1

우선 배포 할 프로젝트 안에 npm i gh-pages 를 쳐서 gh-pages를 설치한다.

Step 2

package.json을 보면 아래와 같은 스크립트들 명령어가 있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이중에서 build를 실행하면, 우리가 만든 웹사이트에 production ready code를 생성하는데, 여기서 production ready란 코드가 압축되고, 모든것이 최적화 된다는 의미이다.

그렇다면 아까와 같이 우리의 프로젝트로 디렉토리가 위치한 터미널에서 npm run build를 입력한다.

빌드 후, build라는 폴더가 생성 된 것을 볼 수 있다.

Step 3

앞서 만들어진 build 파일들을 gitHub Pages에 push를 해줘야 한다.

하지만 그전에 다시 package.json파일로 돌아가서 마지막 부분에 아래와 같이 써주어야 한다.

"homepage": "https://EngChooN.github.io/react-js-movie-service"

여기서 EngChooN은 나의 깃허브 이름이고, 뒤에는 레포지토리의 이름을 써주면 된다.

나의 깃허브 이름 확인법: git config user.name
나의 레포지토리 확인법: git remote -v

Step 4

그리고 package.json에 scripts를 다음과 같이 추가해야 한다.

"deploy" : "gh-pages -d build"

🤔 predeploy는 bulid와 deploy를 한번의 명령어로 둘다 실행 시켜주기 위해 추가 했다.

어쨋든 여기서 deploy가 뜻하는 말은 아래에 적어 둔 homepage에 우리의 프로젝트를 업로드하는 것을 의미한다.

마지막으로 동일하게 터미널에 npm run deploy 를 치고 잠시동안 기다려서 해당 홈페이지 링크로 들어가게 되면...

• 나는 yarn deploy 를 쳤는데, 각자 사용하는 패키지 매니저에 따라 알아서 사용하자!

배포는 끝이다. 아마 여러분들이 만든 화면이 잘 나올 것이다.

아니 이런 거지같은.. 배포한 링크로 들어갔는데 빈화면이 나온다;

검은색 화면(글로벌 스타일로 백그라운드에 검정을 줬었음 ㅋ)으로 나오는 것을 보면 배포는 잘 된것이 맞는데, 아마 route 경로에 문제가 있는 것 같다.

해당 부분은 나만의 문제니까 내일 알아보자! 🥲

해결성공.. 방법이 궁금하다면 👈