GitHub 페이지에 React 앱을 배포하는 간단하고 쉬운 방법

React 앱을 만들 때 우리는 그것을 배포하고 싶고 우리의 놀라운 앱을 세상에 보여주고 싶습니다.
다음은 GitHub 페이지에 React 앱을 배포하는 간단한 단계입니다.

전제 조건

GitHub 계정이 있어야 합니다.
(GitHub 계정이 없다면 GitHub에 들어가서 새 계정을 만드세요.)

Node and npm이
시스템에 설치됩니다.

그리고 하나의 React 프로젝트가 있어야 합니다.

GitHub 페이지란 무엇입니까?
GitHub 페이지는 GitHub에서 정적 웹 사이트를 게시하기 위해 GitHub에서 제공하는 서비스입니다. GitHub 리포지토리에 Html, CSS 및 JavaScript 파일을 추가하면 GitHub 페이지에서 이를 정적 웹 사이트로 전환합니다.

GitHub 페이지에 React 앱을 배포하는 단계:

1단계: GitHub 계정에 GitHub 리포지토리를 생성합니다.

GitHub 계정으로 이동하고 오른쪽 상단 모서리에 있는 + 아이콘을 클릭한 다음 새 저장소를 생성하기 위해 새 저장소를 클릭합니다.

이제 리포지토리 이름 필드에 프로젝트 이름을 지정합니다. "First-react-app"라는 이름을 지정하면 원하는 이름을 지정할 수 있습니다.

그런 다음 저장소 생성 버튼을 클릭하면 저장소가 생성됩니다.

저장소가 생성되면 화면에서 이 페이지를 볼 수 있습니다

.

2 단계:

GitHub 리포지토리를 생성한 후 터미널로 이동하여 터미널에서 반응 프로젝트 디렉터리를 엽니다.cd react_app여기서 react_app은 반응 앱을 만든 내 폴더 이름입니다.

3단계: GitHub 페이지 종속성 패키지 추가

터미널에서 다음 명령을 실행합니다.
npm을 통해 GitHub Pages 패키지를 개발 종속성으로 설치하기 위한 것입니다.npm install gh-pages --save-dev
설치 후 이 이미지에 표시된 대로 package.json 파일에서 dev 종속성을 볼 수 있습니다.

4단계: package.json 파일에 홈페이지 추가

이제 반응 앱 폴더의 package.json 파일로 이동하여 다음 홈페이지를 추가하십시오."homepage": "https://myusername.github.io/my-app",참고: "myusername"위치에 GitHub 계정의 사용자 이름을 입력하고 "my-app"위치에 이전에 생성한 리포지토리 이름을 입력한 다음 package.json 파일을 저장합니다.
내 저장소 이름은 "First-react-app"입니다.

5단계: package.json 파일에 배포 스크립트 추가

이제 package.json 파일에서 아래로 스크롤하고 스크립트 섹션에 다음 스크립트를 입력합니다.

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

그리고 파일을 저장합니다.

6단계: 이제 터미널에서 다음 명령을 실행합니다.

git initgit add -Agit commit -m "First commit"(첫 번째 커밋 대신 메시지를 작성할 수 있습니다.)git branch -M maingit remote add origin https://github.com/your_username/your_repository_name.git(여기서 your_username 대신 GitHub 계정의 사용자 이름을 입력하고 your_repository_name 대신 리포지토리 이름을 입력하세요.)npm run deploy

7단계:

GitHub 리포지토리로 이동하여 이 그림과 같이 눈금 표시가 나타나지 않을 때까지 해당 페이지를 새로 고칩니다.


그런 다음 GitHub 계정의 설정으로 이동한 다음 왼쪽 모서리에 있는 페이지로 이동합니다.


그리고 축하합니다 :) 반응 앱이 배포된 것을 볼 수 있고 반응 앱에 대한 라이브 링크를 얻을 수 있습니다.

그런 다음 사이트 방문 버튼을 클릭하여 귀하의 웹사이트를 보십시오 :).

이 비디오를 시청하여 도움을 받을 수도 있습니다.