왕초보 엔지니어, 코딩하다

코스 전체목록

닫기

웹서버 운영하기 (2022년 수정판)

웹서버 소개

 

 

---

 

 

이번 시간에는
내 컴퓨터에 웹서버를 설치해서
누구나 내 컴퓨터에 있는 웹페이지를
볼 수 있도록 해 보겠습니다.

이 과정은
꽤 많은 지식이 필요하기 때문에
좀 어렵습니다.

 

 

대신 인터넷이 동작하는 원리를
알 수 있다는 것은 큰 장점입니다.

그리고 한 가지 당부드리고 싶은 것은
실습이 잘 작동하지 않을 가능성이 매우 높아요.
인터넷은 실제로는 매우 복잡한 시스템이거든요.
제대로 작동하는 이유는 한 가지입니다만,
작동하지 않는 이유는 수십 가지가 넘기 때문입니다.

혹 작동하지 않는다고 걱정할 필요는 없습니다.
실제로는 웹호스팅을 많이 사용하거든요.
그냥 제대로 동작하고 있다고 치면 됩니다.
우리에게는 상상력이 있잖아요.

물론,
문제를 해결하기 위해서 노력하는 것은
언제나 좋은 자세입니다.
대신,
이것만 기억해 주세요.

 

 

우리가 하나의 문제를 해결하는데
며칠이 걸릴 수도 있습니다.

하지만
우리는 하나의 문제만 해결한 것이 아니라,
그 과정에서 수많은 지식과 경험을 얻게 됩니다.

우선 우리가 해야 할 일은
자신의 컴퓨터에
웹서버라는 프로그램을
설치해야 합니다.

웹브라우저는
제품명이 아니라
제품군이죠?

 

 

웹서버도 마찬가지입니다.
웹서버라는 제품군에는
여러 제품이 있습니다.

 

 

Apache
IIS
Nginx

 

 

이 중에서
우리가 사용할 소프트웨어는
Web Server for Chrome입니다. 

 

 

 

이 도구는 아주 작지만, 실용적인 웹서버입니다. 
크롬의 확장 기능으로서 설치되는 프로그램이기
때문에 이름에 크롬이 들어갑니다. 

 

이 도구를 설치하기 위해서는 
크롬 웹브라우저가 설치되어 있어야 합니다. 
크롬에서 아래 주소로 방문해보세요. 

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

또는 검색엔진에서 'Web Server from Chrome'으로 검색해보세요.

 

 

 

Add to Chrome 버튼을 눌러서 설치합니다. 

 

 

 

운영체제에서 Web Server for Chrome을 검색하거나, 
주소창에 chrome://apps 을 입력해서 앱을 찾아서 실행합니다. 

 

 

 

 

 

실행한 모습은 아래와 같습니다. 

 

 

 

우선 해야 할 것은 
누군가 웹서버에 접속했을 때 
어느 디렉터리에서 파일을 찾을지를 
웹서버에 알려줘야 합니다. 

2번 CHOOSE FOLDER을 선택하고  
바탕화면의 web 폴더를 선택하면 됩니다. 
이제 웹서버는 이 폴더 안에서만 요청한 파일을 찾아서 응답하게 됩니다. 

 

 

 

그리고 1번의 스위치를 오른쪽으로 이동하면 웹서버가 실행됩니다.

 

 

 

Web Server URL(s)를 보면 
http://127.0.0.1:8887 이라는 주소가 보입니다. 
이 주소를 웹브라우저의 주소창에 입력해보세요.

 

 

 

짜잔! 우리가 만든 웹사이트가 보입니다. 
박수!!

 

 

 

우리는 웹서버를 통해서 웹페이지를 가지고 오고 있습니다. 
그것을 확인하는 좋은 방법이 있습니다. 
웹서버를 끄고 접속해보세요. 

 

 

웹사이트가 열리지 않습니다. 

다시 켜고 접속해보면 정상적으로 웹페이지가 열립니다. 
 

 

 

웹서버를 통해서 웹페이지를 여는 것과 
파일 찾기를 통해서 웹페이지를 여는 것은 구체적으로 어떤 차이가 있을까요? 

 

 

 

