GitHub 페이지에 create-react-app 원페이지 애플리케이션 배포

Github Pages를 사용해 볼 수 있는 한 페이지짜리 애플리케이션을 만들고 싶었습니다. 내가 가진 문제는 지속적으로 오류 404 또는 readme.md가 발생했습니다. 이러한 문제를 해결하고 기본 create-react-app 페이지를 표시하는 방법을 찾기 위해 많은 기사를 읽었습니다. 그러나 나에게 맞는 즉시 사용할 수 있는 솔루션을 찾지 못했습니다.

그래서 여기에서는 내 GitHub 페이지가 내 리포지토리와 작동하도록 하기 위해 수행한 작업을 설명합니다. 프로젝트 생성을 위해 GitHub 저장소 생성, 프로젝트 복제, create-react-app 실행을 건너뛰었습니다. 내 단계를 따르기 전에 이미 그렇게 했다고 가정합니다.

여러 페이지로 애플리케이션을 디자인하는 경우 추가 구성이 필요할 수 있음을 명심하십시오. 내 애플리케이션에는 한 페이지만 포함되어 있기 때문에 react-router를 사용하지 않았습니다.

시작하겠습니다.

1단계:

node_modules 폴더를 제거하고 npm 모듈을 다시 설치합니다. 이것은 선택 사항이며 이전에 배포가 작동하지 않은 경우 수행해야 합니다(예: 다음 오류가 나타남: 'fatal: Couldn't find remote ref refs/heads/gh-pages' ).

2 단계:

내가 읽은 소스에서 GitHub 페이지가 SPA와 잘 작동하지 않는다는 지적을 받았기 때문에 package.json 파일을 거의 변경하지 않아도 되었습니다.

먼저 devDependencies로 gh-pages를 설치합니다.

npm i --save-dev gh-pages // -> using npm
yarn add -D gh-pages // -> using yarn

gh-pages 모듈은 응용 프로그램 배포를 돕고 코드를 배포할 분기를 만듭니다. 따라서 브랜치를 수동으로 생성할 필요가 없습니다.

이제 package.json 파일에 추가해야 합니다.

{
  "homepage": "https://[GITHUB_USER].github.io/[GITHUB_REPOSITORY_NAME]"
}

이것은 프로젝트 홈페이지의 URL이 됩니다.

그런 다음 package.json의 scripts 섹션에 다음 줄을 추가합니다.

{
  "predeploy": "npm run build", // or yarn build
  "deploy": "gh-pages -b gh-deploy -d build",
}

-b 푸시할 브랜치의 이름, 기본 브랜치는 gh-pages입니다.
-d 소스 파일의 기본 디렉토리
deploy를 실행하면 자동으로 predeploy가 먼저 실행됩니다. 또한 predeploy 명령으로 빌드한 코드는 gh-deploy 분기에 배포됩니다.

최종 결과는 다음과 같아야 합니다.

{
  "homepage": "https://[GITHUB_USER].github.io/[GITHUB_PROJECT]",
  ...
  "scripts": {
    "predeploy": "npm run build", // or yarn build
    "deploy": "gh-pages -b gh-deploy -d build",
    ...
  },
  ...
  "devDependencies": {
    "gh-pages": "^3.2.3"
  },
  ...
}

3단계:

GitHub를 열고 저장소를 엽니다.

설정을 클릭합니다.

페이지를 클릭합니다.

드롭다운에서 분기gh-deploy를 선택합니다.

저장을 클릭합니다.

배포가 완료될 때까지 기다린 다음 앱을 확인하십시오.

이것은 한 페이지 애플리케이션을 GitHub 페이지에 배포할 수 있는 방법 중 하나입니다. 같은 문제로 어려움을 겪고 있는 경우 도움이 되기를 바랍니다.

출처

https://create-react-app.dev/docs/deployment/

https://towardsdev.com/github-pages-does-not-work-for-me-f9d48fd44a5f