GitHub 페이지에 React 앱 배포

GitHub Pages를 사용하여 GitHub에 반응 애플리케이션을 배포해 보겠습니다.

전제 조건

컴퓨터에 Node, yarn, npm이 설치되어 있어야 합니다. 설치되어 있는지 확인하려면 터미널 창을 열고 다음을 입력합니다.

npm -v
yarn -v
node -v

이 명령이 터미널에서 버전 번호를 출력한다면, 당신은 갈 수 있습니다. 그렇지 않은 경우 계속 진행하여 누락된 것을 설치해야 합니다.

노드(npm 포함)

원사

이미 GitHub 계정이 있다고 가정합니다. 생성하지 않는 경우one

시작하자.

프로젝트 만들기

프로젝트를 생성하려면 터미널에 다음을 입력해야 합니다.

npx create-react-app my-react-app

작업이 완료되면 사용할 준비가 된 상용구 React 프로젝트가 생성됩니다. 제대로 작동하는지 확인하려면 다음 명령을 실행하십시오.

cd my-react-app

아래 명령을 실행
yarn start 또는 npm start
모든 것이 제대로 실행되면 응용 프로그램이 다음 주소의 로컬 서버에서 실행되고 있다는 메시지가 터미널에 표시됩니다. http://localhost:3000

프로젝트를 배포할 준비가 되었습니다.

GitHub에 프로젝트 배포

빌드된 애플리케이션을 GitHub 페이지에 업로드하려면 먼저 gh-pages 패키지를 설치해야 합니다.

yarn add gh-pages

또는

npm install gh-pages --save-dev

이 패키지는 GitHub 페이지에서 애플리케이션을 호스팅하는 데 사용할 gh-pages 분기에 코드를 배포하는 데 도움이 됩니다.
gh-pages 패키지를 제대로 사용하려면 package.json 파일의 스크립트 값에 두 개의 키를 추가해야 합니다.

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

다음으로 package.json 필드를 추가하여 homepage 파일을 수정해야 합니다.

{
  "homepage": "https://<username>.github.io/my-react-app/",
}

<username>를 자신의 username로 교체하십시오.

This is URL of your hosted app.

모든 설정!!! 우리는 갈 준비가되었습니다

애플리케이션을 배포하려면 터미널에 다음을 입력합니다.

npm run deploy

위의 명령을 실행하면 애플리케이션을 빌드하고 GitHub가 GitHub 페이지와 연결하는 데 사용하는 gh-pages 라는 분기로 푸시합니다.

우후!!!!! 🥳

링크에 액세스https://<username>.github.io/my-react-app/
참고: 처음 게시하는 데 몇 시간이 걸릴 수 있습니다.