거친 웹 서버의 작동 방식
소개
DMM WebCamp에서 멘토를 하고 있는 시라세( @juvenile-develop )입니다.
웹 서버 자체의 구조를 대략적으로 설명하려고합니다.
웹 개요
인터넷에서 웹 페이지를 클라이언트의 요청에 대한 응답을 반환하는 것이 웹 서버의 일입니다.
요청 내용을 만들어 웹 서버로 보내고 응답 내용을 분석하여 사용자에게 표시하는 것이 브라우저의 일입니다.
실제로 요청 내용과 응답 내용을 살펴 보겠습니다.
cURL이라는 툴(및 라이브러리)을 사용하면 통신 내용을 볼 수 있습니다.
curl$ curl -v -X GET http://example.com
curl이 작성한 HTTP의 요청 데이터가 출력됩니다.
요청> GET / HTTP/1.1
> Host: example.com
> User-Agent: curl/7.68.0
> Accept: */*
>
그리고 연결과 자기 소개가 잘되면 응답이 돌아옵니다.
Response< HTTP/1.1 200 OK
< Age: 463948
< Cache-Control: max-age=604800
< Content-Type: text/html; charset=UTF-8
< Date: Sun, 29 Nov 2020 23:58:35 GMT
< Etag: "3147526947+ident"
< Expires: Sun, 06 Dec 2020 23:58:35 GMT
< Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
< Server: ECS (sjc/16DD)
< Vary: Accept-Encoding
< X-Cache: HIT
< Content-Length: 1256
<
이것은 응답 헤더라고 하는 부분입니다.
1행째와 마지막 행 이외는 할애합니다.
첫 번째 줄은 상태가 반환됩니다. EC2를 사용하여 서버에 배포하는 사람은 잘 보았지만 500 오류와 404 오류는 여기에 있습니다.
마지막 줄은 Body의 크기를 포함합니다.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 2em;
background-color: #fdfdff;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
@media (max-width: 700px) {
div {
margin: 0 auto;
width: auto;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
응답 본문(HTML)이 반환됩니다.
브라우저는 이 HTML을 파싱하여 화면에 출력합니다.
요약
이것이 웹 서버의 거친 메커니즘입니다.
이것만? 라고 생각할지도 모릅니다만 기본은 이것뿐입니다.
주의해야 할 점은 Ruby, PHP, Perl과 같은 서버 측 프로그램의 코드가 서버 내에서 완결되어 있기 때문에 클라이언트 측에서 볼 수 없다는 것입니다.
클라이언트(브라우저)가 볼 수 있는 데이터는 HTML, CSS, JavaScript에 한합니다.
데이터의 흐름, 데이터를 가지고 있는 사람을 의식함으로써 앱을 만들 때 망설이지 않고 버그도 적게 만들 수 있습니다. 또 다른 사람이 만들고 있는 것(프로그램 이외에서도)을 그것이 어떻게 되어 있는지를 생각하는 버릇을 붙이는 것으로 논리적인 사고나 이해가 쉬워집니다.
Reference
이 문제에 관하여(거친 웹 서버의 작동 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/juvenile-develop/items/28e2579381d468e43e7f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
인터넷에서 웹 페이지를 클라이언트의 요청에 대한 응답을 반환하는 것이 웹 서버의 일입니다.
요청 내용을 만들어 웹 서버로 보내고 응답 내용을 분석하여 사용자에게 표시하는 것이 브라우저의 일입니다.
실제로 요청 내용과 응답 내용을 살펴 보겠습니다.
cURL이라는 툴(및 라이브러리)을 사용하면 통신 내용을 볼 수 있습니다.
curl
$ curl -v -X GET http://example.com
curl이 작성한 HTTP의 요청 데이터가 출력됩니다.
요청
> GET / HTTP/1.1
> Host: example.com
> User-Agent: curl/7.68.0
> Accept: */*
>
그리고 연결과 자기 소개가 잘되면 응답이 돌아옵니다.
Response
< HTTP/1.1 200 OK
< Age: 463948
< Cache-Control: max-age=604800
< Content-Type: text/html; charset=UTF-8
< Date: Sun, 29 Nov 2020 23:58:35 GMT
< Etag: "3147526947+ident"
< Expires: Sun, 06 Dec 2020 23:58:35 GMT
< Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
< Server: ECS (sjc/16DD)
< Vary: Accept-Encoding
< X-Cache: HIT
< Content-Length: 1256
<
이것은 응답 헤더라고 하는 부분입니다.
1행째와 마지막 행 이외는 할애합니다.
첫 번째 줄은 상태가 반환됩니다. EC2를 사용하여 서버에 배포하는 사람은 잘 보았지만 500 오류와 404 오류는 여기에 있습니다.
마지막 줄은 Body의 크기를 포함합니다.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 2em;
background-color: #fdfdff;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
@media (max-width: 700px) {
div {
margin: 0 auto;
width: auto;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
응답 본문(HTML)이 반환됩니다.
브라우저는 이 HTML을 파싱하여 화면에 출력합니다.
요약
이것이 웹 서버의 거친 메커니즘입니다.
이것만? 라고 생각할지도 모릅니다만 기본은 이것뿐입니다.
주의해야 할 점은 Ruby, PHP, Perl과 같은 서버 측 프로그램의 코드가 서버 내에서 완결되어 있기 때문에 클라이언트 측에서 볼 수 없다는 것입니다.
클라이언트(브라우저)가 볼 수 있는 데이터는 HTML, CSS, JavaScript에 한합니다.
데이터의 흐름, 데이터를 가지고 있는 사람을 의식함으로써 앱을 만들 때 망설이지 않고 버그도 적게 만들 수 있습니다. 또 다른 사람이 만들고 있는 것(프로그램 이외에서도)을 그것이 어떻게 되어 있는지를 생각하는 버릇을 붙이는 것으로 논리적인 사고나 이해가 쉬워집니다.
Reference
이 문제에 관하여(거친 웹 서버의 작동 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/juvenile-develop/items/28e2579381d468e43e7f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(거친 웹 서버의 작동 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/juvenile-develop/items/28e2579381d468e43e7f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
