[ Vuejs + GitHub ] Vue 프로젝트 Github으로 배포 및 호스팅

안녕하세요 오늘은 자주 사용하는 Github으로 프로젝트를 배포나 호스팅 어떤 식으로 활용하는지 간략하게 정리해보고자 합니다.

Git이란?

Git은 형상 관리 도구 중 하나로, 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템입니다.

- Git은 소프트웨어 개발에서 소스 코드를 효과적으로 관리할 수 있도록 하는 무료, 공개 소프트웨어입니다.
- Git은 프로젝트 폴더 내에서 작업을 기록하고, 버전 관리를 통해 체계적인 개발이 가능하도록 합니다.
- 소스코드를 따로 주고 받을 필요 없이, git을 사용하면 하나의 프로젝트, 같은 파일을 여러 사람이 동시에 작업하는 병렬 개발이 가능하다는 것입니다!

https://prmblogs.tistory.com/45

자주 사용하는 35가지 GitHub 명령어 모음

GitHub에서 자주 사용하는 중요한 Git 명령어 35가지 목록을 간단하게 설명해드리겠습니다. 이 명령어들은 프로젝트 관리 및 협업에 도움을 주는 기능들을 다룹니다. GitHub 명령어 모음 git clone [URL]:

prmblogs.tistory.com

Github란?

GitHub [ 원래 이름: Logical Awesome ] 분산 버전 관리 툴인 깃(Git)를 사용하는 프로젝트를 지원하는 웹호스팅 서비스이다. Github는 버전 관리와 협업을 위한 코드 웹 호스팅 플랫폼으로, 언제, 어디서나 협업 프로젝트를 쉽게 진행할 수 있도록 돕는 역할을 합니다!

GitHub에는 여러가지 특징이 있습니다.

버전 관리: GitHub는 Git이라는 분산 버전 관리 시스템을 기반으로 하며, 소스 코드의 변경 이력을 추적하고 관리할 수 있습니다.

협업: 여러 사람이 동시에 작업하고 코드를 공유하며 협업할 수 있는 플랫폼입니다. 이슈 트래킹, 코드 리뷰, 브랜치 관리 등을 통해 효율적인 협업이 가능합니다.

저장소: GitHub에서는 개발 프로젝트를 저장소(repository)로 구성하여 코드 및 리소스를 관리할 수 있습니다. 이를 통해 프로젝트의 구조와 변경 사항을 체계적으로 관리할 수 있습니다.

이슈 트래킹: 버그, 기능 요청, 작업 등과 관련된 이슈들을 등록하고 관리할 수 있습니다. 이를 통해 개발 진행 상황을 추적하고 팀 간의 의사 소통을 원활하게 할 수 있습니다.

풀 리퀘스트: (Pull Request ) 개발자가 자신의 변경 사항을 다른 사람의 저장소에 제안할 수 있는 메커니즘입니다. 다른 개발자들은 해당 변경 사항을 검토하고 논의한 후, 원본 저장소에 병합할 수 있습니다.

웹 인터페이스: 코드 브라우징, 파일 비교, 히스토리 확인 등의 작업을 웹 브라우저 상에서 수행할 수 있습니다.

라이선스 관리: 프로젝트에 사용되는 오픈 소스 라이브러리나 프레임워크의 라이선스 정보를 관리하고 표시할 수 있습니다.

CI/CD 통합: GitHub Actions와 같은 기능을 통해 지속적 통합 (Continuous Integration) 및 지속적 배포 (Continuous Deployment)를 구축할 수 있습니다.

GitHub Pages: 정적 웹사이트 호스팅 기능을 제공하여, 저장소의 컨텐츠를 웹 사이트로 공개할 수 있습니다.

소셜 네트워킹: 개발자 커뮤니티와의 상호 작용을 촉진하기 위해 팔로우, 스타 등의 기능을 제공합니다.

Github ssh key 발급

이 Github 처음 사용한다면 먼저 ssh key 발급 받아야 소스코드를 쉽게 운영 가능합니다.
생각보다 간다합니다.

1. Open git bash ( 터미널 열기 )

$ ssh-keygen -t ed25519 -C "your_email@example.com"

본인 이메일주소 입력하고 대기하면 다음 알림 나옵니다.

Your identification has been saved in /c/Users/myuser/.ssh/id_rsa
Your public key has been saved in /c/Users/myuser/.ssh/id_rsa.pub
The key fingerprint AAAA@gmail.com

2. 생성된 ssh key을 출력하기

cat ~/.ssh/id_rsa.pub

3. 생성된 ssh key을 복사해 다음 경로 적속, 이미지 참고

Github profile -> Setting -> SSH and GPG keys -> New SSH key

4. 생성된 키를 등록하면 준비 끝!~

Vue 프로젝트 GitHub으로 배포

일반 VsCode에서 cmd 터미널이나 git 터니널을 열고 다음 단계대로 진행합니다.

프로젝트를 배포하기 위해 GibHub에서 새로운 reposity 추가해야합니다.

1. Github 계정을 인증

Git을 설치했을 때 가장 먼저해야 하는 것은 Github 사이트에 등록된 user name 과 e-mail 주소 확인하는것입니다. 이것은 commit 할때마다 사용자 정보 들어가서 미리 설정해놓는게 좋습니다.

다음 명령어로 사용자 이메일과 이름을 설정 가능합니다.

