GH 페이지에서 반응 프로젝트를 호스팅하는 방법은 무엇입니까?

반응 웹 사이트를 호스팅하고 싶습니까? 각각의 모든 프로젝트에 대해 청구서를 지불할 여유가 없습니까?

이제 Github Pages 의 도움으로 무료로 할 수 있으니 걱정하지 마세요. GH Pages를 사용하면 안전한 방식으로 모든 웹사이트를 무료로 호스팅할 수 있습니다.

github 서버에서 정적 웹 사이트나 블로그를 호스팅할 때 기본적으로 도메인 이름은 {username}.github.io/{repo-name} 형식입니다. 자신의 도메인에서 호스팅하려는 경우에도 문제 없습니다.

이 게시물에서는 GH 페이지에서 반응 프로젝트를 호스팅하는 방법을 살펴보겠습니다.

계속 진행하기 전에 Github가 무엇이고 반응 앱을 만드는 방법을 알고 있다고 가정합니다. 시작하자...

저장소 만들기

먼저 Github 프로필에 리포지토리를 만듭니다. 예를 들어 이름이 deploy-react-app인 앱을 만들고 싶습니다.



참고: 이미 반응 앱을 개발하여 Github에 푸시한 경우 이 섹션을 건너뛸 수 있습니다.

반응 앱 만들기

repo를 생성한 후 create-react-app를 사용하여 반응 앱을 생성해 보겠습니다.

npx create-react-app deploy-react-app
cd deploy-react-app

일단 반응 앱을 만들고 해당 디렉토리로 변경했습니다. 터미널/명령 프롬프트에서 다음 명령을 실행합니다.

git init
git add -A
git commit -m "initial commit"
git remote add origin https://github.com/username/deploy-react-app.git
git push origin master

참고: username를 자신의 Github 사용자 이름으로 바꾸고 Github repo에 https 대신 ssh를 사용하는 경우 추가git remote add origin [email protected]:username/deploy-react-app.git
코드를 Github에 푸시하면...

GH 페이지에 앱 배포

반응 앱의 개발 종속성으로 gh-pages를 설치합니다.

   npm install gh-pages --save-dev

homepage 파일에 package.json 속성을 추가합니다. homepage 속성 값은 문자열이어야 합니다. http://{username}.github.io/{repo-name} (username는 Github 사용자 이름이어야 하고 repo-name는 GitHub 리포지토리여야 합니다)

   "homepage": "https://g-savitha.github.io/deploy-react-app"

프로젝트의 predeploy에 기존 deploy 속성과 함께 scripts 및 package.json 속성을 추가합니다.

   "scripts": {
   "start": "react-scripts start",
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
   },

predeploy 스크립트는 배포용 애플리케이션을 번들로 묶는 deploy 스크립트를 실행한 후 시작됩니다.

응용 프로그램을 GH 페이지에 배포합니다.

   npm run deploy

애플리케이션을 성공적으로 배포한 후 github 리포지토리를 엽니다. 리포지토리의 설정 탭으로 이동하여 Github 페이지 섹션에 도달할 때까지 아래로 스크롤하고 gh-pages 분기를 소스로 선택합니다.

팔! 💥 귀하의 웹사이트는 이제 Github 페이지에서 호스팅됩니다.


Github 외에 Heroku , Vercel , Firebase , Netlify 등에서 웹사이트를 호스팅할 수 있습니다. 가능한 한 많이 시도하여 배포 요구 사항에 가장 적합한 것을 결정하십시오. 결국 그들은 무료로 사용할 수 있습니다 😃.

좋은 다음 단계를 위해 배포된 애플리케이션에 사용자 지정 도메인을 추가해 보십시오. 프로젝트에 대해 고유한 도메인을 갖는 것이 좋습니다.

다음 시간까지 즐거운 코딩하세요! 💻 🎉