주소를 비교해보겠습니다. 

파일 찾기로 열었을 때 : file///Desktop/web/index.html
웹서버를 통해서 열었을 때 : http://127.0.0.1:8887/index.html
이것을 그림으로 나타내면 아래와 같습니다. 

 

웹서버로 접속한 주소를 자세히 살펴볼까요?

 

 

http는 웹페이지를 주고받기 위한 통신 규약인
http를 이용해서 통신하겠다는 뜻입니다. 

 

 

127.0.0.1은 Internet Protocol Address로서 
인터넷에서 상용하는 주소를 의미합니다. 
IP Address는 0.0.0.0부터 255.255.255.255까지의 주소가 존재합니다. 
약 42억 개의 주소가 존재합니다. 
이렇게 많은 주소 중에서
127.0.0.1은 내컴퓨터 자신을 가르키는 특별한 주소입니다. 

 

 

Port는 지금은 모르셔도 됩니다. 

 

 

그런데 같은 컴퓨터에 설치된 
웹브라우저와 웹서버가 정보를 주고받는 것은 
현실 세계의 웹과는 다르죠?
서로 다른 컴퓨터끼리 정보를 주고 답을 수 있어야 합니다. 

 

 

 

그런데 컴퓨터가 한 대 밖에 없다고요?
아닐걸요? 스마트폰은 전화기의 탈의 쓴 컴퓨터입니다. 
전화기는 멸종 위기에 처해있습니다. 
 

 

 

스마트폰에 설치된 웹브라우저와 
실습용 컴퓨터에 설치된 웹서버가 
서로 통신할 수 있다면 얼마나 좋을까요? 
해봅시다!

 

 

 

그런데 시작하기 전에 강조 드릴 것이 있습니다. 
이 작업은 10명 중 1명 정도만 성공할 것입니다. 
성공하는 이유는 하나인데 실패하는 이유는 백 가지가 넘거든요. 
혹시 실패했다고 해도 되었다고 간주해주세요. 
직접 하는 것은 천천히 하면 됩니다. 

 

 

 

우선 해야 할 일은 
스마트폰과 컴퓨터를 같은 네트워크에 연결해야 합니다. 
쉽게 말해서 같은 와이파이에 접속해주세요. 
예를 들어서 노트북이 ego-5G에 접속되어 있다면 
스마트폰도 ego-5G에 접속되어야 합니다. 

 

 

우선 웹서버를 끕니다. 
Accessible on local network 옵션을 켭니다. 

웹서버를 다시 켜서 옵션을 반영합니다. 

 

 

새로운 아이디 주소가 나타났습니다. 
이 주소가 같은 네트워크 안에서 사용할 수 있는
웹서버가 설치된 컴퓨터의 IP 주소입니다. 

 

 

 

스마트폰의 브라우저에서 주소를 입력합니다. 

 

 

 

축하합니다. 

한 대의 컴퓨터를 초월해서 
전 세계에 있는 수많은 컴퓨터를 
마치 내 컴퓨터인 것처럼 사용할 수 있게 된 
웅장한 진보를 목격하신 것입니다!

댓글

