Github 페이지를 사용하여 React 앱을 배포합니다.

현재 호스팅이 없고 무료로 무언가를 사용하고 싶다면 Github가 매우 좋은 옵션입니다. 이 단계별 자습서에서는 React 애플리케이션을 만들고 배포하는 프로세스를 살펴보겠습니다.

프로세스를 시작하기 전에 다음이 설치되어 있는지 확인해야 합니다.
Node.js - https://nodejs.org/en/download/

설치가 완료되면 터미널/텍스트 편집기로 이동하여 반응 애플리케이션을 생성할 위치를 결정할 수 있습니다. 이제 앱을 만들 준비가 되었으므로 다음을 입력합니다.

npm init react-app <your project name here>

이제 새 반응 애플리케이션과 함께 제공되는 모든 파일을 생성하므로 약 1분 정도 소요됩니다.

그런 다음 응용 프로그램이 포함된 폴더로 cd하려고 합니다. npm start를 실행하여 애플리케이션이 실행 중인지 확인하고 반응 로고가 있는 탭이 열려야 합니다. 당신이 그것을 볼 수 있다면 반응 응용 프로그램이 성공적으로 로드되었습니다.

npm start 

이제 반응 앱이 모두 설정되었으므로 Github 페이지로 이동하여 새 리포지토리를 만듭니다. 나는 개인적으로 내 리포지토리와 내 반응 앱의 이름을 동일하게 지정하는 것을 좋아하지만 원하는 경우 다른 이름을 사용해도 됩니다. 공개 및 빈 저장소인지 확인하여 README.md, 설명 등이 없는지 확인하십시오.

이 페이지가 표시됩니다

지금은 열어두고 다음 단계로 넘어갑니다.

ctrl+C를 눌러 서버가 종료되었는지 확인하고 다음 명령을 실행합니다.

npm install gh-pages --save-dev

여기에서 github 페이지를 설치하고 dev 종속성으로 저장합니다. 여기에서 개발자 종속성에 대한 설명 https://nodejs.dev/learn/npm-dependencies-and-devdependencies

설치된 후 텍스트 편집기에서 반응 애플리케이션으로 이동하고 package.json으로 이동합니다. 여기에 몇 가지를 추가해야 합니다.


"name"바로 위에 "homepage"를 추가할 것입니다: "http://"your-github-name".github.io/"your-repo-name", 쉼표를 추가하는 것을 잊지 마세요. 이것은 웹 애플리케이션에 대한 링크가 될 것입니다.

그런 다음 "스크립트"라고 표시된 위치를 탐색하고 해당 해시에 다음 두 가지를 추가할 것입니다.
"predeploy": "npm 실행 빌드",
"배포": "gh-pages -d 빌드",
최종 제품은 다음과 같습니다.

차이점을 보려면 위의 그림을 참조하십시오.

텍스트 편집기의 다음 단계(올바른 폴더에 있는지 확인)에 다음을 입력합니다.

git init

이제 이전에 리포지토리를 생성한 Github 페이지로 돌아가서 링크가 HTTPS로 설정되어 있는지 확인합니다.



git remote add origin이라고 표시된 위치를 복사하여 텍스트 편집기에 붙여넣습니다.

이렇게 하면 origin이라는 원격 저장소가 생성됩니다. 다음 두 명령을 실행하여 실행 중인지 확인할 수 있습니다.

git remote

원본 브랜치를 보여줍니다.

git remote -v

저장소의 링크를 보여줍니다. 모든 것이 올바르게 동기화되었는지 확인하는 좋은 방법입니다.

src/App.js로 이동하여 거기에 있는 모든 반응 코드를 삭제합니다. 앱 기능의 반환 내부에 일부 HTML을 추가하고 사이트에 변경 사항이 있는지 확인할 수 있습니다. 다른 npm start를 실행하고 페이지의 변경 사항을 확인할 수 있습니다.

앱이 완전히 배포되지 않았지만 아직 몇 가지 단계가 더 있습니다.

이 다음 단계에서는 코드를 리포지토리로 푸시합니다. 터미널에서 이 git 명령을 한 번에 하나씩 실행하십시오.

git add . 

git commit -m "Deploy my React app to Github Pages"

마지막으로 누락된 것은 여기에서 Github로 애플리케이션을 배포하는 것이므로 다음을 실행해야 합니다.

npm run deploy

다음 단계는 코드를 Github에 푸시하는 것입니다.

git push -u origin master

엄청난! 이제 모든 코드가 성공적으로 푸시되고 사이트가 실행됩니다!

이제 GitHub의 리포지토리로 이동하여 설정을 클릭하고 왼쪽에서 페이지가 보일 때까지 약간 아래로 스크롤합니다. 그 안에는 귀하의 웹사이트가 해당 링크에 게시되었음을 알리는 녹색 상자와 녹색 텍스트가 표시됩니다!

Github Pages를 사용하는 것은 개인 포트폴리오나 리액트 프로젝트에 적합하며 무료라는 점이 가장 좋습니다!