본문 바로가기
02_STUDY/HTML

생활코딩 WEB1 - HTML & Internet 19강 정리

by zestlumen 2023. 3. 30.

2021-12-13 01:46:45

 

WEB1-19강. 웹서버 운영하기

웹서버 운영하기 위해선 웹서버 프로그램 설치하기

웹 브라우저는 제품명X, 제품군O, 웹 서버도 마찬가지로 제품군

Apache(아파치), IIS, Nginx(엔진엑스)

셋 중에 Apache 아파치 이용 (오픈소스, 무료, 공공재)

아파치는 2017년 생활코딩의 동영상 업로드 기준에서 한번도 일등의 자리를 뻇긴 적 없는 제왕

 

미래에는 설치 방법이 달라져 있을 수 있기 떄문에

how to install apache http server 운영체제 라고 검색

꿀팁은 해단 년도까지 뒤에 붙여서 검색하기

 

(항상 생활코딩님 강의 듣다보면 미래까지 생각해서 말해주는 것들이 있는데

진짜...새삼 존경스러움..이런 강의를 공짜로 듣는 것 자체가 너무 감사하다고 생각합니다.)


WEB1-19.1.1강. 웹서버 설치(윈도우)

저는 LG 노트북 gram을 사용중이기 때문에 윈도우 영상만 봤습니다.

how to easy install apache on window 검색

구글에 검색했을 때 현재 연관검색어로 아래처럼 나오기도 합니다.

how to easy install apache http server windows 10 2021

 

그렇지만 일단 생활코딩님이 알려주신 방법으로는

아파치 웹서버 공식홈페이지에서는 거기에 써져 있는 여러 프로그램 중

하나 설치하면 자동으로 깔릴 거라고 되어 있어서 그 중

Bitnami WAMP Stack 프로그램을 사용

 

bitnami wamp stack 검색

(W_Window, A_Apache, M_My sql 데이터베이스, P-PHP 미들웨어 약자)

- Local install에 최신 버전 다운 - 아래 No thanks선택 - 저장

비트나미인스톨러 설치 - next - next - 저장된 경로 한번 확인하기

- 비밀번호 입력, 기억하기(My sql에서 사용)

- next - Launch wampstack in the cloud with Bitnami 체크해제

- next - next - 설치시작, 설치 끝나면 Allow access 

- Launch Bitnami WAMP Stack 체크 되어 있는지 확인하고 Finish

- 프로그램 떴으면 Go to Application 누르기

사이트가 뜨면 성공적으로 비트나미에서 아파치 설치된거임

(프로그램은 비트나미 매니저인데, 설치한 여러 프로그램을 관리하는데 도움을 줌)

꺼져있다면 윈도우 탐색기에서 비트나미 설치한 디렉토리 찾기

manager-windows프로그램 실행 - 이 프로그램으로 웹서버 켜고 끄고 가능

- Manage Servers - Apache Web Server stop/start(초록불)

 

저는 생활코딩님 강의 동영상 아래 댓글을 통해서 https://bitnami.com/ 공식 홈페이지 들어가서

applications에서 WAMP 찾아서 다운하라고 해서 그대로 했더니 쉽게 한번만에 성공했습니다!

 

Bitnami

With over 1 million apps deployed per month, Bitnami makes it incredibly easy to deploy apps with native installers, as virtual machines, docker containers or in the cloud.

bitnami.com


WEB1-19.1.2강. 웹서버와 HTTP(윈도우)

비트나미로 켠 주소창에 local host를 http://127.0.0.1/index.html

 

Bitnami 디렉토리 안의 wampstack 들어가면 Apache 설치되어 있는 디렉토리

-htdocs(hypertext documents약자) 웹페이지가 저장된 곳 들어가면 index파일 있음

그 파일이 비트나미로 연 웹페이지 맞는지 확인하기

