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. 수면의 과학
    덕분에 저도 성공했습니다. 감사합니다^^
    대화보기
    • roamer
      서버는 확실히 윈도우보단 리눅스가 좋은 것 같습니다.
    • supernet
      완료
    • im3003
      완료
    • Wolf
      웹서버도 정상적으로 올라간 상태이고 같은 내부망을 이용해서 스마트 폰으로 웹 접속 하려하는데 계속
      실패하다가 여러 방법으로 시도한 끝에 컴퓨터 방화벽 문제로 해결되었습니다.

      윈도우10 기준으로 "방화벽 및 네트워크보호 - 고급설정" 들어가시면 화면에 도메인프로필,개인프로필,공용프로필 정보가 보입니다. Windows Defender 방화벽 속성을 클릭하시고 "공용 프로필 탭"
      을 클릭하신 후 인바운드 연결 설정이 차단(기본값) 으로 되어있는걸 "허용" 상태로 적용 시켜준 후 스마트폰으로 접속하니 해결되는 ..ㅠㅠ 저는 이방법으로 해결됐습니다 . 혹시 안되는 분들 이 방법으로 시도해보시고
      화이팅하세요~^^

      보기쉽게 이미지로 캡쳐 해놨습니다. :) https://phant0m.tistory.com/13
    • june
      안녕하세요. 강의 너무나 잘 보고 있습니다. 감사합니다. 자작 나스가 아닌 시놀로지 나스를 외부에서 접속할 수 있는 개인서버로 하나 가지고있는데요. 데스크탑 안에 웹서버를 설치(?) 한다는 개념은, PC 내부의 일정 디렉토리를 서버로서 동작하게 하는 설치프로그램 같은데, 그럼 이렇게 웹서버를 설치하는과정을 개인 NAS를 만드는 과정과 동일하게 보면 되는건가요? 저런 인스톨을 사전에 해주는 개념이 시놀로지를 사서 처음 셋팅할때의 기본적으로 셋업하는 과정이라고 이해하면 되는게 맞는지 모르겠습니다. 되려 지금 NAS를 가지고 있어버리니까 어느과정이 어떤것인지 조금 헷갈리게 되는것 같습니다ㅜㅜ 인터넷과 웹에 관해 필수적인 이해를 가지고 NAS를 사용하고 있는게 아니었어서요.
      그리고 127.0.0.1 은 어디로부터 도출되는 IP주소인건가요?
      웹호스팅의 개념이 아니고 서버자체를 설치하는 개념일텐데, 웹서버의 IP주소는 아파치라는 곳으로부터 얻어오는건가요..? 그렇게 되면 순수한 개인 웹서버라기보단 일부 웹호스팅의 과정이 섞인것이 아닌지요?

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

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

      이 부분이 잘 와닿지 않는것 같습니다..! 어떤 차이가 있는건가요?
    • 수우
      완료
    • 물만난꼬부기
      완료
    • Tinah
      Thank you!
    • 나무
      비트나미 설치 오래 걸리네요...ㅠㅠ
    • 달려라늙은이
      감사합니다. 완료!
    • Jinseo Koo
      완료 !
    • 칠칠석
      2019년 2월 23일

      완료!
    • 이채
      같은 네트워크인데도 접속 안 되는 경우, 설치 시 잘못 선택해서 그럴 수도 있어요.
      설치 과정에서 개인네트워크와 공용 네트워크 중 선택하는 항목이 있는데,
      처음에 개인 네트워크로 설치했을 땐 모바일로 접속 시 연결이 안 되었고,
      공용 네트워크로 다시 설치했을 땐 접속이 되었습니다^^
    • 완료 :)
    • 미니
      감사합니다
    • johnAhn
      정말 감사합니다.
    • 우도순
      완료
    • HEYJUNE
      Complete
    • 2019-02-14 완료!
    • 희상
      여러분 축하드려용~ 이 말이 너무 좋은것 같아요!
    • 호두
      고맙습니다.
    • 예썽
      완료!
    • 잠만보
      :)
    • JaeKyun Kim
      IP주소는 기기별로 부여되는 것이기 때문에 완전히 같지는 않습니다.
      예를 들어 1.1.1.1이 서버에 부여되어 있고 1.1.1.2가 모바일폰에 부여 되어 있고 subnet mask가 255.255.255.0이라면 같은 네트워크에 있다는 것을 의미 합니다.
      '.'으로 구분되는 자리수를 기준으로 같은 네트워크를 사용하는지 구분하고 있기 때문입니다.
      A.B.C.D/24와 같이 표기되면 A.B.C.D 255.255.255.0과 같은 표기이고 A.B.C까지 같은 숫자이면 동일한 네트워크를 사용 중이라는 의미 입니다.
      동일 네트워크인데도 안뜨는 상황이라면 웹서버쪽을 다시 확인해 보셔야 합니다. ^^
      대화보기
      • JaeKyun Kim
        https://opentutorials.org......893 강의를 보시면, Bitnami를 설치하셨으면 Manager Servers 탭을 선택하여 서버가 running 상태인지 확인하세요.
        그리고 Bitnami wampstack이 설치된 디렉토리에 보시면 apache → htdocs → index.html 의 파일이 있습니다. 여기에 실습하신 페이지가 연결되어 있는지 확인해 보세요. ^^
        대화보기
        • kyukyu0901
          같은 공유기의 와이파이에 연결하였으나 모바일과 pc 각각의 ip주소가 다를 경우에는

          안뜨는 것이 맞나요?
        • dudwn7504
          같은 공유기의 와이파이에 연결해서 했습니다.
          두번째 가정에서 말씀하신 웹서버에서 초기접속시 보여주는 페이지는 어떻게 하는 건가요?
          대화보기
          • JaeKyun Kim
            접속이 안되는 첫번 째 가정은 서로 통신이 가능해야 합니다. 모바일은 인터넷 환경이고 접속할 서버는 집에서 사용하는 공유기 주소(사설 주소)를 사용 중이라면 접속이 안 될 수 있습니다.
            모바일에서 IP주소치고 들어갈 경우에는 모바일도 사설주소(공유기에서 할당 받은 주소)를 가지고 있어야 합니다.
            두번 째 가정은 웹서버에서 초기접속 시 보여줄 페이지가 설정되어 있지 않을 수도 있습니다.
            확인해 보세요.
            대화보기
            • dudwn7504
              모바일에서 ip주소치고 들어갔는데 왜 안뜰까요? ㅜㅜ 이유좀 알려주세요
            • Pencith
              :)
            • 김동현
              꿀잼이네요
            • 완료
            • 신인섭
              완료~^^
            • 신지용
              완료~
            • 동원참치
              복습완료
            • 이걸 예전에 그렇게 어렵게 배웠었는데,
              다시 들으니 어렵게 들었던게 도움이 되네요.
            • 리플루토
              맥이 안되서 윈도우로 하려는데 너무 어렵네요;;;
            • 함가죠
              완료 감사합니다:)
            • 김수빈
              완료
            • 동원참치
              완료...
            • 삼색냥
              완료
            • 동원참치
              완료
            • 완료
            • Oyknue
              좋아요
            • 코딩
              질문 올린 사람입니다. 구글링하다가 해결했습니다!!
              저처럼 아파치에 빨간물 들어오는 분들은 아래 포스팅을 참고해주세요! 저도 이거 보고 해결했습니다 ^^
              http://yuilovestomato.tistory.com......ami
              대화보기
              • 코딩
                매니저를 켰는데, 아파치 부분에 빨간불이 들어옵니다... 계속 restart all 눌러도 여전히 빨간물만 들어오네요. 제가 이 전에 비트나미를 깔았다가 지우고 다시 까는 거거든요. (mysql 비번 잃어버려서 명령 프롬프트로 이것저것 실행해보다가 결국 재설정 못해서 그냥 지우고 다시 깔았습니다 그런데 다시 까니까 아파치가 안 되네요) 그것 때문에 이러는 걸까요? 어떻게 해야 좋을지 모르겠습니다 도와주세요... ㅠㅠ
              • 임스
                완료
              • 완료
              • 신승민
                완료 감사합니다
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기