18강) 웹 호스팅 : github page(2022년 수정본)

---

직접 웹 서버를 운영하려면
컴퓨터가 있어야 하고
컴퓨터가 냉장고처럼 항상 켜져 있어야 하며
인터넷이 끊기지 않아야 한다.

웹 서버라는 프로그램을 배워서
설치하고, 잘 운영할 줄 알아야 한다.

인터넷을 통해서 우리의 정보를 외부로 전송할 수 있게
설정도 할 줄 알아야 한다.

이런 것들은 하나하나가 다 쉬운일이 아니다.

그래서 이런 일들을 대행해 주는 회사가 있다.

인터넷에 연결된 컴퓨터 하나하나를
우리는 호스트 라고 한다.

이런 컴퓨터를 빌려주는 사업은
호스팅 이라고 한다.

요즘은 클라우드 라고도 불린다.

인터넷에 연결된 컴퓨터를 빌려주는
비즈니스 라는 점에서는 같은 개념이다.

호스팅 중에서 컴퓨터의 웹 서버와 같이

웹을 동작하기 위해서 필요한 소프트웨어까지
설치에서 빌려주는 비즈니스를

웹 호스팅이라고 부른다.

---

GitHub.com (깃허브닷컴, 웹 호스팅 대행 업체) 을 이용한 웹 호스팅

수 많은 웹 호스팅 업체가 있다.
지금부터 우리는 그 중에서 무료이고,
유명한 서비스를 이용할 것이다.

바로 깃허브닷컴 이다.
위 웹사이트는 깃허브닷컴의 메인 화면이다.

잠깐!

여기서부터는,

이고잉 선생님의 생활코딩 강의영상 원본 수업내용이
그대로 진행되는 것이고,
이 다음 포스팅 (포스팅 18-2 과정) 에서
2022년 9월 프로그램을 사용하여
내가 실습한 과정을 이미지와 함께 올렸으니
선생님 강의대로 따라했으나 화면이 다르거나,
페이지 오류가 나오는 등 진행이 잘 안될 시
내가 해본 실습과정도 참고해서 해보길 바란다.

---

깃허브닷컴 사이트의 메인 화면에서
회원가입을 하기 위해 Sign up 을 누른다.

회원가입을 다 했다면
Sign in 을 클릭하여 로그인 해준다.

깃허브닷컴 사이트는
원래 웹 호스팅을 위해서 고안된 사이트는 아니다.

이 사이트는
개발자들이 자신의 소스코드를 안전하게 백업하고,
백업된 소스코드를 매게로 해서 개발자들끼리 협업하기 위해
고안된 굉장히 유명하고 아주아주 중요한 사이트이다.

앞으로 이 사이트를 자주 사용하게 될 것이다.

이 사이트의 기능 중에는
웹 호스팅 기능이 있기 때문에 그것을 활용 해보려 한다.

---

본격적으로 웹 호스팅 실습하기

제일 먼저 해야 할 것은
우리의 소스코드를 저장할 공간인

리포지토리(Repositories)

: 컴퓨터 저장소.
정보 시스템의 프로그램이나 데이터 같은 각종 자원을 자원간의 관련까지 포함하여 관리하는 자원 관리 데이터 베이스.
특히 대규모 정보 시스템의 개발과 운용 에서는 모든 정보 시스템 자원을 리포지토리에서 관리하게 된다.
프로그램의 버전 관리나 데이터 항목을 변경할 경우에 수정해야 할 프로그램의 특정화 등 개발, 운용 효율 향상에 큰 효과가 있다.
[네이버 지식백과]

라는 것을 만들어야 한다.

왼쪽의 New 버튼을 클릭하거나, (선택1)

또는 오른쪽 위 내 프로필 왼쪽의 + 버튼을 클릭하여
New Repositories 를 클릭해준다. (선택2)

그럼 저장소를 만드는 페이지 화면이 나오는데,

여기에 원하는 저장소 이름을 입력해준다.
(강사 선생님은) my-first-web-site 라고 적었다.

저장소 이름을 입력한 후 아래에 보면
Pubilc 과 Private 이라는 아이콘의 체크 버튼이 있다.