(오른쪽 마우스 클릭-메모장으로 열기-body 태그 밑에 아무 의미 없이 web1적기-저장

-리로드했을 때 페이지에 web1이 뜸-확인완료

주소창에~~/index.html라고 쳤을 떄 화면에 표시되는 웹페이지는

htdocs라는 디렉토리 밑에 있는 저 index.html 파일이다 라는 의미

 

한대의 컴퓨터에 bitnami가 만든 htdocs 디렉토리 안 index.html 파일이 저장되어 있음

그리고 한대의 컴퓨터에 웹 브라우저, 웹 서버가 설치되어 있는 상황

웹 브라우저로 웹 서버를 통해 htdocs 밑에 있는 index.html 파일을 가져오고 싶으면

주소를 http://127.0.0.1/index.html을 입력한다.

여기서 127.0.0.1이 Internet Protocol Address, IP주소 이다.

웹 브라우저가 설치되어 있는 컴퓨터를 가리키는 아주 특수한 주소, 약속된 주소

웹 브라우저가 설치된 각자의 컴퓨터의 웹 서버를 가리킴

 

index.html을 적어주면 웹 브라우저가 자신의 컴퓨터에 있는 웹서버를 통해

그 파일을 원해 하는거고 웹서버는 htdocs라는 디렉토리에서 파일 찾도록

설정이 기본적으로 되어있는 상태, 그 설정 된대로 htdocs 디렉토리에서 파일을 읽어서

웹 브라우저로 전송, 그럼 웹 브라우저가 해석해서 화면으로 표시.

 

우리가 만든 웹페이지를 열고 싶다면

Bitnami 설치하면서 우리가 생성한 Apache의 htdocs라는 특수한 디렉토리에

우리가 작업한 파일을 덮어쓰기한다 - htdocs 디렉토리에 있는 파일은 삭제

 

주소를 통해 보는 것과 파일 열기를 통해 웹페이지를 보는 것의 차이

둘의 경로를 보면 주소가 완전 다르다

http://127.0.0.1/index.html - 한대의 컴퓨터 안에서 웹브라우저와 웹 서버가 있을 때

웹브라우저가 웹 서버에게 요청, 웹 서버가 파일 열어서 웹브라우저에게 전송

file://c:/~~~~ - 파일로 시작하는 주소 입력하면 이 컴퓨터 안에서는 웹서버는

이 과정에 개입하지 X,  웹 브라우저가 직접 index.html 파일 읽어서 화면에 열어줌

 

이 때 http://와 file://차이는  file:// 파일에 있는 걸 직접 여는거고

http://는 웹 브라우저와 웹 서버가 서로 통신할 때 사용하는

통신규약인 Hyper Text Transfer Protocol을 이용해 데이터를 가져오는 것이다.

(Hypertext 웹페이지 Transfer 전송한다 Protocol 규약,약속) = http

서로 다른 컴퓨터에 있는 웹 브라우저와 웹 서버가 통신을 하기 위해서는

반드시 http를 사용해야 한다.


WEB1-19.1.2강. 웹서버와 웹브라우저 통신 (윈도우)

두대 컴퓨터가 웹페이지를 주고 받는 방법

한대에 웹서버가 있고 특정디스크에 index.html파일이 있는 상황

우린 웹브라우저 통해 웹서버 접속해 저 파일 전송받아서 화면에 표시하고 싶음.

우리에게 어떤 정보가 필요한가?

비유적으로 친구에게 전화할 때는 전화번호가 필요하다.

>>>웹 브라우저 웹 서버 요청할 때는 웹 서버 주소, 즉 IP주소가 필요하다

주소창에 IP주소를 적어서 IP에 해당되는 웹 서버에게 파일을 요청할 수 있게 됨

 

이것을 위해 필요한 것 

1.컴퓨터 두대 (한 대를 스마트폰으로 이용 가능)

  스마트폰을 이용해 실습용 컴퓨터에 설치된 웹 서버에 접속하기

2.웹 서버에 설치된 컴퓨터 IP주소 알아내기

  하단에 컴퓨터 콘센트랑 같이 있는 아이콘이나 와이파이 아이콘(무선연결중일시) 오른쪽클릭

  -네트워크 및 인터넷 설정 열기-와이파이 모양 밑에 속성 -IPv4주소 있음

  두 개 컴퓨터 연결, 두대의 컴퓨터가 무선으로 되어있으면 같은 네트워크에 접속되어 있어야 함.

  무선이 아니면 공유기 같은 라인으로 접속되어 있어야 함.

  서버컴퓨터 접속하기>휴대폰에 해당 컴퓨터 IP주소를 입력하면 파일이 뜬다!

 

 

***127.0.0.1은 모든 컴퓨터가 자기자신을 127.0.0.1이라고 하기로 전세계적으로 약속.

웹 브라우저에서 127.0.0.1이라고 치는 것은 자기 자신을 의미함