2022-07-23 HTML_8

인터넷에서 웹이 동작하는 기본적인 원리

 

인터넷이 동작하려면 최소 2대의 컴퓨터가 필요하다.

 

역할에 따라서 서버와 클라이언트로 부른다.

 

따라서 웹이 인터넷에서 동작하려면 웹 클라이언트와 웹 서버가 필요하다.

 

인터넷에서 웹이 동작하는 과정을 살펴보자.

 

1. 웹 브라우저를 설치한 클라이언트에서 인터넷을 통해 웹 서버에 접속한다.
2. 클라이언트가 서버에 index.html 파일을 요청(request)한다.
3. 웹 서버는 저장장치에서 index.html이라는 파일을 찾아서 클라이언트로 전송한다.
4. 클라이언트의 웹 브라우저는 수신한 index.html이라는 파일의 코드를 읽고 해석한다.
5. 웹 브라우저의 화면에 보여준다.

이미지 출처 : https://youtu.be/yBPyzaccbkc

 

웹 서버를 운영하는 하는 방법은 크게 2가지다.

• 컴퓨터에 직접 웹 서버를 설치하는 방법
• 직접 설치하지 않고 대행하는 업체게 맡기는 방법 (웹 호스팅)

 

우리는 두가지 방법을 모두 해보자.

 

---

웹 호스팅 (깃허브 페이지)

 

웹 호스팅은 웹 서버를 직접 운영하는 어려움을 덜 수 있다.

 

항상 서버의 전원이 켜져있어야 하고, 인터넷이 끊겨서도 안 되고, 전기요금도 내야 하고, 웹 서버를 직접 만져야 하는 어려움이 없다.

 

깃허브 페이지를 이용해서 지금까지 만든 웹 페이지를 올려보자.

 

당연히 깃허브 계정이 있어야 한다.

 

새로운 리포지터리(repository) 생성

 

 

파일 업로드

지금까지 만든 파일을 선택한다.

 

 

간단한 커밋 메시지를 작성하고 커밋한다.

 

 

업로드가 완료된 것을 확인할 수 있다.

 

각 파일은 클릭해서 내용을 확인, 수정할 수 있다.

 

세팅

 

상단의 Settings를 클릭하자.

 

 

Pages를 클릭한다.

 

 

사용할 branch를 선택하고 파일의 위치를 지정한 다음 Save 버튼을 누른다.

 

 

생성한 GitHub Pages site의 주소를 확인할 수 있다.

 

또 원한다면 따로 커스텀 도메인을 사용할 수 있다.

 

 

Build와 Deploy를 거치면 완성된 웹 사이트를 만나볼 수 있다.

 

작업이 어떻게 진행되고 있는지 확인하기 위해선 상단의 Action을 클릭하면 된다.

 

여기서 Reopsitory에서 일어나는 여러 작업들을 확인할 수 있다.

 

완성된 사이트로 접속

주어진 주소로 접속하면…

 

 

정상적으로 웹 사이트가 생성된 것을 확인할 수 있다!!

 

여기선 깃허브 페이지를 이용했지만 다른 서비스를 사용할 수도 있다.

 

지금까지는 HTML만 사용하는 간단한 웹페이지를 만들었다.

 

HTML은 웹브라우저가 해석하기 때문에 서버쪽에서 특별히 해 줄 일이 없다.

 

이런 경우를 “정적(static)이다”라고 한다.

 

깃허브 페이지를 제외하고도 다른 많은 호스팅 업체들이 정적 웹 사이트 호스팅을 무료로 제공한다.

 

찾아서 써라.

 

(동적(dynamic)으로 php나 python, ruby, java와 같은 기술을 이용하려면 대체로 비용을 내야 할 수 있다.)

 

---

웹 서버

 

사용할 수 있는 웹 서버 프로그램은 여럿있다.

 

대표적으로 Apache, IIS, Nginx가 있다.

 

이 중에는 없지만 세상에서 가장 간단한 웹 서버에 속하는 Web Server for Chrome을 사용해 보자.

 

Web Server for Chrome

 

install

 

Web Server for Chrome는 크롭의 확장 기능이다.

 

구글에 Web Server for Chrome 검색하고 설치한다.

 

 

Chrome에 추가 버튼을 클릭한다.

 

Setting

2번에 파일의 위치를 입력한다.

 

3번은 사설망에서 동작하게 하는 옵션이다.

 

3번을 끄면 Loopback 주소(127.0.0.1 혹은 localhost)로만 접속할 수 있다.

 

3번 아래에 위치한 Also on internet 옵션을 통해서 인터넷에서 사이트에 접속할 수 있게 된다.

 

(물론 포트 포워딩과 보안 설정 등 추가적인 작업이 필요할 수도 있다.)

 

“Enter Port”에 접속에 사용할 포트 번호를 지정할 수 있다.

 

접속

 

윈도우 pc에 서버를 설치하고 추가적인 보안설정(인바운드 규칙 추가)를 했다.

 

이후 인터넷을 통해서 접속했다.

 

apache

 

일전에 라즈베리파이에 아파치 웹 서버를 설치한 적이 있다.

 

사실 며칠 전에 mv 명령에 . 하나를 빼먹어서 OS 다시 설치해야 한다.

 

일단은 아쉬운 데로 맥북에 설치한 아파치 서버를 이용해보자.

 

DocumentRoot(/opt/homebrew/var/www)에 지금까지 만든 HTML 파일(index.html은 필수!)과 이미지 파일을 옮긴다.

 

그 후 brew services start httpd 서버 시동 껴고 로컬호스트로 접속한다.

 

 

성공!

 

여기에 도메인 네임만 획득하고 검색엔진에 등록하면 대충 원시적인 웹으로 기능할 수 있다!

 

---