Pubilc 은 내가 만든 소스코드를 공개,
Private 은 비공개로 설정한다는 뜻이다.

우리는 우리가 만든 소스코드를 공개할 것이기 때문에
Pubilc 에 체크해준다.

제일 아래 초록버튼인
Create repository 를 클릭하여 저장소 만들기를 진행한다.

짝짝짝!
드디어 우리는 웹 호스팅 사이트인
깃허브닷컴에서 첫번째 저장소를 만들었다.

(강사 선생님 말) 이 사이트에서 앞으로도 의미 있는 일을 많이 만들 수 있기를 바란다.

그 다음 할 일은 우리가 만들었던 소스코드를
이 사이트에 업로드 시키는 것이다.

소스코드를 업로드 하기 위해
파란색 링크가 걸린
uploading an existing file 이라는 문구를 클릭한다.

이렇게 생긴 화면이 나오게 되는데,
여기에 우리가 만들었던 소스코드를 업로드 하면 된다.

가운데 choose your files 를 눌러 파일을 찾아 업로드 해도 되고, (선택1)

또는 바탕화면에서 파일이 들어있는 폴더를 열어서
파일들을 모두 드래그 한 다음

파일들을 업로드할 사이트에 드래그하여
끌어다가 놓아도 (선택2)

업로드가 시작된다. 간단한 방법 두가지 중 편한걸로 사용하자.

아래 Commit changes 라고 써진 부분에는
소스코드를 올릴 때 마다, 또는 수정한 파일을 새로 올릴 때 마다
어떤 작업을 했는지 코멘트를 적어주는 칸이다.

(강사 선생님께서는) 웹 사이트 완성!! 이라고 적어주었다.

그런 다음 아래 초록색 버튼을 눌러 업로드를 완료하면,

작업한 것에 대한
첫 번째 보전이 안전하게 인터넷에 저장이 된다.

우리가 작성한 소스코드의 업로드 된 파일들이
위 화면처럼 보이는데,

여기서 index.html 파일을 클릭해서 보면

이 파일의 내용(소스코드 등)을 볼 수 있게 된다.

그리고 이 페이지의 주소를 다른 사람에게 공유하면
이 소스코드 자체를 다른 사람과 공유하고 토론도 할 수 있다.

이렇게 소스코드를 보관할 수 있는 기능을 제공하는
깃허브닷컴 사이트에서는 고맙게도 또 다른 기능을 제공해주는데

바로 깃허브닷컴 안에 내장되어 있는 기능인

깃허브 페이지

를 이용해서 웹 사이트를 운영할 수 있는 기능이다.

메뉴 항목 중 제일 오른쪽에 있는 Settings 를 클릭한다.

Settings 버튼은 현재 저장소에 설정을 할 수 있는 페이지다.

설정 페이지에 들어왔다면
왼쪽 사이드바에서
Pages 라고 하는 메뉴가 있다. 이것을 클릭한다.

Pages 페이지에 들어오면
웹 포스팅 기능을 활성화 시킬 수 있는 이런 화면이 뜰 것이다.

여기서 None 이라고 되어 있는 버튼을 누른다.

나오는 항목 중 main 을 클릭해준다.

이제 버튼 하나만 더 누르면 되는데,

그 전에
이 웹 포스팅을 활성화 시키는 데에는 시간이 좀 걸린다.

그리고 활성화 되고 있는 일이 어떻게 진행되고 있는지
우리는 실시간으로 볼 수 있다.

같은 깃허브닷컴 사이트를 하나 더 켜줬다.
똑같은 깃허브 Pages 페이지 화면이다.

왼쪽 화면을 Pages 페이지로 놔두고,
오른쪽 화면의 메뉴 중 Actions 버튼을 누른다.

그럼

왼쪽은 Pages 화면,
오른쪽은 Actions 화면이 열려있는 상태이다.

여기서 Pages 화면의 Save 버튼을 클릭한다.

(이 Save 버튼을 눌러야만
그때부터 우리 저장소의 웹 서버 기능이 활성화 된다.)

Save 버튼을 클릭한 다음,
오른쪽 Actions 페이지에서 새로고침을 누른다.

Actions 페이지의 모습이 바뀌면서

