동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

웹 개발을 하여 홈페이지를 만들었다면, 본인이 작업한 컴퓨터 외에서도 홈페이지에 접근하려면 호스팅이라는 절차를 걸쳐야 한다.

호스팅이란 대용량의 인터넷 전용 회선을 가진 통신 업체나 웹 개발 회사가 웹 서버를 다른 업체나 개인에게 임대하는 일을 말한다. 쉽게 말해, 내 홈페이지를 인터넷의 정식적인 홈페이지로 등록, 가동해 준다고 생각하면 될 것이다.

호스팅을 걸치지 않으면, 개인의 컴퓨터로는 홈페이지를 열 수 있지만 다른 컴퓨터, 핸드폰과 같은 인터넷으로는 접근할 수 없다. 이러한 호스팅도 홈페이지의 종류에 따라 절차 간의 차이가 있을 수 있는데, 종류를 나누는 기준에 대하여 알아보자

'종류를 나눈 기준 - 홈페이지가 움직이는 동적인가? 멈춰있는 정적인가?'
홈페이지는 크게 실시간으로 움직이는 동적 홈페이지와 멈춰있는 정적 홈페이지가 있다.

흔히들 알고 있는 대부분의 홈페이지는 동적 홈페이지이다. 반대로 정적 홈페이지란 말 그대로 '보여주기식'의 홈페이지이다. 물론, 아예 멈추어 있는 것은 아니지만 지정된 해당 동작의 움직임을 제외하고는 추가적인 움직임, 데이터의 표시등을 나타내지 않는 홈페이지이다. 간단한 예시로는 청첩장, 홍보하는 홈페이지 등이 있다.

이러한 홈페이지는 특정 시간에 따른 데이터를 가져오는 크롤링, 입력값을 저장하여 관리하는 데이터베이스를 작동할 필요가 없어, 서버를 구동시킬 필요도 없다. 단순한 홍보가 목적이기에 홈페이지는 누구에게나 언제 보여주어도 같은 형태를 유지하기 때문이다.

표현을 위한 페이지이므로 당연히 로그인 기능도, 댓글 달기도, 정보를 가져오는 등의 행위 등이 이루어지지 않는다.

정적 홈페이지는 서버 컴퓨터를 대여하는 서비스를 이용할 필요가 없으므로 홈페이지만 열어주는 과정을 걸치면 된다. 대표적인 호스팅 서비스 사이트로는 'netify'가 있다

하지만 동적 홈페이지는 날짜, 시간, 데이터의 입력 등 특정 기준에 따른 동작마다 페이지가 변한다.

위의 사진과 같이 동적 홈페이지 개발 간에는 클라이언트, 서버의 역할을 나누고 이에 따른 개발이 동시에 이루어져야 한다.

따라서 클라이언트와 서버로 이루어져, 클라이언트의 요구 사항을 처리해 주는 서버 컴퓨터가 필요하다. 클라이언트는 정보의 제공을 요구하는 컴퓨터, 즉 사용자들의 컴퓨터로서 개발자자들이 웹을 개발하며 이미 구성을 다 해놓았겠지만, 서버 컴퓨터는 웹 개발을 한 후에 추가적인 작업이 필요로 요구된다.

이러한 작업을 하기 위해서는 본인의 홈페이지에 따른 서버 역할을 해줄 컴퓨터가 필요하다.

'내 컴퓨터로 작업하는 건데 내 컴퓨터가 서버 역할도 하면 되는 거 아닌가?'라는 의문이 들 수 있다. 이 때, 내 컴퓨터는 항상 작동되어야 하며, 개인 컴퓨터인 만큼 보안이 취약하다. 또, 서버의 역할을 할 수 있는 기능을 구비한 컴퓨터가 필요하다.

다시 말해, 리스크도 크고 요구 사항도 많기 때문에 이러한 역할을 전문적으로 하는 서버 컴퓨터, 클라우딩 컴퓨터 등이 있는 것이다.

따라서 서버 컴퓨터를 대여해야 하는데, 이런 절차를 전문적으로 서비스의 대표적인 예시로 '아마존 웹 서비스(AWS)'가 있다. AWS를 활용하면, 본인의 홈페이지를 담당해 줄 서버 컴퓨터를 대여해, IP를 할당받는다. 또, 할당받은 IP를 통해 원격접속하여 대여한 서버 컴퓨터의 설정을 변경하는 등의 관리를 할 수 있다.

우리가 이용하고 있는 서비스는 대부분 로그인, 댓글, 시간에 따른 데이터 표시 등을 가지고 있기에 동적 사이트이다.

github pages 로 실습을 하는데 문제가 생겼다면 netlify.com 을 이용하는 아래 수업을 참고해주세요. 
netlify.com 으로 웹호스팅 하기 바로가기

---

직접 웹서버를 운영하는 일은 쉽지 않은 일입니다.
우선 컴퓨터가 있어야 하고요,
컴퓨터가 냉장고처럼 항상 켜져 있어야 합니다.
웹서버라는 프로그램을 배워서 설치해야 합니다.
또 인터넷을 통해서
외부로 정보를 전송할 수 있게
설정을 해야 합니다.
쉽지 않습니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

그래서
이런 일을 대행해 주는 회사들이 있습니다.
인터넷에 연결된 컴퓨터 하나 하나를 호스트라고 합니다.
이런 컴퓨터를 빌려주는 사업을 호스팅이라고 합니다.
웹서버를 전문적으로 빌려주는 비즈니스를
웹호스팅 업체라고 부릅니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

수많은 웹호스팅 업체가 있습니다.
그 중에서
무료이고, 유명한 서비스를 이용할 것입니다.

