Github에 대한 백엔드로 Json-Server와 함께 Create-React-App 배포

이 기사를 읽고 있다면 이미 다음 작업을 수행했다고 가정합니다.

Create-React-App을 사용하여 프로젝트를 만듭니다.

Json-Server를 사용 중이며 빠른 프로토타이핑을 위해 가짜 REST API로 사용 중인 db.json 파일이 있습니다.

애플리케이션이 로컬 환경에서 작동 중입니다.

앱에 GitHub의 저장소가 있습니다

.

이제 누군가와 링크를 공유할 수 있도록 앱을 GitHub에 배포하려고 합니다. 다음은 이를 수행하는 단계별 프로세스입니다.

1 단계:
Json-Server page으로 이동하여 지침을 따릅니다.

GitHub에서 별도의 저장소를 생성합니다.

거기에 db.json 파일을 업로드하십시오.

서버에 액세스하려면 https://my-json-server.typicode.com/<your-github-username>/<your-repo-name>로 이동하십시오.

2 단계:
일반적인 프로세스에 따라 애플리케이션을 GitHub에 배포합니다.

package.json 파일에 "홈페이지"속성을 추가합니다. http://<github-username>.github.io/<repo-name> 다음과 같이 보입니다:

기존 "스크립트"속성에 2개의 새 속성 추가 - predeploy 및 deploy:

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

아래에 표시된 바와 같이:

나중에 터미널에서 다음 명령을 실행합니다.

npm run build

npm run deploy

거의 끝났습니다. Github에서 앱을 업로드하고 빌드하는 데 약간의 시간이 걸릴 수 있습니다.

3단계:
앱의 저장소로 이동하여 설정을 엽니다. GitHub 페이지 섹션의 드롭다운 메뉴에서 gh-pages 분기를 선택합니다. 저장을 누르십시오. 다음이 표시되면 모든 것이 양호하고 앱이 빌드되고 있음을 의미합니다. gihub 페이지에서 앱이 라이브로 표시되는 데 일반적으로 최대 20-30분이 걸립니다.