TinyHow2: React용 GitHub 페이지 호스팅(사용자 지정 도메인 포함)

요구 사항:

이 짧은 지침은 다음과 같은 가정하에 작성되었습니다.

이미 GitHub 작업 흐름, Node.js 및 Npm 에 익숙해졌습니다.

앱이 소유한 GitHub 저장소에 깔끔하게 저장됩니다.

콘솔/터미널 창에서 작업할 수 있습니다.

TLDR 모드에 있고 긴 기술 교육을 받을 시간이 없습니다.

본인이 아닌 경우 이detailed instruction를 참조하세요.

설정:

a) GitHub에서 첫 번째 React(JS) 앱의 dev-branch에 대한 마지막 커밋을 만들었습니다.

b) GitHub Page 을(를) 사용하여 배포하고 싶어 안달이 납니다.

c) 이미 깔끔한 이름으로 사용자 지정 도메인을 확보했습니다. GoDaddy, Bluehost, Namecheap 또는 유사한 (도메인) 호스팅 서비스에서 호스팅하고 있습니다.

접근:

1) 콘솔/터미널 창을 열고 React 프로젝트가 포함된 폴더 안에 있는지 확인하고 다음을 실행합니다.

   npm install gh-pages

참고: package.json를 열고 여기에 언급된 모든 항목이 제대로 작동하려면 다음 종속성이 설치되어 있는지 확인하십시오.

  "devDependencies": {
    "gh-pages": "^3.2.3"
  }

2)
2a) package.json를 열고 프로젝트 이름 위에 homepage를 추가합니다.

  "homepage": "https://www.your-custom-domain-name.whatever",
  "name": "your-react-project-name",

2b) 단일 항목이 www.your-custom-domain-name.whatever인 공용 폴더에 CNAME 파일을 추가합니다.



3) script의 package.json 섹션까지 아래로 스크롤하고 다음을 추가했는지 확인합니다.

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

4) your hosting service 측에서 사용자 지정 도메인을 구성합니다.

도메인 호스팅 대시보드에서 Advanced DNS 탭/옵션을 찾기만 하면 됩니다.

다음 A 레코드를 생성합니다.

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153

Host: www 및 Value: your-github-username.github.io 를 사용하여 CNAME 레코드를 만듭니다. 그런 다음 모든 것을 저장하십시오.

참고: 이러한 변경 사항을 적용하는 데 시간이 걸릴 수 있습니다.

5) 콘솔/터미널 창을 다시 열고 다음을 실행합니다.

   npm run deploy

6) github.com에 접속하여 배포할 저장소로 이동하여 Settings 탭을 찾은 다음 Pages를 클릭합니다.

7) 소스로 Branch: gh-pages를 선택합니다.

8) 사용자 정의 도메인이 DNS 검사를 통과했는지 확인하고 나중에 확인하는 것을 잊지 마십시오Enforce HTTPS. 모든 것이 잘 진행되면 다음을 확인해야 합니다.



Martin Katler의 배너 사진