Git에 웹페이지 업로드 했을경우 어떻게 웹페이지를 볼 수 있나요 - git-e webpeiji eoblodeu haess-eulgyeong-u eotteohge webpeijileul bol su issnayo

웹 호스팅(web hosting) 그리고 깃허브(GitHub)

안녕하세요. 저번시간에는 서버와 클라이언트가 무엇인지에 대해 알아봤습니다.
이번 시간에는 '깃허브'에서 지원하는 '웹 호스팅'을 이용하여 서버를 구축해 보겠습니다.

웹 호스팅이란, 기업(혹은 개인)이 웹 서버를 '대여'해주는 서비스입니다.
'깃허브'라는 웹사이트에서는 웹 호스팅을 무료로 제공하는데요.

이번 장에서는

를 사용해 보겠습니다.

깃허브 사용법

깃허브는 소프트웨어 개발자들에게는 성지 같은 웹사이트로 알려져 있죠. ㅎㅎ
수많은 개발자들의 공개된 코드(오픈소스, open source)가 저장되어있고,
소스 코드를 저장뿐 아니라 공유, 버전 관리 등 다양한 서비스를 제공하고 있는데요.

이번에는 이런 기능 중, 웹사이트를 클라이언트에게 전송해주는 '웹서버'에 초점을 맞춰 알아보겠습니다.

깃허브에 접속하기





깃허브 로그인하기



다음으로, 깃허브에 로그인을 해주겠습니다.
깃허브 방문이 처음이라면 회원가입을 해주세요.

리포지토리(repository, 저장소) 생성하기





로그인을 완료했다면, '리포지토리'를 생성해야하는데요.
리포지토리란, 깃허브에서 사용자에게 제공하는 '저장소'입니다.
(편의상 리포지토리를 저장소라고 부르겠습니다.)

위의 사진처럼, '+버튼'을 눌러 'new repository' 항목을 선택하시면 됩니다.

저장소 설정





설정은 위 사진처럼 해주시면 되는데요.

'Repository name(저장소 이름)' 항목에 원하는 이름을 적어주겠습니다.
그리고 공개 여부는 'pulic(타인에게 공개)'으로 설정해주세요.
마지막으로, 'initialize this repository with README(초기화)' 항목에 체크를 해주면 됩니다.

과정을 잘 따라오셨다면, 아래의 사진처럼 저장소가 생성된 것을 확인 할 수 있습니다.

저장소에 생성 확인





이제, 우리가 작업해온 '웹사이트 정보(HTML 파일들, 이미지 등)'를 '깃허브 저장소'에 업로드 해줘야 합니다.

위의 사진에 보이는 것처럼 'Upload files' 버튼을 클릭해주세요.
클릭하면 다음과 같은 화면을 볼 수 있습니다.

저장소에 파일 업로드





화면 중앙에 'choose your files'를 클릭해서 컴퓨터에 저장된 HTML 파일들을 불러오겠습니다.
웹사이트에

사진 파일을 사용하셨다면 사진 파일도

불러와 주세요. :D
이때 반드시, 웹사이트 시작 페이지의 이름이 'index.html'
로 되어있어야 합니다.
다음으로 웹사이트 관련 파일들을 선택하고 '열기' 버튼을 클릭해 줍니다.

4번은 업로드 정보를 기입하는 공간인데요.
이 항목들은 저장소에 수정된 내용이 있다면 변경사항들을 기재할 수 있게 마련된 공간입니다.
저는 간단하게 'Add files via Upload' 항목에 'First Version'이라고 적어줬습니다.

그럼 마지막으로, 'Commit changes'를 클릭해줍시다.

웹서버를 작동시켜보자

위 과정을 통해 우리는 깃허브에 지금까지 작업해온 HTML 파일들을 업로드 했습니다.
이제, 웹서버를 활성화 시켜주기만 하면 되는데요.

어렵지 않으니 시작해볼까요?

저장소 설정 탭 들어가기





저장소에 업로드가 성공적으로 되었다면, 위 사진처럼 업로드된 파일들을 볼 수 있습니다.

이제 웹서버를 작동시킬 수 있게 해주는 'Settings' 탭으로 들어가 줄 건데요.

웹서버 작동시키기





설정탭에 들어가서 스크롤을 쭉 내리다 보면 위 사진과 같이 'GitHub Pages'라는 항목을 볼 수 있습니다.
여기서 'None'항목을 'master branch'로 바꿔줍니다.

설정을 바꾸면 페이지가 새로 고침 될 텐데요.
다시 스크롤을 내려 'GitHub Pages'를 확인해보면 위 사진처럼 웹사이트 주소가 생성된 것을 볼 수 있습니다.

