Webサービスの全体像 (独学エンジニア レッスン8より)

# 目標
<strong>今回やること</strong>
* Webサービスの全体像を知る

<strong>タスクばらし<strong/>
* Web
* URI
* HTTP
* Webアプリケーションの構成要素

以下を解決する
* なぜURLにアクセスしたら通信がサーバーに届く？
* なぜサーバーからの通信がブラウザに届く？

# Web

<strong>学習内容</strong>
* Webとはインターネットを利用して「文書や画像などを公開・閲覧できる仕組み」のこと。幅広く使われている。

* インターネットとは世界中のコンピュータを相互接続したネットワーク網

* Webの根幹を支えているのはHTTP、URI、HTML

* Webの構造はサーバー/クライアントモデル
Webはクライアント(お客様)がリクエストを送り、サーバー(仕える人)がレスポンスを返す構造になってる

①どのデータ？ → URI
②データは何？ → HTML
③どうやってデータのやり取りする？ → HTTP

* Webは情報システムとして見るとハイパーメディアと分散システム

①ハイパーメディア(HTML)
文書、画像、映像などのメディアをハイパーリンクで結びつけたシステム
従来：高機能で使うのが難しい
Web：シンプルで誰でも扱える

②分散システム(HTTPとURI)
複数のコンピュータで処理を分担してこなすシステム
従来：閉じたシステム向け
Web：不特定多数向け

# URI

<strong>学習内容</strong>
URI(Uniform Resource Identifier)はインターネット上のデータを一意に特定するための仕組み
どのコンピュータの、どのディレクトリの、どのファイルかが一意に特定できる

* URIはスキーム、ホスト名、パス名から構成されている

* スキーム
データを取得するための方法

* ホスト名
データが存在するコンピュータの名前

* パス名
ホスト名で指定されたコンピュータ上でデータの位置

URIにはスキーム、ホスト名、パス名に加え、ポート番号やクエリパタータ、URIフラグメントを付けることができる

* ポート番号
どのアプリケーション宛かを指定

* クエリパラメータ
?のあとに名前=値が続く。パラメータを渡す

* URIフラグメント
URIのリソースの、さらに具体的な部分を指定する(目次など)

# HTTP
<strong>学習内容</strong>
HTTP(Hyper Text Transfer Protocol)はWeb上でクライアントとサーバーが通信する時のプロトコル
やり取りのインターフェースを統一することで、分散システムが成立している

## HTTPリクエストとHTTPレスポンスの流れ

クライアント
①リクエストメッセージを作成
②リクエストメッセージを送信
サーバー
③リクエストメッセージを受信
④リクエストメッセージを解析
⑤アプリケーションへ処理を渡す
⑥アプリケーションから結果をもらう
⑦レスポンスメッセージを作成
⑧レスポンスメッセージを送信
クライアント
⑨レスポンスメッセージを受信
⑩レスポンスメッセージを解析

## HTTPメソッド
<strong>学習内容</strong>
HTTPメソッドとは、リソースに対して実行したアクションの種類
リソースとはURI(Web上における名前)を持っている情報のこと

※HTTPメソッドの数を制限し、インターフェースがシンプルに保たれたからこそWebは広まった

* GET
GETは指定したリソースの情報を取得する

リクエスト
```
GET /index.html
Host: example.jp
```
レスポンス
```
HTTP/1.1 200
<html>
...
<html>
```

* POST
POSTはリソースを作成する

リクエスト
```
POST /book_logs HTTP/1.1
HOST: example.jp
Content-Type: application/x-www-form-urlencoded
titile=slumdunk&score=5
```
レスポンス
```
HTTP/1.1 201
{
  "title": "slumdunk".
  "score: "5"
}
```

* PATCH
PATCHはリソースの部分修正(PUTは画像などデータをまるごと置き換える)

リクエスト
```
PATCH /book_logs?2 HTTP/1.1
HOST: exapmle.jp
{
  "title": "slumdunk",
  "score": "4"
}
```

レスポンス
```
HTTP/1.1 204
```

* DELETE
DELETEはリソースの削除

リクエスト
```
DELETE /book_logs/2 HTTP/1.1
```
レスポンス 
```
HTTP/1.1 204
```

## HTTPステータスコード
<strong>学習内容</strong>
HTTPリクエストが正常に完了したかを示すレスポンスの3桁の数字

* ステータスコードは先頭の数字によって5つに分類できる

ステータスコード
```
1☓☓ 情報
2☓☓ 成功
3☓☓ リダイレクト
4☓☓ クライアントエラー
5☓☓ サーバーエラー
```
* 2☓☓系
リクエストが成功したことを表す

```
200 OK 「OK！」
201 Created 「作ったよ！」
204 No Content 「特に返すものないよ〜」
```

* 3☓☓系

```
301 Moved Permanently 「URIが変わったよ」
```

* 4☓☓系
クライアントエラーを表す

```
400 Bad Request 「You、リクエスト間違ってるよ？」
401 Unauthorized 「You、誰？」
403 Forbidden 「You、君はダメだよ？」
404 Not Found 「You、それないよ？」
```

* 5☓☓系
サーバーエラーを表す

```
500 Internal Server Error 「Me、具合が悪い」
503 Service Unavailable 「Me、忙しすぎて目が回った」
```

# Webアプリケーションの構成要素
<strong>学習内容</strong> 
Webアプリケーション誕生の流れ
* 最初はWebサーバーだけの構成
静的なコンテンツを配信するだけ

* Webアプリケーションの追加により動的コンテンツを配信できるようになった
表示内容を動的に変えられるようになった

* データベースの追加により大量のデータを扱えるようになった
大量のデータを効率的に検索、安全に保管できるようになった

* データベースサーバを分離することでデータ数やユーザー数の増加に対応できるようになった
負荷が分担されるし、データも一箇所で統一的に管理できるよ

* アプリケーションサーバを分離することで、大量のリクエストもさばきやすくなる
Webサーバ、アプリケーションサーバ、データベースサーバに分かれた構成を「三層構成」という
Webサーバが静的リクエスト、アプリケーションサーバが動的リクエストをさばくことで効率よく動作する

※大量のリクエストには、動的リクエスト、静的リクエストともに含まれる。動的リクエストの方が処理が重く、レスポンスの数が少ない。静的リクエストは処理が軽いが、レスポンスの数が多い。

* Webサーバとデータベースサーバは絶対に分ける。一方でユーザー数が少ない時などはWebサーバとアプリケーションサーバを分ける必要はない場合が多い

# 参考サイト

[独学エンジニア](https://dokugaku-engineer.com/course/serverside "独学エンジニア")