링크가 걸린 Pages build and deployment 문구가 나오는데

이걸 클릭해주면

build 가 진행되고
deployment 가 진행된다 라는 박스가 보이게 된다.

build 박스를 클릭하면
어떤 절차가 진행되는 과정이 나타나는데,

왼쪽에 초록색 체크가 나타나야
진행이 모두 완료되었음을 확인할 수 있다.

진행이 모두 완료 되었다면
다시 왼쪽 Pages 화면으로 넘어와서

Pages 화면에 나타난 주소를 클릭한다.

짜잔,
우리가 만든 웹 사이트가 화면에 표시 되었다.

위 주소를 통해서 이제 전 세계 누구나
우리 웹 사이트에 방문할 수 있게 되었다.

---

소스코드 수정하기, 그리고

수정한 소스코드 파일 업로드하기

만약 파일의 내용을 바꿨다면,

예시) < p > hello < /p > -> < p > hollo 2 < /p >

수정된 내용의 파일을 반영하려면 어떻게 해야 할까?

깃허브닷컴의 저장소 홈으로 다시 돌아와서

Add file 버튼을 눌러서 나오는 아래 Upload files 를 클릭,

그리고 코드가 수정된 내용이 저장된 작업 파일을
드래그 해서, 또는 파일찾기를 통해
파일을 업로드 해준다.

코멘트를 꼭 남겨준다.

예시) 수정, 수정된 파일, 1차 수정, 수정 후, 수정됨

그런 다음 완료 버튼 클릭하면

수정된 파일이 업로드 되면서
두 번째 버전이 반영된다.

자동으로 깃허브닷컴이 우리 웹 사이트를 갱신해주는데,

진행 상황을 보고 싶다면
메뉴의 Actions 버튼을 눌러
새로 추가되어 업로드 진행 중인 링크를 눌러 들어간다.

아까와 같이
build 와 deploy 박스의 진행을 눈을 볼 수 있고
초록색 체크박스가 뜨면서 완료됨에 따라

Pages 화면으로 가서 내 주소를 클릭하면
내 웹 사이트가 뜨면서
수정된 내용도 확인할 수 있게 된다.

---

내용 정리

위의 공부한 내용을
이론적으로 정리해보자면

3개의 요소가 있다.

첫 번째는,
내 컴퓨터가 있다.
이 컴퓨터에는 우리(나)가 만든 웹 페이지가 있다.

두 번째,
내가 만든 웹 페이지를 보고 싶어 하는 방문자들이 있다.

세 번째,
서비스를 대신해서 제공 할 호스팅 업체가 있다.

예시) 깃허브닷컴

1. 우리가 깃허브닷컴 사이트에(호스팅 업체)파일을 업로드 하면
   내가 만든 소스코드가 업로드 된다.

2. 웹 호스팅 업체에서는
   웹 호스팅에 설치되어 있는 웹 서버를 활성화 한다.

3. 그리고 컴퓨터 도메인의 이름을 부여한다. = 주소 (내 사이트)

4. 방문자가 도메인 주소(내 사이트)로 접속하면
   웹 서버가 index.html 을 읽는다.

5. 웹 서버 는 방문자 에게
   index.html 의 소스코드를 전송한다.

6. 방문자 의 웹 브라우저에 웹 페이지가 표시되면
   이 웅장한 여정이 끝나게 된다.

---

이번 강의 마무리

웹 호스팅을 이용하는 것의 < 장점 > 이 무엇일까?

바로 쉽다 는 것이다.

우리는 코딩만 하면 된다. 나머지는 업체가 해주기 때문이다.
그래서 현업에서는 전문적인 업체에게 운영을 맡기는 경우가 많다.

하지만 웹 호스팅의 < 단점 > 도 있다.
교육적인 관점에서는 이 원리가 감춰져 있다는 것이다.

웹 서버가 동작하는 원리가 궁금하거나,
웹 서버를 통해서 직접 서비스하는 희열을 느끼고 싶은 사람들은
웹 서버를 이용해서 직접 운영하는 방법에 대한 수업도
준비되어 있으니, 도전해보길 바란다.

---

다음 강의에서 계속..