[Git] 프로젝트를 GitHub와 연동하고 Netlify로 배포하기

GitHub

📌 Git 설치 , Local 환경 설정

1️⃣  개행 문자(Newline) 설정

## macOS
git config --global core.autocrif input

## Windows
git config --global core.autocrif true

 

2️⃣ 사용자 정보를 입력한다.

커밋(버전 생성)을 위한 정보 등록

git config --global user.name 'KimAeris'
git config --global user.email '--@naver.com'

macOS : input / windows : true

사용자 이름은 되도록  github와 맞춰준다 (필수X)

이메일은 github와 동일하게 한다.

 

3️⃣ git 구성을 확인한다. 

git config --global --list

 

 

📌 프로젝트 등록하기

1️⃣ 현재 프로젝트에서 변경사항 추적(버전 관리)을 시작 

git init

# 깃 상태 확인
git status

 

[ master ] 브랜치가 생성이 되고,

프로젝트에서 버전 관리를 시작하기는 하지만 어떤 파일을 관리할 건지 지정하지 않음 (파일 빨강색)

 

2️⃣ 버전 관리를 하기 위해 git에 등록한다.

git add .

파일을 지정할 수도 있지만, add . 로 모든 파일을 추적중인 상태로 변경한다.

 

3️⃣  메시지를 입력하고 버전을 생성한다.

commit : 버전 생성 

git commit -m '프로젝트 생성'

 

파일을 수정하거나 생성하면 다시 버전관리를 하기 위해 "git add ." 명령어를 실행하여 추적을 시작한다.

👉 버전 관리를 할 수 있는 파일이 된다.

 

한번 더 commit을 해주면 새로운 버전이 생성된다.

git commit -m 'main.js 추가'

 

4️⃣ 등록한 버전을 확인한다.

git log

 

 

✅ 예시

README.md 라는 파일을 신규 생성하고 "git status"를 입력하면

빨간색으로 버전 관리되지 않는 파일이 나온다.

 

"git add ." 또는 "git add README.md" 를 입력해서 파일을 등록하고, 다시 "git status"로 상태를 확인한다

 

" git commit -m '--' " 로 버전을 생성하고, "git log" 로 버전을 확인할 수 있다.

 

"git push origin main" 으로 원격 저장소 origin의 main 브랜치에 업로드한다.

 

 

📌 Repository 생성 후 프로젝트 업로드

github에서  repository 를 새로 생성한다.

 

실제 컴퓨터에서 만든 starbucks 예제를 비어있는 저장소에 업로드 해야하므로 원격 주소를 복사한다.

 

버전관리를 하고있는 starbucks 프로젝트를 github의 저장소에 업로드 한다.

 

1️⃣ origin이라는 이름의 원격 저장소를 생성한다. 

git remote add origin https://github.com/kimAeris/starbucks-vanilla-app.git

remote : 원격 ( 우리의 컴퓨터랑 떨어져 있는 외부 GitHub이라는 서비스의 비어있는 저장소 )

 

2️⃣ 원격의 저장소의 master 브랜치에 프로젝트를 업로드(push) 한다.

git push origin master

 

 

Netlify

📌 지속적인 배포 ( Continuous Deployment )

git에 새로운 버전이 업데이트 될 때마다 자동으로 사이트에 배포해준다.

 

이미 배포된 프로젝트에 README.md 라는 파일을 신규 생성하고 "git status"를 입력하면

빨간색으로 버전 관리되지 않는 파일이 나온다.

 

"git add ." 또는 "git add README.md" 를 입력해서 파일을 등록하고, 다시 "git status"로 상태를 확인한다

 

" git commit -m '--' " 로 버전을 생성하고, "git log" 로 버전을 확인할 수 있다.

 

"git push origin main" 으로 원격 저장소 origin의 main 브랜치에 업로드한다.

Netlify의 프로젝트 Deploy를 확인하면,

 

commi할 때 포함했던 메시지를 볼 수 있다.

 

👉 Netlifyrk 버전의 내역을 원격 저장소에서 가지고 와서 실제 사이트로 배포한다.

 

Vercel

 

테스트 배포 사이트 

https://vercel.com/

Vercel: Build and deploy the best Web experiences with The Frontend Cloud

 

 

출처

프론트엔드 웹 개발의 모든 것 초격차 패키지