댓글 본문
  1. 코드몰라요
    22.06.20수강완료
  2. 손정은
    정말 아래 댓글처럼 방화벽 잠시 껐더니 되네요~^^ 넘 좋아~~~
  3. 리언
    220617
  4. 시대의 흐름
    2022.06.15 수강완료!
  5. 김인혜
    우와!!! 들어가져요 ㅋㅋㅋㅋ 카페라서 맘속으로 소리질렀어요 ㅋㅋㅋ 넘 신기하고 재밌어요 !!!! 씬나!
  6. 원이
    220610
  7. 가비
    2022-06-02 좋은영상 무료로 배포해주셔서 감사합니다^^
  8. scientist
    220531
    스마트폰에서 웹페이지를 열 수 있을까 기대했는데 아쉽게도 열리지 않았습니다 그래도 뭐 다음에 다시 시도해볼 예정입니다 그땐 아는게 많아져서 왜인지 알게 되면 좋겠네요!
  9. 김재원
    5/13
  10. 감사합니다
  11. 호박아들
    22.04.24 - (window 10기준) 스마트폰으로 접속 시 무한 로딩이 걸려서 댓글 참고하여 공용 네트워크 방화벽을 잠시 끄고 접속해보니 잘되네요. 안되시는 분들 참고하시길 바랍니다.
  12. rhdwhdgu
    22.04.24
  13. 220422
  14. 우탄
    휴대폰으로 접속 안되시는 분들 윈도우기준 활성 공용네트워크 잠깐 꺼주시면 작동합니다.
    근데 이 앱 어떻게 활용해야 할까요?...
  15. 매듭달열하루
    22.04.15
  16. saltjuice
    windows 10에서 방화벽으로 모든 포트를 다 막은거 같아요.
    저도 비슷했는데 'Winsows 보안' > '방화벽 및 네트워크 보호'에서 일시적으로 방화벽 꺼보니까 연결 되었습니다~
    연결되는거 확인하고 다시 방화벽은 켰구요
    대화보기
    • 22.04.10
    • 2022/04/08 (금)
      나중에 다시 해보기
    • 주파랑
      음, 현재 노트북이 핸드폰 핫스팟을 통해 인터넷에 접속하고 있는 상태인데 페이지가 안 열리네요. 계속 로딩 중...

      (+추가) 집 와서 집 와이파이 공유기에 노트북이랑 핸드폰이랑 연결해서 해보는데 여전히 안 되네... 웹 서버도 새로 껐다켰는데... 그냥 됐다고 생각하면 되는 건가ㅎㅎ
    • 완료
    • 유끼끼
      핸드폰이 정말 왼쪽아래에 있어서 소름 돋았네요 .... ㅋㅋ
    • 너구리기린
      2022.03.24
      스마트폰에서 이렇게 할 수 있는 게 너무 신기해요!
    • 윤재승
      너무 궁금했는데 이렇게 하는 거였군요!!!!!!!!!
    • 프래머
      '웹서버 운영하기 (2022년 수정판)' 완료
      2022-03-18

      Chrome, Whale 등의 인터넷을 사용해서
      Web Server for Chrome을 설치해
      웹 서버를 손쉽게 열 수 있다.

      같은 네트워크에 접속해 있는 휴대폰을
      이용해서 내 서버에도 접속할 수 있었다.
    • 윤원
      다시보기
    • B_frog
      220309
    • 이윤
      220306
    • 지구
      2022.03.03
    • ^^
    • DH니스
      2022.02.24
    • 윾겸
      22.02.24(목)

      스마트폰으로는 안되네요,,ㅠㅠ 원인이 뭘깡
    • 초스피드로생활코딩님의모든강의마스터
    • keepgoing
      22.02.20
      127.0.0.1 내 컴퓨터의 IP 주소
      keepgoing
    • tfx5470h
      2022-02-19
    • 코충이
      2022.2.19
    • 개밍
      스마트폰에서는 서버가 안뜨네요 ㅠㅠ 하지만 열심히 강의 들었습니다.
    • 드림보이
      2022.02.10. WEB1 - HTML & Internet - 웹서버 운영하기 (2022년 수정본) 파트 수강완료
    • 푸른초인
      2022.0209. 아쉽게도 스마트폰으로는 사이트가 안뜨네요. 여러가지 이유가 있겠지만 브라우저로 연결한 걸로 만족하겠습니다. 레벨 올려서 퀘스트 완수하겠습니다.
    • 저도요ㅠ
      대화보기
      • 삼계탕
        저는 해보니까 스마트폰에 사이트가 안 뜨네요
      • 꽉쥔주먹
        질문이 있어 글 남겨봅니다!
        같은 와이파이에 접속해야한다면 결국 인터넷 서버의 역할을 못하는거 아닌가요?
      • Jaime Kim
        감사합니다!! super!
      • gaheebella
        2022.01.24
      • 초보자바
        2022-01-20 오늘의 맛보기 마무리
        이 강좌부터 다시 복습 시작하기
      • 아까그애
        2022-01-20 완료
      • 20220119
      • 혼란
        만든 웹서버에서 이미지를 제대로 불러오지 못하는데 혹시 문제점이 무엇인지 알수 있을까요?
      • 달수
        20220113
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기