Github Dashboard에서 시작
Dashboard 화면 왼쪽 Create repository 버튼을 클릭합니다.
원격 저장소 생성과 Push - by. UXKM
- Gulp
- 배포(Deploying)
- 원격 저장소 생성과 Push
요약 설명
GitHub에 저장소(Repository)를 생성한 후, Gulp가 빌드하기 전의 원본 소스(src 폴더)는
main브랜치에, 빌드된 결과물(dist 폴더)은 실제 웹에 배포하기 위해gh-pages브랜치에 푸시하는 과정입니다.
7.1.1. 시작하기에 앞서...
중요합니다!
본 커리큘럼에서는 git과 GitHub의 개념 및 역할에 대한 설명은 포함되어 있지 않습니다.
따라서 git과 GitHub를 처음 접하시는 분들께는 다소 어렵고 생소하게 느껴질 수 있습니다.
하지만,
이 페이지의 커리큘럼을 천천히, 꼼꼼하게 따라가면서 직접 실행해 보는 것만으로도 충분히 익숙해질 수 있습니다.
필요한 부분은 추가적으로 학습하면서 차근차근 익혀 나가면 됩니다.
7.1.2. Github 저장소(Repository) 생성
개인 Github 저장소(Repository)가 없다는 전제하에 진행합니다.
Github 계정을 생성하고 로그인하세요.
(계정 생성 과정은 생략합니다.)
저장소(Repository) 정보 설정 및 생성
- Repository name (필수): 저장소 이름 설정
- Description: 간단 소개 글 작성
- Add a README file: README.md 파일 생성
저장소 이름은 계정이름.github.io로 합니다.
아래 이미지에서 예시된 계정 이름 UXKM-Gulp처럼 대문자가 섞여 있어도,
소문자로 변경하여 사용해도 전혀 문제 없습니다. GitHub에서는 계정 이름과 저장소 이름이 대소문자를 구분하지 않으며,
소문자로 입력해도 올바르게 인식됩니다.
단, 일관된 표기를 유지하는 것이 좋습니다. 또한, Gulp 실습 중 혼동을 줄이기 위해 소문자로 통일하는 것을 추천합니다.
※
본 커리큘럼에서 저장소 이름을 GitHub 주소 형태로 지정하는 이유는,
저장소 이름을 도메인처럼 활용하여 소스의 모든 경로를 루트 기준(/)의 절대 경로로 설정하기 위함입니다.
이렇게 하면 리소스 경로 관리가 간편해지고, 배포 후에도 경로 오류를 최소화할 수 있습니다.
※ 보통의 경우에는 저장소 이름을 목적에 맞는 하나의 단어로 정합니다.
저장소 이름, 간단 설명을 등록하고 Add a README file에 체크 후 Create repository 버튼을 클릭합니다.
저장소 생성 확인
전 단계에서 설정한 내용으로 저장소가 생성됩니다.
Repository name과 Description에 등록한 내용으로 README.md 파일이 생성된 것을 확인할 수 있습니다.
저장소 주소 확인
초록색 Code 버튼을 클릭하여 저장소 주소를 확인합니다.
저장소 주소는, GitHub 저장소와 로컬 프로젝트 폴더를 연결하는 데 사용되며,
Git 명령어를 통해 원격 저장소를 추가하거나 클론할 때 필요합니다.
7.1.3. 로컬(Local) 폴더와 Github 저장소(Repository) 연결
GitHub에 배포하려면, 지금까지 로컬에서 Gulp로 작업해온 프로젝트 폴더와 새로 생성한 GitHub 저장소(Repository)를 연결해야 합니다.
GitHub Desktop이라는 편리한 GUI 도구가 있지만, 도구의 선택과 사용은 여러분의 몫이기에
본 커리큘럼은 기초적인 방법인 터미널을 사용하는 방법으로 진행합니다.
git init
Gulp로 작업한 폴더를 Git이 추적할 수 있는 저장소로 만들기 위해, 터미널에 아래 명령을 실행합니다.
git init가 정상으로 실행되면 파란 밑줄처럼 메시지가 나타납니다.
Initialized empty Git repository in D:/_uxkm/_gulp_setting/.git/ (UXKM이 세팅한 폴더 경로)
Initialized empty Git repository in 각자 Gulp를 세팅한 폴더 경로/.git/ (각자 세팅한 폴더 경로)
그리고 Gulp 폴더에는 반투명의 .git 폴더가 생성됩니다.
git remote add origin
Gulp 폴더를 저장소와 연결하기 위해 아래 명령을 실행합니다.
(아래 이미지, Github 좌측 상단부분의 계정 이름, 저장소 이름을 참고하세요.)
UXKM이 생성한 Github 저장소 기준으로 하면,
git remote add origin https://github.com/UXKM-Gulp/uxkm-gulp.github.io.git
각자 세팅한 Github 저장소 기준으로 하면,
git remote add origin https://github.com/계정 이름/저장소 이름.git
명령을 실행한 후 아래 이미지처럼 별도의 메시지 출력 없이 커서만 다음 줄로 이동하거나, 명령 프롬프트가 조용히 넘어갔다면 정상적으로 실행된 것입니다.
로컬(Local) 폴더와 Github 저장소(Repository)가 정상적으로 연결되었는지 확인하려면 터미널에 아래 명령을 입력합니다.
위 이미지처럼 fetch와 push 경로가 git remote add origin 명령으로 입력한 GitHub 저장소 주소와 동일하게 표시된다면,
로컬 프로젝트와 GitHub 저장소가 정상적으로 연결된 것입니다.
7.1.4. Push 권한 설정
공개된 GitHub 저장소는 누구나 변경 사항을 가져오는 Pull은 가능하지만,
변경 사항을 반영하는 Push는 저장소의 소유자나 쓰기 권한이 부여된 사용자만 할 수 있습니다.
앞선 과정에서 로컬 Gulp 프로젝트와 GitHub 원격 저장소를 연결했지만,
현재 상태는 읽기(Pull)만 가능한 연결이며, 쓰기(Push) 권한은 인증을 통해 획득해야 합니다.
이 부분도 앞서 언급한 GitHub Desktop과 같은 GUI 도구를 사용하면 더 간편하게 진행할 수 있지만,
본 커리큘럼에서는 터미널을 통해 직접 권한을 등록하고, 원격 저장소로 Push하는 과정까지 진행합니다.
권한 설정을 위해 Personal access tokens 생성
Github 페이지 우측 상단 프로필 이미지를 클릭합니다.
프로필 메뉴 하단 Settings를 클릭합니다.
Settings 페이지 왼쪽 메뉴 맨 하단 Developer Settings를 클릭합니다.
Developer Settings 페이지 왼쪽 메뉴 Personal access tokens 클릭 후 Tokens (classic) 클릭
Generate new token 버튼 클릭 후 Generate new token (classic)을 클릭합니다.
New personal access token (classic) 페이지에서,
Note에 토큰 이름 또는 사용 목적을 적고,
Expiration에서 토큰 만료 기간을 선택하고,
Select scopes의 모든 항목을 체크한 후
Generate token 버튼을 클릭합니다.
Token 생성이 완료되었습니다.
중요합니다.
토큰 생성이 완료된 후 코드가 있는 화면을 벗어난 후에는 다시 토큰을 확인할 수 없습니다.
따라서 생성 즉시 토큰 코드를 복사하거나 메모장 등에 안전하게 저장해 두어야 합니다.
이를 놓치면 동일한 권한의 토큰을 새로 생성해야 하므로 주의가 필요합니다.
Github 원격 권한 등록(관리자 자격 증명)
방금 생성한 Personal access tokens과 Github 정보로 관리자 자격 증명을 진행합니다.
터미널에서 아래 명령을 실행합니다.
ex,
git remote set-url origin https://<복사한 토큰 코드>@github.com/<유저 이름>/<저장소 이름>
UXKM 기준으로 하면,
git remote set-url origin https://ghp_ajs···kl7aSDas@github.com/UXKM-Gulp/uxkm-gulp.github.io
아래 이미지처럼 결과 출력 없이 실행이 완료됩니다.
7.1.5. Github 저장소로 Push
로컬 Gulp 폴더의 루트(/) 파일들과 src 폴더를 원격 저장소로 Push 합니다.
이전에 생성([2.4. Gulp 기초 세팅])한 .gitignore 파일 설정에 따라
dist 폴더와 node_modules 폴더는 커밋 대상에서 제외되므로,
이 두 폴더는 Push되지 않습니다.
기본 브랜치(branch)를 main으로 변경
Push 과정에서 혹시 모를 오류를 방지하기 위해 미리 이 작업을 진행합니다.
git branch -m <변경 전 브랜치명> <변경 후 브랜치명>
git branch -m master main
git pull
Github 저장소를 생성할 때 README.md도 같이 생성했기 때문에,
Push 과정에 충돌을 방지하기 위해 해당 파일을 로컬 Gulp 폴더로 먼저 가져와야 합니다.
터미널에서 아래 명령을 실행합니다.
git pull origin <브랜치명>
git pull origin main
git pull 명령이 실행되고, 원격 저장소에만 존재하던 README.md 파일이 로컬 프로젝트 폴더로 병합됩니다.
이제 로컬 Gulp 폴더에 원격 저장소의 파일이 병합된 상태이므로, 충돌 없이 git push를 진행할 수 있습니다.
git push
로컬 Gulp 폴더의 루트(/) 파일 및 src 폴더의 모든 파일을
Github 저장소 main 브랜치로 Push 합니다.
터미널에서 아래 명령을 한 줄씩 따로 실행합니다.
아래 이미지는 터미널에 한 줄씩 명령을 실행한 결과입니다.
commit 되는 파일을 목록과, push 내용을 확인할 수 있습니다.
UXKM에서는 commit message를 "first push"로 작성했습니다.
README.md 파일만 존재하던 Github 저장소 main 브랜치에 방금 Push 한 파일들이 commit message("first push")와 함께 존재하는 것을 확인할 수 있습니다.
7.1.6. 만약 위의 과정이 진행되지 않는다면..
중요합니다. 이 섹션은 실패했을 때만 진행하세요.
git init부터 git push까지의 과정 중에
진행이 안되는데 원인을 모르겠다면 초기화하고 천천히 다시 시도해 보세요.
(Personal access token을 커리큘럼대로 따로 저장했다면 [권한 설정을 위해 Personal access tokens 생성] 이 부분은 생략해도 되지만,
[Github 원격 권한 등록(관리자 자격 증명)] 이 부분은 반드시 진행해야 합니다.)
원격 저장소 연결 끊기
터미널에서 아래 명령을 실행하면 원격 저장소와의 연결이 끊어집니다.
.git 폴더 삭제
Gulp 폴더의 .git 폴더를 삭제합니다.
이렇게 하면 원격 저장소와의 연결이 끊어지고
git add, git commit 기록이 완전 초기화됩니다.
git init 부터 다시 시작해 보세요.