* create-react-app 사용하여 생성되었습니다
이 튜토리얼에서는 React 앱을 만들고 GitHub 페이지에 배포하는 방법을 보여 드리겠습니다.
React 앱을 만들려면 사람들이 처음부터 React 앱을 만들기 위해 사용할 수있는 도구 인 create-react-app 사용하겠습니다. React App을 배포하기 위해 Github에서 제공하는 무료 웹 호스팅 서비스 인 Github 페이지에 물건을 배포하는 데 사용할 수있는 NPM 패키지 인 gh-pages 사용하겠습니다.
이 튜토리얼을 따라 가면 GitHub 페이지에서 호스트 된 새로운 React 앱이 끝나면 사용자 정의 할 수 있습니다.
이 튜토리얼은 원래 영어에서 다음 언어로 번역되었습니다.
노드 및 NPM이 설치됩니다. 이 튜토리얼을 만드는 동안 사용할 버전은 다음과 같습니다.
$ node --version
v16.13.2
$ npm --version
8.1.2NPM을 설치하면 시스템에
npm및npxNPM 및 NPX)에 두 가지 명령이 추가됩니다.
git이 설치되었습니다. 이 튜토리얼을 만드는 동안 사용할 버전은 다음과 같습니다.
$ git --version
git version 2.29.1.windows.1GitHub 계정.
저장소 이름 : 원하는 이름을 입력 할 수 있습니다*.
* 프로젝트 사이트의 경우 원하는 이름을 입력 할 수 있습니다. 사용자 사이트의 경우 github은 리포지토리의 이름에 다음 형식이 있어야합니다.
{username}.github.io(예 :gitname.github.io).
입력 한 이름은 (a) Github 전역의 저장소에 대한 참조, (b) 저장소의 URL 및 (c) 배포 된 React 앱의 URL에서 나타납니다.
이 튜토리얼에서는 React 앱을 프로젝트 사이트로 배포 할 것입니다.
입력하겠습니다 : react-gh-pages
저장소 개인 정보 : 공개 (또는 개인 *)를 선택하십시오.
* GitHub 무료 사용자의 경우 GitHub 페이지에서 사용할 수있는 유일한 유형의 저장소가 공개 됩니다. GitHub Pro 사용자 (및 기타 유료 사용자)의 경우 공개 및 개인 저장소를 모두 GitHub 페이지와 함께 사용할 수 있습니다.
나는 선택할 것이다 : public
리포지토리 초기화 : 모든 확인란을 비워 두십시오.
따라서 github은
README.md,.gitignore및/또는LICENSE파일로 리포지토리를 사전 채우는 대신 빈 저장소를 생성합니다.
이 시점에서 GitHub 계정에는 빈 리포지토리가 포함되어 있으며 지정된 이름 및 개인 정보 유형이 있습니다.
my-app 이라는 React 앱을 만듭니다.
my-app(예 :web-ui)와 다른 이름을 사용하려는 경우이 튜토리얼에서my-app의 모든 발생을 대체하여 다른 이름 (예 :my-app>web-ui).
$ npx create-react-app my-app이 명령은 JavaScript로 작성된 React 앱을 생성합니다. TypeScript로 작성된 하나를 만들려면 대신이 명령을 발행 할 수 있습니다.
$ npx create-react-app my-app --template typescript
이 명령은 my-app 이라는 새 폴더를 생성하며, 여기에는 React 앱의 소스 코드가 포함됩니다.
React App의 소스 코드를 포함하는 것 외에도 해당 폴더는 git 저장소입니다. 폴더의 특성은 6 단계에서 진행됩니다.
지점 이름 :
master대maingit 리포지토리에는 하나의 지점이 있으며,이 분기는 (a)
master, 신선한 git 설치의 기본값; 또는 (b) 컴퓨터가 GIT 버전 2.28 이상을 실행 중이며 GIT 구성에서 해당 변수를 설정 한 경우 GIT 구성 변수,init.defaultBranch의 값 (예 :$ git config --global init.defaultBranch main)의 값 .git 설치에서 해당 변수를 설정하지 않았으므로 저장소의 지점은
master로 선정됩니다. 저장소의 지점에 다른 이름 ($ git branch로 확인할 수 있음)이main과 같은 경우; 이 튜토리얼의 나머지 부분에서master의 모든 발생을 다른 이름 (예 :master→main)으로 바꿀 수 있습니다.
새로 만들어진 폴더를 입력하십시오.
$ cd my-app이 시점에서 컴퓨터에 React 앱이 있으며 소스 코드가 포함 된 폴더에 있습니다. 이 튜토리얼에 표시된 나머지 명령은 해당 폴더에서 실행할 수 있습니다.
gh-pages NPM 패키지를 설치하십시오 gh-pages NPM 패키지를 설치하고 개발 종속성으로 지정하십시오.
$ npm install gh-pages --save-dev 이 시점에서 gh-pages NPM 패키지는 컴퓨터에 설치되며 React App의 종속성은 React App의 package.json 파일에 문서화되어 있습니다.
homepage 속성을 package.json 파일에 추가하십시오 텍스트 편집기에서 package.json 파일을 엽니 다.
$ vi package.json이 튜토리얼에서 사용할 텍스트 편집기는 VI입니다. 원하는 텍스트 편집기를 사용할 수 있습니다. 예를 들어, Visual Studio Code.
이 형식으로 homepage 속성을 추가하십시오*: https://{username}.github.io/{repo-name}
* 프로젝트 사이트의 경우 이것이 형식입니다. 사용자 사이트의 경우 형식은
https://{username}.github.io입니다.create-react-app문서의 "Github 페이지"섹션에서homepage속성에 대한 자세한 내용을 읽을 수 있습니다.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true, 이 시점에서 React App의 package.json 파일에는 homepage 라는 속성이 포함되어 있습니다.
package.json 파일에 배포 스크립트를 추가하십시오 텍스트 편집기에서 package.json 파일을 엽니 다 (아직 열리지 않은 경우).
$ vi package.json scripts 객체에 predeploy 속성과 deploy 속성을 추가하십시오.
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", 이 시점에서 React App의 package.json 파일에는 배포 스크립트가 포함되어 있습니다.
로컬 git 저장소에 "원격"을 추가하십시오.
이 형식으로 명령을 발행하여 다음을 수행 할 수 있습니다.
$ git remote add origin https://github.com/{username}/{repo-name}.git 상황에 대해 해당 명령을 사용자 정의하려면 {username} GitHub 사용자 이름으로 바꾸고 {repo-name} 1 단계에서 만든 Github 저장소의 이름으로 바꾸십시오.
제 경우에는 실행하겠습니다.
$ git remote add origin https://github.com/gitname/react-gh-pages.git이 명령은 GIT 에게이
gh-pagesgit 저장소 내에서$ git push명령을 발행 할 때마다 물건을 밀고 싶은 곳을 알려줍니다.
이 시점에서 로컬 저장소에는 URL이 1 단계에서 만든 Github 저장소를 가리키는 "원격"이 있습니다.
React 앱을 Github 저장소로 밀어 넣으십시오
$ npm run deploy
package.json에 정의 된predeploy및deploy스크립트가 실행됩니다.후드 아래에서
predeploy스크립트는 분산 가능한 버전의 React 앱을 빌드하여build라는 폴더에 저장합니다. 그런 다음deploy스크립트는 해당 폴더의 내용을 GitHub 저장소의gh-pages브랜치의 새로운 커밋으로 푸시하여 해당 분기가 아직 존재하지 않으면 생성됩니다.
기본적으로
gh-pages지점의 새로운 커밋은 "업데이트"라는 커밋 메시지를 갖습니다. 다음과 같이-m옵션을 통해 사용자 정의 커밋 메시지를 지정할 수 있습니다.$ npm run deploy -- -m " Deploy React app to GitHub Pages "
이 시점에서 GitHub 리포지토리에는 gh-pages 라는 지점이 포함되어 있으며, 여기에는 분산 가능한 버전의 React 앱을 구성하는 파일이 포함되어 있습니다. 그러나 우리는 아직 해당 파일을 제공 하도록 Github 페이지를 구성하지 않았습니다.
gh-pages/ (root)그게 다야! React 앱이 Github 페이지에 배포되었습니다!
이 시점에서 React 앱은 4 단계에서 지정한 homepage URL을 방문하는 사람에게 액세스 할 수 있습니다. 예를 들어, 내가 배포 한 React 앱은 https://gitname.github.io/react-gh-pages에서 액세스 할 수 있습니다.
이전 단계에서 gh-pages NPM 패키지는 분산 가능한 버전의 React 앱을 GitHub 저장소의 gh-pages 라는 지점으로 밀었습니다. 그러나 React 앱의 소스 코드는 아직 Github에 저장되지 않았습니다.
이 단계에서는 GitHub에 REACT 앱의 소스 코드를 저장하는 방법을 보여 드리겠습니다.
이 튜토리얼을 팔로우하는 동안 변경 한 변경 사항을 로컬 git 저장소의 master 지점에 저장하십시오. 그런 다음 해당 지점을 Github 저장소의 master 브랜치로 밀어 넣으십시오.
$ git add .
$ git commit -m " Configure React app for deployment to GitHub Pages "
$ git push origin master이 시점에서 Github 저장소를 탐색하는 것이 좋습니다.
master와gh-pages두 가지 지점이 있습니다.mastergh-pages
create-react-app 배포 안내서CNAME 파일을 보존합니다create-react-app 통해 생성 된 기본 반응 앱을 독특한 것으로 바꿀 시간입니다!master - React 앱의 소스 코드gh-pages 해당 소스 코드 에서 구축 된 React 앱이 튜토리얼의 유지 관리에 기여한이 사람들에게 감사드립니다.
이 목록은 (a) (a) 결국 master 에 병합 된 풀 요청을 제출 한 각 사람과 (b) 다른 방식으로 기여하고 (예 : 건설적인 피드백 제공) 나는이 목록에 그들을 포함시킨다.