$ git config --global user.name "Aaron Prime" 
$ git config --global user.email Prime@example.com

2. git init

git init 명령어를 실행하면, 현재 디렉토리를 기준으로 Git 저장소가 생성됩니다.

$ git init

성공시 다음 코드 나오고요 아니면 프로젝트 경로를 다시 확인 바랍니다.

Initialized empty Git repository in /Users/dale/temp/our-project/.git/

3. git add

" git add . " 명령어로 디렉토리 내의 모든 파일이 Git으로 관리되도록 추가해줍니다.

$ git add .

추가적으로 git add 명령에 대한 설명

- 커밋(commit)하기 전에 저장을 원하는 파일들을 묶는 일
- 이 작업을 "스테이지에 파일을 올린다"라고 함
- 간단하게 'add'라고 함
- 내 컴퓨터의 스테이지에 작업한 10개 중 1~5번까지를 묶어서 커밋(commit)하고 싶다면, 1~5를 스테이지 올려야 함, 이때, 1~5파일을 스테이지로 올리는 과정을 add라고 함

4. git remote add origin

커밋하기 전에 프로젝트 저장소를 원격 저장소에 연결해 보겠습니다. 별칭으로 origin을 사용했는데 자신이 알기 쉬운 이름을 사용해도 되지만 관례적으로 origin으로 사용합니다.

git remote add origin https://github.com/userName/repoName.git

제일 쉬운 방법은 본인 reposity 들어가서 노랑부분 복사서 사용하면 아주 쉽습니다,

5. git commit

git commit 명령어는 어떤 순간 작업공간의 상태를 저장한 것입니다. 작업공간 안에 있는 모든 파일과 파일의 데이터를 사진 찍듯이 복사해서 저장소에 보존해 즉 커밋은 작업공간의 어떤 시점의 스냅샷이라고 할 수 있습니다.

'커밋한다'는 말은 커밋을 추가한다는 뜻입니다. 즉 현재 작업공간의 상태를 커밋으로 만들어서 저장소에 저장한다는 의미라고 볼 수 있습니다

git commit -m "first commit"

추가적으로 remote 관련 몇가지 명령 정리

* remote reposity 확인, 커밋하기 전에 어떤 reposity로 커밋되는지 미리 확인하기

$ git remote -v

* remote reposity 삭제, 상황에 따라 연결된 reposity 삭제할때 사용

git remote remove origin

OR

git remote rm origin

* remote 변경, 다른 reposity로 다시 연결, 연결후 git remote -v 명령어로 새로운 reposity 확인 추천

git remote set-url origin https:// new repority url here

* remote origin 확인, Git 명령어 중 하나로, 현재 설정된 원격 저장소인 "origin"에 대한 정보를 보여주는 명령어입니다.

git remote show origin

6. git push은 마지막 단계입니다.
원격저장소에 파일을 적용하는 일이 남은 것이고 git push 명령어를 실행하면 완성!

$ git push -u origin main

브랜치(branch)란?

브랜치란 독립적으로 어떤 작업을 진행하기 위한 개념입니다. 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있습니다.

여러 명이서 동시에 작업을 할 때에 다른 사람의 작업에 영향을 주거나 받지 않도록, 먼저 메인 브랜치에서 자신의 작업 전용 브랜치를 만듭니다.

그리고 각자 작업을 진행한 후, 작업이 끝난 사람은 메인 브랜치에 자신의 브랜치의 변경 사항을 적용합니다. 이렇게 함으로써 다른 사람의 작업에 영향을 받지 않고 독립적으로 특정 작업을 수행하고 그 결과를 하나로 모아 나가게 됩니다.

master와 main 브랜치 차이점

"master" 브랜치와 "main" 브랜치는 Git 저장소에서 주로 사용되는 기본 브랜치 이름입니다. 이 두 브랜치의 주요 차이점은 다음과 같습니다:

브랜치 이름: "master" 브랜치는 오래 전부터 Git의 기본 브랜치 이름으로 사용되어 왔습니다. 하지만 이 이름은 인종 차별적 언어와 연관지어져 문제가 될 수 있음을 인식하고, 이에 대한 대안으로 "main" 브랜치 이름이 제안되었습니다.

문화적 의미: "master"라는 용어는 옛 노예 소유자의 언어로 연결될 수 있으며, 이는 과거의 인종 차별과 연결될 수 있습니다. 이에 반해 "main"이라는 용어는 중립적이며 더 포괄적인 의미를 가집니다.

변화와 적용: 2020년 이후로 Git 커뮤니티 및 다양한 오픈 소스 프로젝트들은 "master" 브랜치를 "main"으로 변경하는 쪽으로 움직이고 있습니다. GitHub 등 다양한 플랫폼에서도 기본 브랜치 이름을 "main"으로 설정하는 경향이 늘어나고 있습니다.

정리해보면, "master" 브랜치와 "main" 브랜치의 가장 큰 차이는 이름에서 비롯된 문화적인 의미와 인식의 변화입니다. "main" 브랜치는 더 포괄적이고 중립적인 이름으로 쓰임이 확대되고 있는 추세입니다. 이러한 변경은 소프트웨어 개발 커뮤니티가 다양성과 포용성을 존중하며 보다 적절한 용어를 사용하려는 의도의 일부로 이루어진 것입니다.