바로 github(https://github.com)의 pages 기능입니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

이 서비스는
프로그래머들에게는 성지와 같은
중요한 서비스입니다.
전세계의 수많은 오픈소스들이
이곳에서 만들어지고 있거든요.
 

이 서비스 자체는
우리 수업의 주제는 아니니까
나중에 살펴보시면 됩니다.

우리는 github가 제공하는 여러 기능 중
웹호스팅 기능을 이용해서
우리의 홈페이지를 운영할 것입니다.

회원가입하시고(sign up),
로그인해 주세요(sign in)

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

저장소(repository)라는 것을
생성해 주셔야 합니다.
저장소는 소스코드를 보관하는 곳이라고
생각하시면 됩니다.
New 버튼을 누르면 됩니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

아래와 같은 화면이 나오는데 저장소를 생성하는 화면입니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

1. Repository name 에는 프로젝트의 이름을 적어 주세요. 저의 경우 web1이라고 할 것입니다.
2. public(공개), private(비공개)는 저장소의 공개여부를 정하는 것입니다. public으로 해 주세요. (누구나 여러분의 소스코드를 볼 수 있습니다)

저장소 생성하기(Create repository) 버튼을 눌러주세요.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

아래와 같은 화면이 나타날 것입니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

이 중에서 uploading an existing file라는 부분을 클릭해 주세요. 아래와 같은 페이지가 뜰 거에요.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

1. 작업한 파일을 드래그 앤 드롭 합니다. 

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

2. 변경된 내용을 적습니다. 파일이 변경될 때마다 업로드를 해야 하기 때문에 변경된 내용을 적어줍니다.
3. Commit changes 버튼을 누르세요. 업로드가 시작됩니다.

업로드가 끝나면 아래와 같이 파일의 목록이 보입니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

그럼 우리가 업로드한 웹페이지를 인터넷을 통해서 서비스 해봅시다. Settings 버튼을 선택합니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

사이드 바에서 Pages를 선택합니다. 

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

Branch를 main 혹은 master를 선택하고 Save 버튼을 누릅니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

그럼 아래와 같이 주소가 표시됩니다. (물론 주소는 각자 다르겠죠?)

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

이 주소로 방문해 보시면 자신이 만든 웹페이지가 보일 것입니다. (혹시 나오지 않는다면 5분 후에 다시 접속해 보세요)

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

감동적이지 않나요?
이제
내가 만든 웹페이지를
전세계 사람들에게 서비스할 수 있게 되었습니다.
축하합니다.
 

그럼 우리가 한 일을 이론적으로 정리해보겠습니다.

삼자가 있습니다. my는 여러분의 컴퓨터입니다. visitor는 여러분의 웹페이지를 보고 싶어하는 사람입니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

여러분의 컴퓨터는 현재로서는 컨텐츠를 서비스 할 수 없습니다.  우리는 github의 pages 기능을 이용했습니다. github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜집니다. 그리고 우리에게 웹서버의 주소를 알려줍니다.

이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 됩니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

웹서버를 직접 운영하는 것에 비해서
웹호스팅을 이용하면
쉽습니다.

단점은
인터넷의 원리가 감춰져 있다는 것입니다.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

하지만
현업에서 웹서버를 직접 운영하는 경우는 많지 않아요.
웹서버를 운영하기 위해서는 많은 노하우가 필요하거든요.

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

우리는 github를 사용했지만
미래에는 이 서비스를 이용하지 못할 수도 있습니다.
또 github pages는 제약이 많은 서비스이기도 합니다.
중요한 것은 github의 사용법이 아니고,
여러분이 필요한 웹호스팅을 찾아내는 능력입니다.

우리는 HTML만으로 웹페이지를 만들었습니다.
HTML은 웹브라우저가 해석하기 때문에
서버쪽에서 특별히 해 줄 일이 없습니다.
이런 특성을 정적(static)이라고 합니다.
자연스럽게 HTML만으로 만들어진 웹사이트를
호스팅하는 서비스 중에는 무료가 많습니다.

그럼 동적(dynamic)인 것이 있냐고요?
있습니다. 나중에 배울 php나 python, ruby, java와 같은
기술을 이용하려면 대체로 비용을 내야 합니다.
이런 기술을 활용하기 전까지는
유료 서비스를 이용할 필요가 전혀 없습니다.

아래와 같이 검색하시면
여러분의 목적에 맞는 웹호스팅을 찾을 수 있습니다.

free static web hosting

현시점에서 추천 드리고 싶은 서비스들은 이런 것들이 있습니다.

  • https://bitballoon.com
  • http://neocities.org
  • Azure Blob
  • Google Cloud Storage
  • Amazon S3


하지만 미래에는 없어졌을 수도 있고,
더 좋은 서비스도 있을 수 있기 때문에
더욱 중요한 것은 검색을 통해서
찾아낼 수 있는 능력이라는 것을 기억해 주세요.

자주 묻는 질문

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting
질문 : upload file이 보이지 않습니다. 
답변 : 아래와 같이 저장소를 생성할 때 꼭 Initialize this repository with a README 옵션을 체크해주세요. 

동적 웹 페이지 호스팅 - dongjeog web peiji hoseuting

질문 : 아래와 같은 오류가 뜹니다. Please verify your email address Before you can contribute on GitHub, we need you to verify your email address. An email containing verification instructions was sent to 이메일 주소.
답변 : 회원가입 후에 이메일 인증을 해야 한다는 의미입니다. 이메일로 가셔서 Verify email address 누르시면 됩니다. 

완성한 웹사이트를 알려주세요.

다른 사람들의 웹사이트를 구경하세요.