"Your site is published at https://(내 깃허브 아이디).github.io/(현재 저장소 이름)/"
이 주소가 깃허브 서버를 통해 만들어진 웹사이트의 주소입니다.

그럼 한번 테스틀 해봐야겠죠? ㅎㅎ
해당 주소를 주소창에 입력하고 엔터를 쳐보면...

결과 확인!





이런 식으로, 인터넷에 연결된 웹사이트 접속이 가능한 것을 확인할 수 있습니다.
스마트폰이나 다른 기기로도 접속이 가능하니 시도해보세요.

드디어 웹사이트라고 할만한 진짜 결과물이 나왔습니다.
축하합니다! :D

웹사이트의 작동원리

깃허브의 웹호스팅을 이용해서 웹사이트를 열어보았는데요.
우리가 만든 웹페이지의 작동원리에 대해서 알아보겠습니다.

첫째로 우리가 했었던 것은 우리 컴퓨터에 있던 HTML 파일을 깃허브 저장소에 업로드 하는 것이었습니다.
아직 웹서버는 작동하기 전입니다.

두 번째는 웹서버를 작동 시켜 주는 것이었는데요.
웹서버가 작동되고 나면, 클라이언트는 웹서버에 웹사이트 정보(HTML 파일, 이미지 등)를 요청할 수 있게 됩니다.

그렇게 받은 웹사이트 정보는 "웹브라우저를 통해서" 출력되는데요.
그 결과가 위의 '결과 확인'에서 보았던 웹사이트의 형태인 것이죠.

모든 과정을 하나의 그림으로 표현하면 다음과 같습니다.

마치며... (+ 여담 2가지)

시작 페이지를 index.html로 하는 이유

왜 웹사이트의 시작 페이지가 'index.html'로 시작해야 하는지 궁금하셨나요? ㅎㅎ

웹서버의 이용자의 입장에서 웹서버에 제공해야 할 정보가 한 가지 있습니다.
바로, 웹 사이트의 '시작 페이지'가 어디인지 알리는 것인데요.
이때 사용하는 것이 'index.html'입니다.

관례상 웹사이트의 첫 페이지 이름을 'index'로 사용하다 보니 이렇게 정해졌다고 하는데요.
따라서, 대부분의 웹서버에서는 웹사이트의 시작 페이지 명칭을 index.html로 사용한다고 하네요.

트래픽(traffic) 이란? 그리고 깃허브 가이드라인

서버와 클라이언트 간의 연결에서 발생하는 데이터 전송의 양을 '트래픽(traffic)'이라고 하는데요.

사람들이 웹사이트에 많이 접속하게 된다면, 서버와 클라이언트 상호 간에 주고받을 데이터가 많아질 겁니다.
이런 경우를 보고 '트래픽이 높아(많아)졌다'라고 하는데요.
이렇게 웹서버가 처리해야 할 정보가 많아진다면, 기존보다 더 큰 서버를 필요로 할 겁니다.

따라서 웹호스팅을 무료로 제공하는 웹사이트나 업체들은 저마다의 무료 서비스에 제한을 두고 있습니다.
깃허브에서는

다음과 같은 가이드라인을 제시하고 있는데요.




위 가이드라인의 대략적인 내용은 이렇습니다.

사용 제한
GitHub Pages 사이들은 다음과 같은 사용 제한을 따릅니다:

• GitHub Pages의 소스 저장소의 권장 용량은 1GB 입니다.
• 공개된 GitHub Pages의 사이트들은 1GB보다 크지 않아야 합니다.
• GitHub Pages의 사이트들은 월 100GB의 대역폭 제한이 있습니다.
• GitHub Pages의 사이트들은 시간당 10회의 빌드 제한이 있습니다.

만약 고객님의 사이트가 사용 한도를 초과했을 경우에는, 고객님의 사이트를 더 이상 서비스할 수 없게되거나, GitHub Support나 GitHubPremium Support로 부터 저희 서버에 미치는 영향을 줄이기 위한 방법들을 제안하는 이메일을 받게 될 수 있습니다.
(...생략...)

깃허브에서는 트래픽에 대한 제약사항은 특별히 명시되어있지 않은 것 같네요. ㅎㅎ

더 자세한 정보들은 다음 링크에 접속해 보시면 확인이 가능합니다.
링크: https://help.github.com/en/github/working-with-github-pages/about-github-pages

이번 장에서는 GitHub의 무료 웹호스팅을 이용한 웹사이트를 개설해보았습니다.
조금 길어졌는데 따라오시느라 고생 많으셨죠? :)
고생하셨습니다~!

다음 시간에는 아파치라는 웹서버 프로그램을 설치해 직접 웹사이트 열어보겠습니다.

피드백은 언제나 환영합니다.
감사합니다.

kwiskey