Habit_tracker Github에 배포

작성했던 habit tracker를 github에 배포하는 과정을 해보자.

create-react-app에 와가지고 Deployment부분에 가서 Github Pages를 살펴보자.(나중에는 Netlify도 이용하자.)

 

1. 먼저 github 홈페이지에 들어가서 new repository를 이용해서 새로운 Repository를 만든다.(Description은 맘대로)
2. Public으로 배포한 다음 Create React App으로 프로젝트를 만들면 Git이 초기화가 된다.
3. 이미 있는 레퍼지토리에 추가할거기 때문에 아래와 같은 git 명령어를 친다.

git remote add origin https://github.com/K-J-HYEON/habit_tracker.git

1. 아래 명령어를 친다 / 이때까지 작업한 파일이 있다면 2번째 명령어를 친다.(*를 하면 모든 파일이 추가된다)

git push
git add *

계속해서 명령어를 쳐준다.

git commit -m "작업한 내용 메세지"
git push

이렇게 작성해서 origin을 설정하면서 해도 된다.

git push -u origin master

이렇게 하면 자동으로 git과 연결이 되어서 코드가 올라가게 되고 작성한 것들이 올라간다.

만약에 문제가 생기면 gitconfig을 연다. 유저정보가 정확하게 작성되어져 있는지 확인한다.

git config --list

settings에 들어가서 githubpages에 들어가서 None으로 되어 있는 것을 master로 바꿔주고 저장해준다.(배포될 주소가 생긴다.)

 

create react app사이트에 와서 Add homepage to package.json 부분을 실행할 것이다.

package.json에 들어가서 바로 보이는 부분 private 밑에 부분에서 배포한 깃허브 홈페이지 주소를 넣는다.

"homepage": "https://k-j-hyeon.github.io/habit_tracker/",

그 다음에 yarn을 이용하고 있으니까 Install gh-pages and add deploy to scripts in package.json 부분에 있는 명령어를 입력한다.

yarn add gh-pages

추가된 다음에 package.json 와서 script 부분에서 아래 문구를 추가해준다.

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

 

프로젝트를 빌드해서 사용자에게 배포할 수 있는 소스코드를 만든다. (빌드명령어 이용)

yarn build

 

build파일 안에 css코드와 js코드가 읽기 어렵게 있는데 이것은 웹팩이 가독성 좋게 사용자에게 최소한에 데이터를 보내기위해서 압축해서 보낸다.

 

아래 명령어를 실행

npm run deploy

그리고 githubpages 부분에서 gh-pages branch로 바꿔주고 세이브를 누른다.

그러면 React 어플리케이션이 올라가게 된다.

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://create-react-app.dev/docs/deployment/#github-pages

Deployment | Create React App