GitHub에서 프로젝트 복사 및 배포하기

안녕하세요, 오늘은 깃허브에 이미 누군가 만든 '프로젝트'를 내 계정으로 복사 해와, 수정하거나 누구나 스마트폰으로 접속할 수 있도록 배포하는 전체과정을 공유하도록 하겠습니다.

(시작하기 전 참고: 깃허브 회원가입은 미리 완료되어 있어야 합니다. 계정이 없다면 깃허브 홈페이지에서 가입 후 로그인을 먼저 진행해 주세요!)

1단계 : 특정 레포지토리 접속 후 내 계정으로 포크(fork)하기

가장 먼저 할 일은 원본 개발자의 코드를 내 계정으로 안전하게 복사해 오는 '포크' 작업입니다.

1) 깃허브 로그인 및 원본 주소 접속

깃허브에 로그인한 상태에서 인터넷 주소창에 아래의 원본 프로젝트 주소를 복사하여 붙여넣고 접속합니다.

접속 주소 : https://github.com/kijung4290/qr_reader.git

* 해당 코드는 제 블로그에서 매번 출석체크할 때 언급했던 QR로 출석체크할 때 필요한 외부 카메라 코드입니다.

2) Fork 버튼 클릭

원본 레포지토리 화면이 열리면, 화면 우측 상단을 주목해 주세요. Star 버튼 바로 옆에 나뭇가지 모양의 Fork 버튼이 있습니다. 이 버튼을 클릭하고, [Create a new fork]를 눌러주세요.

3) 새로운 Fork 생성 설정

Owner : 본인의 깃허브 닉네임이 선택되어 있는지 확인합니다.

Repository name : 기본값인 qr_reader가 그대로 들어갑니다. (원한다면 다른 이름으로 변경해도 무방합니다.)

Copy the main branch only : 하단에 있는 이 옵션은 기본적으로 체크되어 있습니다. 체크 상태를 유지합니다.

4) Create fork 클릭

화면이 잠시 로딩되면서 몇 초 뒤, 좌측 상단의 이름이 내닉네임/qr_reader로 변경된 화면이 나타납니다. 내 계정으로 코드가 복사되었습니다.

2단계 : index.html 파일 열고 922번째 줄 코드 수정하기

카메라가 출석 정보를 올바르게 처리하려면, 코드에서 내 배포했었던 웹앱 주소로 변경해야 합니다.

1) 수정할 파일 열기

포크가 완료된 내 레포지토리 메인 화면의 파일 목록에서 index.html 파일을 찾아 클릭합니다.

2) 연필 아이콘(Edit) 누르기

파일 내용이 화면에 표시되면, 우측 상단의 연필 모양 아이콘을 클릭하세요. 편집 모드로 변경됩니다.

3) 922번째 줄 찾아서 URL 교체하기

마우스 휠을 아래로 스크롤하여 922번째 줄로 이동합니다. default_gas_url 변수에 있는 주소를 앱스스크립트에서 배포한 URL로 수정합니다.

4) 수정 사항 저장하기

코드 교체를 마쳤다면 화면 우측 상단의 초록색 commit changes...버튼을 클릭합니다. commit message 칸에 메모를 남깁니다.

3단계 : GitHub Pages로 웹에 배포하기

코드를 수정했으니, 이제 누구나 해당 코드를 접근할 수 있도록 나만의 주소로 만들 차례입니다. github pages를 이용합니다.

1) 설정(Settings)메뉴 진입

화면 상단 탭 중 제일 우측에 있는 톱니바퀴 모양의 Settings 탭을 클릭합니다.

2) 배포 소스(Source) 및 브랜치 설정

Build and deployment 섹션에서 Source 항목이 Deploy from a branch로 선택되어 있는지 확인합니다. Branch 항목에서 main을 선택합니다.

4단계 : 배포 진행 상황 확인 및 주소 접속하기

저장을 누르는 순간, 깃허브 서버가 우리가 만든 코드를 웹사이트로 구축하기 시작합니다.

1) 배포 과정 확인하기

화면 상단 탭 중 Actions를 클릭해 보세요. pages build and deployment 작업이 돌아가고 있습니다.

2) 주소로 접속하기

다시 settings 탭을 눌러 좌측 메뉴의 Pages로 돌아갑니다. 화면 상단에 있는 링크를 통해 내가 배포한 웹사이트에 접속할 수 있습니다.