VScode에서 프로젝트 Git Hub에 업로드하기 & 배포하기

 

 git hub

GitHub은 소스 코드 형상 관리 도구이자, 온라인 협업 플랫폼이다. GitHub에서는 Git 버전 관리 시스템을 사용하여 소스 코드를 관리할 수 있으며 오픈 소스 프로젝트, 개인 프로젝트, 회사 프로젝트 등을 저장, 공유, 개발할 수 있는 환경을 제공해 준다. GitHub에서는 코드 리뷰, 버그 트래킹, 프로젝트 관리 등의 기능을 제공하여, 협업 프로젝트를 쉽게 관리할 수 있다.

 

Upload

- vscode 터미널에서 작성

 

1) 깃 초기화작업

git init

- 프로젝트 폴더에 깃 폴더가 생성됐는지 확인해보면된다 (숨긴 항목 체크하면 보임)

 

2) 이름, 이메일 지정

git config --global user.name 유저이름
git config --global user.email 유저이메일

예시) git config --global user.email aaaa@naver.com

※ 맨 처음 한번만 지정하면 된다

 

3) 이름, 이메일 제대로 들어갔는지 확인

git config --list

- 엔터 반복해서 누르면 정보가 뜬다. 빠져나올 때는 키보드에서 q 키를 누름

 

4) 깃에 추가

git add .

-.(점) 입력 시 해당 프로젝트 폴더의 모든 파일이 업로드된다. 일부만 업로드하고 싶을 경우 파일명을 적어주면 됨

 

5) 메시지 입력

git commit -m "ver01"

- Git 버전관리 프로그램에서 사용하는 명령어로 현재 저장소에서 변경사항 저장하고,  저장 시 사용할 커밋 메시지 저장

-m (메시지 지정) "ver01" (보낼 메시지)

 

6) 커밋된 내용 업로드 주소 지정

git remote add origin 원격지주소

- 원격지주소는 생성한 레파지토리에 들어가면 확인할 수 있다.

- Git 버전 관리 시스템에서 사용하는 명령어로 원격저장소를 추가하고 이름을 지정 (origin은 기본적으로 지정되는 저장소이름)

원격지주소 확인하기

 

📌추가 명령어

git remote -v	현재 원격저장소의 정보를 표시, v는 버전의 약자로 저장소 이름과 URL보여줌
git remote remover 원격지주소	현재 지정된 원격 저장소를 제거
git remote rename 예전주소 새주소	현재 지정된 원격 저장소 이름 변경 old ->new

 

내용 수정 후 재 업로드

1) git add .
2) git commit -m "메시지"
3) git push origin master

※ 배포까지 했을 경우 터미널에 아래 명령어 입력

npm run deploy

- pakage.json 파일에 정의된 script 섹션에서 deploy(개발자가 정의한 특정 명령어)를 실행한다. 

: 보통 웹 애플리케이션을 배포하거나 특정 서버에 파일을 업로드하는 명령어 등을 사용

 

※ 위 작업까지 했는데 업로드 반영이 안됐을 경우 Default branch 확인

 

홈페이지 배포

1) 터미널에 라이브러리 설치

yarn add gh-pages

2) pakage.json에 필드추가

"homepage": "http://사용자이름.github.io/레포지토리이름"

맨 아래 homepage

3) pakage.json의 Script부분에 아래 추가

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

4) 홈페이지 배포 명령어 - 터미널

npm run deploy

5) 깃허브 설정

[Settings]->[Pages]->[Source:Deploy from a branch]->[Branch:gh-pages]

위와 같이 Source와 Brance를 설정해 준 다음 위 주소로 들어가면 배포 완료!