LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-12-13

目標

今回やること

  • Webサービスの全体像を知る

タスクばらし

  • Web
  • URI
  • HTTP
  • Webアプリケーションの構成要素

以下を解決する

  • なぜURLにアクセスしたら通信がサーバーに届く?
  • なぜサーバーからの通信がブラウザに届く?

Web

学習内容

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

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

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

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

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

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

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

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

URI

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

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

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

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

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

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

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

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

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

HTTP

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

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

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

HTTPメソッド

学習内容
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ステータスコード

学習内容
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アプリケーションの構成要素

学習内容
Webアプリケーション誕生の流れ

  • 最初はWebサーバーだけの構成
    静的なコンテンツを配信するだけ

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

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

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

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

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

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

参考サイト

独学エンジニア

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0