WEB1 - HTML & Internet

웹서버 운영 : 윈도우

윈도우에 웹서버 설치

 

웹서버와 http

 

웹브라우저와 웹서버의 통신

 

 

---

윈도우에 웹서버 설치

 

 

이번 시간에는
아파치 웹서버를
윈도우 컴퓨터에 설치하는 방법을
살펴보겠습니다.

 

 

아파치를
윈도우에
직접 설치하는 것은
꽤 까다로운 일이 에요.

 

 

그래서
아파치를
윈도우에
설치해주는 프로그램들이 있습니다.

 

 

검색창에 아래와 같이 입력해 봤습니다. '어떻게 하면 윈도우에서 아파치를 쉽게 설치할 수 있나?'

how to easy install apache on window

 

 

검색 결과 이런 페이지를 찾았습니다. 여기 있는 링크를 참조해서 검색을 해 봅시다.

 

 

아래와 같이 검색해 봤습니다.

bitnami WAMP stack

 

 

이렇게 생긴 페이지를 찾았어요. Bitnami WAMP Stack이라는 프로그램을 다운로드받을 수 있는 페이지입니다. (https://bitnami.com/stack/wamp)

W는 Windows, A는 Apache, M은 MySQL, P는 PHP의 약자입니다. 우리는 이 중에서 Apache 웹서버를 설치하기 위해서 Bitnami를 깔고 있는 겁니다.

 

 

다운로드 버튼을 누르면 아래와 같이 bitnami에 로그인을 유도하는 페이지가 나옵니다. No thanks, just take me to the download를 누르면 됩니다.

 

 

다운로드가 끝난 후 bitnami-wampstack installer라고 적혀 있는 파일을 실행해서 설치를 진행합니다.

 

 

Bitnami를 어디에 설치할 것인가를 지정하는 화면이 보입니다. 경로를 살펴보세요. 나중에 필요합니다.

 

 

Next를 누르면, 이런 화면이 나타납니다. 이것은 MySQL이라는 데이터베이스의 비밀번호를 설정하는 화면입니다. 우리 수업에서는 사용하지 않지만, 다른 수업에서 사용될 수 있기 때문에 입력한 비밀번호를 기억해 두세요.

 

 

설치 과정에서 이런 화면이 뜰 수도 있습니다. 방화벽이란 것의 설정입니다. 허용(allow access)을 클릭해 주세요.

 

Launch Bitnami Wamp Stack 체크를 확인하고 완료 버튼을 누르시면 됩니다.

비트나미 메니저라는 프로그램이 실행됩니다. 이 프로그램을 이용해서 웹서버를 제어할 수 있습니다.

매니저가 자동으로 실행되지 않거나, 나중에 실행하고 싶을 때는 윈도우 탐색기에서 Bitnami를 설치한 디렉토리를 찾으세요. 보통 C:\Bitnami\wampstack-** 라고 된 디렉토리 아래에 있습니다. 거기에서 manager-windows라고 되어 있는 프로그램을 실행하시면 됩니다.

매니저에서 Go to Application 버튼을 누릅니다.

 

 

아래와 같은 화면이 나오면 Bitnami를 이용해서 아파치 웹서버를 성공적으로 설치한 것입니다.

 

 

매니저를 이용하면 웹서버를 켜고 끌 수 있습니다.

Manager Servers 탭을 선택하고, Apache Web Server를 선택한 후에 Start, Stop 버튼을 눌러서 웹서버를 켜고 끌 수 있습니다. Apache 앞에 초록색은 웹서버가 켜져 있다는 의미입니다. 만약 붉은색이라면 웹서버가 꺼져 있는 것입니다. 웹서버가 꺼져 있다면 웹페이지가 열리지 않을 것입니다.

 

 

웹서버를 설치했습니다!
축하합니다.

 

 

웹서버와 HTTP

지금부터는
웹서버의
요모조모를
살펴보겠습니다.

 

 

웹서버를 설치한 후에 Go to Application 버튼을 눌렀을 때 나오는 주소를 봐 주세요. localhost라고 되어 있을 겁니다.

 

아래와 같이 주소를 http://localhost/index.html으로 변경해 보세요. 

똑같죠? http://와 /index.html이 생략된 것 뿐입니다. 한편, localhost라는 도메인 이름은 '내 컴퓨터'라는 의미의 특수한 주소입니다.

 

똑같은 의미이지만 형식이 다른 주소로 변경해 보겠습니다. 같은 내용이 나와야 합니다.

 

아래의 주소들은 모두 내 컴퓨터에 있는 index.html 파일을 요청하는 주소입니다.
http://localhost/index.html
http://127.0.0.1/index.html

 

localhost와 같이 의미가 있는 이름을 도메인 네임(domain name), 127.0.0.1과 같이 번호로 되어 있는 것을 ip 주소(ip address)라고 부릅니다. 우리 수업에서는 ip 주소를 사용할 것입니다.

그럼 index.html 파일은 내 컴퓨터 어디에 있는 것일까요?

Bitnami wampstack이 설치된 디렉토리에 보시면 apache → htdocs → index.html 의 파일입니다.

htdocs 디렉토리는 hypertext documents 의 약자입니다. 즉 웹페이지가 저장된 디렉토리라는 의미죠.

웹브라우저에 표시되고 있는 웹페이지가 htdocs 디렉토리에 저장된 웹페이지인지 확인하기 위해서 index.html 파일을 메모장으로 열어 보세요.

index.html 파일의 body 태그 안쪽에 web1이라고 적어 보고 웹페이지를 리로드 해 보세요.

아래처럼 웹페이지가 수정되어야 합니다.

이렇게 해서 주소창에 입력된 index.html은 htdocs 디렉토리 아래에 있던 것이란 사실을 증명했죠?

 

 

지금까지 나온 내용을 이론적으로 정리해 보겠습니다.

http://127.0.0.1/index.html을 웹브라우저에 입력하면 웹브라우저는 같은 컴퓨터에 설치된 웹서버에게 index.html을 요청합니다. 웹서버는 웹페이지를 저장하기로 약속된 디렉토리인 htdocs에서 index.html 파일의 코드를 읽어서 웹브라우저에게 전송합니다. 웹서버는 코드를 해석해서 화면에 웹페이지를 표시합니다.

 

 

이제
자신의 프로젝트를
웹서버를 통해서
화면에 표시해보겠습니다.

 

 

htdocs 디렉토리의 파일들을 모두 삭제하고, 프로젝트 폴더에 있는 파일을 복사합니다.

 

 

그리고 리로드하면 이렇게 됩니다.

 

 

그럼 아이피 주소인 127.0.0.1을 이용해서 웹페이지를 여는 것과, 파일 열기를 통해서 웹페이지를 여는 것 사이에는 어떤 차이가 있을까요? 사용자 입장에서는 차이가 전혀 없습니다.

하지만 내부적으로는 완전히 다르게 동작합니다. 웹서버를 꺼 보세요. 127.0.0.1 주소를 사용하는 웹페이지는 보이지 않을 것입니다.

 

 

이론적으로 정리해 봅시다. 아래는 웹서버를 이용하는 것과 이용하지 않는 것의 차이를 보여줍니다.

http://는 HyperText Transfer Protocol의 약자입니다. Transfer는 전송이라는 뜻입니다. 즉 웹페이지를 전송하기 위해서 만든 통신 규약이라는 뜻입니다. 주소창에 입력된 주소가 http://로 시작하면 웹브라우저는 http 통신규약에 따라서 웹서버에 접속하게 됩니다. file://로 시작하면 웹브라우저는 파일을 직접 열어서 보여줍니다.

 

 

내 컴퓨터에 있는 파일을 웹서버를 통해서 가져오는 것은 실제로는 의미가 없습니다. 다음 챕터에서는 다른 컴퓨터에 있는 웹페이지를 http를 이용해서 열람하는 방법을 알아보겠습니다.

 

 

웹서버와 웹브라우저의 통신

두 대의 컴퓨터가 서로 웹페이지를 주고 받는 방법을 살펴보겠습니다.

 

 

웹브라우저가 웹서버에 접속하기 위해서는 웹서버가 설치된 컴퓨터의 주소(ip 주소)를 알아야 합니다. 윈도우 하단에 컴퓨터 모양 혹은 wifi 모양의 버튼을 눌러서 '네트워크와 공유센터 열기' 메뉴를 실행시켜 주세요.

 

 

'네트워크와 공유센터'에서 연결(Connections)항목을 클릭합니다.

 

 

자세히(Details) 버튼을 누릅니다.

 

IPv4라고 되어 있는 주소가 바로 자신의 컴퓨터의 ip 주소입니다.

 

 

알아낸 ip 주소로 접속해 보면 잘 동작할 것입니다. 필자의 경우 http://192.168.0.13/index.html 입니다. 각자 ip 주소가 다를 것입니다. 저와 같은 주소를 쓰면 안 됩니다.

 

 

아래 두 주소를 비교해 봅시다.
127.0.0.1
192.168.0.13

둘 다 내 컴퓨터를 가리킵니다. 하지만 전자는 자기 자신을 의미하는 일종의 대명사 같은 것이고, 후자는 저 주소에 해당하는 컴퓨터를 가리키는 고유 명사라고 할 수 있습니다.

 

 

그럼 2대의 컴퓨터를 이용해서
통신을 해 봅시다.

 

 

이를 위해서는
두 대의 컴퓨터가 필요합니다.
하지만 여러분은
한 대의 컴퓨터로
실습을 하고 계실 것입니다.
 

 

그런데 여러분은 사실
두 대의 컴퓨터를 가지고 있을 가능성이 있습니다.
바로 스마트폰 말이죠.

 

 

스마트폰은
전화의 탈을 쓴 컴퓨터입니다.
스마트폰의
웹브라우저를 켜시고
주소창에
웹서버가 설치된 컴퓨터의
ip 주소를 입력해서 접속해 보겠습니다.

 

 

그 전에 꼭 하셔야 할 것이 있습니다. 웹브라우저가 설치된 컴퓨터와 웹서버가 설치된 컴퓨터를 같은 네트워크에 접속해야 합니다.

예를 들어서 스마트폰이 iegoing이라는 이름의 와이파이에 접속했다면 웹서버가 설치된 컴퓨터도 iegoing이라는 이름에 접속해야 합니다.

 

이제 접속해 봅시다.

보시는 것처럼 웹서버에 저장된 내용이 웹브라우저에 잘 표시되는 것을 볼 수 있습니다.

 

 

혹시 안 될 수도 있습니다.
수업 시작하기 전에 말씀드렸던 것처럼
되는 이유는 하나인데
안 되는 이유는 수십 가지가 넘습니다.
안 되는 것 때문에
너무 실망하지 마시고,
되었다고 믿으시면 됩니다.

 

 

아쉽게도 우리 수업은
도메인 이름을 사용해서 접속하는 방법,
같은 네트워크에 있지 않은 사람들도
웹서버에 접속하게 하는 방법 같은 부분은
다루지 못했습니다.

 

 

우리 수업은
인터넷의 본질을 다루고 있습니다만,
현실의 인터넷은
본질만으로는 동작하지 않습니다.
더 복잡한 내용들이 많이 필요합니다.
여러가지 복잡성들은
후속 수업을 통해서 짚어드리겠습니다.
WEB1에서는 이 정도면 충분합니다.

 

 

이렇게 해서
정보기술의 중추라고 할 수 있는
인터넷을 살펴봤습니다.

 

 

여러분은
서버와 클라이언트를
구분할 수 있게 되었습니다.

 


내 컴퓨터의 ip 주소를
알아내는 방법도 알게 되었습니다.

 

 

여러분은
인터넷을 지배하는
가장 중요한 토대를 닦았습니다.

 

시간과 경험이 쌓임에 따라서
인터넷에 대한 여러분의 지식은
자연스럽게 성장하기 시작할 것입니다.

 

 

축하합니다.

댓글

댓글 본문
작성자
비밀번호
  1. nlds
    빨리 웹서버에 대해 더 배우고 싶네요!!
  2. 으릉
    ㅎㅎㅎ 신기하네욤, 아파치라는 단어 얼핏 듣기만 했는데 이런 용도로 쓰이는군요. 실제 서버 관리는 어떻게 하는지도 궁금해여 ㅋㅋ
    글고 왜 http보다 https가 안전하다는 건지 진짜 이해 안 됐었는데ㅜㅜ(대체 뭘 전송하고 왜 세팅한다는 건지 모르겠어서..) http의 역할을 알고나니 코털만큼은 이해한 거 같아요!
  3. 반자동
    아파치 웹서버가 실행이 안되네요. 예전부터 게임 서버를 열면 다른사람들 모두 안들어와지는 오류가 있었는데 여기서도 그러는 건가요 ?ㅜㅜ
  4. 추신
    강의 정말 즐겁고 감사하게 듣고있습니다!
    근데 강의대로 따라했고

    노트북과 같은 와이파이를 쓰고 있는 폰으로 접근했는데
    실패했습니다....
    그전 단계까지는 잘 진행되었는데 말이죠...
    왜 안되는걸까요?
  5. EASYCOM EASYGO
    HTTPS는 HTTP의 보안 버전이라고 해야 할까요. 정확하게 뭐라고 불러야 할지는 모르겠습니다.
    저도 인터넷을 배우는 입장이라서 잘은 모르겠네요.

    아무튼 HTTPS는 웹브라우저와 연결한 웹사이트의 사이에서 전송되는 데이터들을 암호화하는 전송 규약입니다.
    그래서 Hyper Text Transfer Protocol Secure라는 약어를 지닐 수 있겠습니다.

    HTTPS가 생겨난 이유는 온라인 뱅킹, 온라인 쇼핑몰에서 사용되는 트랜잭션(Transactions]) 즉 통신을,
    나와 저 사람 아니 고객과 회사의 신뢰를 위하여 HTTPS라는 통신규약을 만들었습니다.

    또 HTTPS 통신 여부 위 브라우저의 주소창에서의 왼쪽 자물쇠 모양의 아이콘으로도 확인할 수 있습니다.
    좀 설명이 부족한 것같지만 조금이나마 도움이 되었기를 바랍니다 ^^!

    내용 출처 : https://www.instantssl.com......tml
    대화보기
    • wusgood
      인증서 오류: 탐색이 차단됨

      이 사이트는 안전하지 않습니다.

      다른 사람이 사용자를 속이거나 사용자가 서버로 보내는 정보를 도용하려 함을 의미할 수 있습니다. 이 사이트를 즉시 닫아야 합니다.


      요러케 나오는 거는 왜그러는 걸까요
      처음깔고 127.0.0.1 들어갔을 때는 문제없었는데
      컴퓨터 껏다가 켜니까 저렇게 나와요 ㅠㅠ
      -------------------------------------
      https로 적어서 안되었습니다;;
      s 차이가 무엇인지를 모르겟네요 ㅠㅠ
      나중에 기회되면 찾아봐야겠어요!
    • 김언성
      404 not found 오류가 납니다.
      파일을 서버가 인식하지 못하는건지, 브라우저가 인식하지 못하는건진 모르겠지만 파일 유형이 이상하여 인터넷에서 파일을 찾지못하는 것은 확인했습니다.

      이고잉님이 올려주신 소스자료는 파일 유형이 chrome html doc- 로 저장되어 있는데
      제가 프로젝트 따라가면서 만든 소스파일들은 왜 죄다 파일 유형이 그냥 <파일> 이라고 되어있을까요?
      파일 확장자 명도 뜨질 않아서 어떻게 바꿔야할지도 모르겠습니다. -ㅅ-;;ㅠㅠ 이상한데서 계속 막히네요
      -------------------------
      바보같은 질문이었군요..
      파일이름 뒤에 .html만 붙여줬더니 html파일로 적용되어 잘 작동되네요

      혹시 not found 404 뜨시는 분들은... atom에서 코딩할때 파일명에 html 붙였는지 확인하시고 안붙이셨다면 일반 파일을 html 파일로 바꾸시면 될겁니다!
    • 한현석
      아파치 톰켓과 위에 글의 아파치 서버만 다운 받는거랑 다른건가요..?
    • egoing
      이 수업이 모두 끝나고 아래 수업 쪽으로 방향을 잡으시면 방법을 스스로 찾을 수 있습니다.
      https://opentutorials.org......265
      대화보기
      • 설렁탕
        처음 들어갔을때 localhost 말고 ip주소가 바로 나오는 방법은 없나요?
      • 솔백아
        2018.04.19 "여러분 축하드려요~"라는 말에 중독되고 있는 것 같아요ㅋㅋㅋ 감사합니당 오늘도 잘 봤습니다!
      • 스페이스몽키
        감사합니다. 강의 들을 때마다 새로운 세상을 볼 수 있네요
      • Dreaming_Joyy
        으아!! 오늘은 조금 어려웠지만.
        서버와 클라이언트; internet protocol adress(ip주소)를 배웠고! http의 의미를 배웠고/ 내 컴퓨터의 주소를 확인해서 다른 컴퓨터와의 통신을 배웠습니다!!!! 뿌듯합니다!!!
      • 박한석
        안녕하세요. 24살 취준생입니다.
        정부에서 하는 취업성공패키지를 통해 스마트컨텐츠ui/ux라는 수업을 듣고 있는데요.
        이곳에서 html5/css javascript jquery android studio, java 등의 기초문법을 배웠습니다.
        기업에 재출할 포트폴리오 과제로 조원들끼리 페이스북과 같은 타임라인을 만들기로 하였습니다.
        그런데 커리큘럼에 서버 관련 수업이 없어서 어려움을 겪고 있었는데요, 결국 제가 백엔드를 배워서 구현하기로 하였습니다. 어디서부터 어떻게 시작해야 될지 몰라 일단 php 기초 수업을 듣고 있습니다. 현재 파일제어까지 수업을 들었습니다. 4월 중순까지 이론을 습득하고 실제 기능구현이 가능한 실력까지 키우고 싶습니다.
        그런데 제가 php기본 수업을 다 듣는다고 해서 과연 페이스북 타임라인 기능 구현을 할 수 있을지 확신이 서지 않습니다. 이 수업과 병행하여 들어야할지, php기본 수업만 들어도 충분한지 알려주시면 감사하겠습니다.
        현재 jquery mobile로 화면을 제작 중에 있습니다. 구현하고자 하는 기능은 로그인, 타임라인, 글쓰기 등입니다. 답변 부탁드립니다. 고맙습니다.
      • egoing
        두개는 전혀 상관관계가 없습니다. 아마도 127.0.0.1의 웹브라우저가 이전 정보를 캐쉬(저장)하고 있어서 이런 문제가 생길 수 있습니다. 웹브라우저에서 캐쉬를 무시하는 리로드를 시도해보시면 어떨까해요.
        https://www.google.co.kr......F-8
        대화보기
        • LinaPark
          github와 아파치 웹서버의 상관관계가 궁금합니다.
          무슨말이냐 하면, github에서 파일을 업로드도 해보고 아파치를 설치 후 htdocs 폴더에 파일을 붙여넣고 웹 페이지에 띄우는 것도 해보았습니다. 그런데 htdocs 폴더에 기존의 파일들을 지우고 새로만든 다른 파일을 붙여넣었을 때 127.0.0.1에는 지운 파일만 보일 뿐, 새로 띄우려는 파일이 나타나지 않았습니다. 그래서 github에 새로운 repository를 생성 후, 새로만든 파일을 업로드 하니 127.0.0.1에서 업로드한 파일이 보였습니다. 이런 현상은 왜 그런 건가요? github와 아파치 웹서버가 무슨 연결이 되어 있나요?
        • 1maro2maria
          김창완씨 목소리 같이들려요 ㅎㅎ 감사합니다.
        • chuk ha
          여러분 축↗하↘드려↗요↘↗
        • cactusky
          Clear!!!
        • 설치하는데 에러메세지가 뜨면서 설치가 안됩니다.
          Error running C:/Bitnami/wampstack-7.1.14-0/php/php-v: child killed: unknown signal
          도와주세요~ㅜ
        • 제갈량
          예전에 톰캣을 사용했을 때는 어려워서 포기했는데
          비트나미를 이용하니깐 웹 서버 설치가 쉽고 간단하게 되네요.
          그리고, 스마트 폰이나 태블릿에서
          내 컴에 깔린 웹 서버로 접속하는거 까지 성공했습니다.
          감사합니다. ^^
        • 감사히 잘 보고있습니다
          bitnami대신 톰캣을 다운받아 사용해도 괜찮나요??
        • egoing
          이미 웹서버가 있으면 기존 웹서버와 충돌을 막기 위해서 다른 포트가 부여됩니다.
          대화보기
          • 81 이라는 포트는 왜 붙는 건가요...?
          • http://127.0.0.1......로 입력을 하면 화면이 나오질 않네요. 메모장으로 편집하거나 전에 만든 파일 나오게 하는 건 다되는데 말이죠. 링크가 계속 localhost81/index.html로 나오네요. 왜 이렇는 건가요?
          • freethink
            http://127.0.0.1......tml
            입력시에 저번 코딩야학2기 때 만들었던 script에 관한 index 파일이 열리는건
            어떻게 해결할 수 있을까요ㅜㅜ
            이전 버전 비트나미도 삭제해봤는데..
          • 우리에게 열린 다른 문을 보지 못한다
            이해가 잘 안되는 부분이 있어서 여러번 돌리면서 봤네요
            그래도 완벽하게 이해는 어렵지만 앞으로의 경험에서 채우면 될 것 같네요
            감사드려요옹~
          • 김현
            여러분~~~ 축하드려영~~~
          • 레그얌
            음...아파치를 깔았는데 Go to Application 및 밑에 버튼 클릭해도 아무런 반응이 없네요...
            Manager Sever 탭에서는 Stop / Start 는 잘 작동되는데 왜그럴까요..?
            특이하게 주소창에 localhost치면 잘나오네요..음 잘 깔린건가요?
          • 코딩개미
            그냥 동영상 몇개봤을뿐인데...
            책한권 땠을때보다 훨씬 많이 공부가 된것같아요ㅠㅠㅠㅠㅠㅠ
            서버까지 설치할수있게되다니!!!!!!!!
            감사합니당 ㅠㅠ
          • chingguhl@naver.com
            너무감사해영
          • 제이
            벼락치기지만 열심히 달려봅니다ㅎㅎ
          • 위버
            마지막 동영상에서 폰과 컴퓨터를 같은 와이파이에 접속 시킨 후 아이피주소를 입력했는데도 폰에서는 화면이 뜨지 않아요... 이 경우는 왜때문인가요? ㅠㅠ 그냥 넘어가기가 좀 그러해서... 설명 부탁드립니다... ㅠㅠㅠ
          • 김민승
            웹서버 직접 운영해보겠습니다~
          • Jeonghee Gwon
            코딩야학 너무 좋아요~
          • egoing
            습관적으로 잘 못 쓰고 있는 맞춤법이 정말 많다는 것을 느낍니다. 공부하면서 이렇게 꼼꼼하게 체크하는 것이 정말 어려운 일일텐데 숙연한 마음까지 듭니다. 이번에고 감사하게 수정해서 반영했습니다.
            대화보기
            • Jihyun Lee
              완주까지 고고
            • 민트색마시멜로우
              예~~~~
              대화보기
              • 소프트러브
                잘 보았습니다.
              • 와. 이런 공부방이 따로 있었군요. 감사합니다 ^^ 차근차근 보도록 할께요!
                대화보기
                • Jaehak Kim
                  지금은 욜릴 페이지도 없지만 나중에 꼭 한번 해봐야 겠다는... 그때도 사이트가 살아 있기를 바랍니다...
                  감사합니다
                • aimerthis(이성민)
                  잘봤습니다.
                • 이피
                  실습과 이를 통한 익숙함이 필요한 세션이었어요.
                  지금은 벼락치기라 넘어가지만 꼭 실습해보겠습니다.
                • 배민수
                  감사합니다
                • 정말 잘 봤습니다
                • 감사합니다!
                • 김태현
                  감사합니다
                • 차녕
                  집에 있는 3대의 노트북으로 실습하니 접속 등 모두 모두 잘 되네요...재밌어요..
                  내일은 파이썬 공부하는 우리 아이들에게 가르쳐 주어야겠어요...
                • 이근환
                  좋은 강의 감사드립니다!!)
                • 민트색마시멜로우
                  그건 웹서버가 컴퓨터의 81번 포트에 설치 되어있기 때문입니다. 포트는 영어로 항구라는 뜻인데 컴퓨터에서 일종의 정보가 드나드는 문이라고 생각하심 되겠습니다.
                  https://opentutorials.org......483 이 수업에 포트 수업 참조하심 될것 같네요. 저도 자세히는 모르는 터라
                  ㅎㅎㅎ 그래도 이고잉님 덕본에 이런 지식도 쌓고 좋은 시간 되고 있습니다.
                  대화보기
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기