Github 페이지에 React 앱 배포

우리는 많은 재미있는 것을 배우고 만들어 왔으며 React 앱을 구축하는 방법에 대한 좋은 아이디어가 있다고 생각합니다. 이제 이러한 앱을 배포하는 방법을 알고 진행 상황을 보여줄 실제 URL을 가질 때입니다!

우리는 Create React App을 사용하여 React 애플리케이션을 개발하고 있으므로 배포 프로세스를 위해 무엇을 제공해야 하는지 살펴보겠습니다!

반응 앱 만들기

필요한 유일한 마법 명령은 npm run build 입니다. 이 명령을 실행하면 프로덕션에 배포되기를 기다리는 모든 코드가 포함된 빌드 폴더가 생성됩니다.

이 폴더에서 모든 Javascript 및 CSS는 정적 폴더에 포함됩니다. Github Pages에서 이 폴더를 시작하고 실행하기 위해 이 폴더의 내용으로 무엇을 할 것인지 봅시다!

Github 페이지

주로 버전 관리를 위해 Github를 사용하기 때문에 Github Pages를 사용하여 무료로 내 앱을 호스팅할 것입니다.

운 좋게도 이 문제를 해결하고 바퀴를 재발명하는 것을 방지하는 패키지인 gh-pages 패키지가 있습니다. npm install gh-pages를 사용하여 패키지를 정상적으로 설치하면 준비가 되었음을 알릴 때마다 gh-pages 브랜치의 빌드 및 업데이트를 처리합니다. 어떻게 작동하는지 봅시다!

작동 방식

일반적으로 앱은 다른 앱과 마찬가지로 사용자 이름이 github.io인 하위 도메인에 배포되므로 앱에 루트 URL에 대한 정보를 잘 알리려면 package.json 파일에 homepage 특성을 추가해야 합니다. URL을 할당

"homepage":"https://yourGithubUsername.github.io/yourRepositoryName",

그런 다음 몇 가지 스크립트를 추가하여 빌드 명령을 실행하고 빌드 폴더를 생성한 다음 해당 폴더의 내용을 가져와 gh-pages 브랜치에 게시해야 합니다.

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

이제 변경 사항을 적용하고 앱을 배포할 때마다 실행npm run deploy하기만 하면 서버에서 실행됩니다.

마지막으로 기억해야 할 것은 리포지토리 설정에서 Github 페이지를 활성화하고 기본 분기를 gh-pages로 설정하는 것입니다.



이 미니 배포로 다른 단계에서 만날 때까지 React 위대함을 향한 여덟 번째 아기 단계를 끝낼 것입니다.

피드백이나 조언은 언제나 환영합니다. 여기에서, 거기에서, 그리고 모든 곳에서 나에게 연락하십시오!