2
3

More than 1 year has passed since last update.

【Web】Webアプリケーションの基本について図を使って説明してみた

Last updated at Posted at 2022-03-13

Webアプリケーションの3層構造

  • ネットワークを介してWebブラウザで動作するアプリケーションをWebアプリケーションと呼ぶ。
  • Webアプリケーションは基本的に3層構造になっている。
    • プレゼンテーション層
      • ユーザーインターフェースとなる。
      • WebブラウザとWebサーバーが役割を担う。
      • クライアントサイド・スクリプトが動作する。
    • アプリケーション層
      • 業務処理を行う。
      • アプリケーションサーバー(APサーバー)が役割を担う。
      • サーバーサイド・スクリプトが動作する。
    • データ層
      • データ処理や保管を行う。
      • データベースサーバー(DBサーバー)が役割を担う。

p107-1.png

  • 負荷分散

p107-2.png

  • 改修範囲の限定

p107-3.png

MVCモデル

  • Model:データと業務処理に関する部分

  • View:結果をユーザーに出力する部分

  • Controller:ユーザーの命令を受けて各部に指示を出す部分

  • メリット

    • 各要素が分離されていることで、仕様変更が別の要素へ影響を及ぼさないため、要素ごとに個別に開発できる。
    • 開発や改修の分業が容易になる利点がある。
      p109-1.png
  • 3層アーキテクチャとMVCモデルの関係

    • 3層アーキテクチャ:Webシステム全体の設計方針
    • MVCモデル:サーバーサイド・スクリプトの石器方針

p109-2.png

フレームワーク

  • 一般的な処理の流れを「ひな形」として準備しておき、Webアプリケーションごとの独自の内容を開発者が埋めることでプログラム開発できるようにしたもの。

p111-1.png

  • 近年は多人数での開発が一般的となっているので、フレームワークは特に重宝されている。

p111-2.png

Webサーバー

  • Webサーバーの仕事は、静的ページのデータや、APサーバーから転送された動的ページのデータをWebクライアントに転送すること。
    p113-1.png

  • 冗長化」:Webサーバーの機器台数を多くし、1台あたりの負担を少なくするとともに、1台が故障しても別のサーバーだけでサービスを続けられるようにする構成。

p113-2.png

Webクライアント

  • Webサーバーとのやりとりを行い、Webシステムを利用するためのプログラム。
  • 基本的な機能は、Webサーバーへリクエストを送り、Webサーバーからのレスポンスを受け取ってそれを解釈すること。
  • 最も利用されているのはWebブラウザ。

p115-1.png

  • 地図、天気、ニュースなど特定の情報に特化した専用クライアントもある。特にスマートフォンでは多数の専用クライアントが公開されている。

p115-2.png

アプリケーションサーバー

  • Webアプリケーションの中核となる業務処理を行うプログラム。
  • 基本的に多機能であり、業務処理が複雑になればなるほど負荷が高くなる。そのため、動作させるサーバ-機器にはサーバーサイド・スクリプトを動作させるためのメモリ容量やCPU性能が重視される。

p117-1.png

  • セッション管理

    • ログインに必要なサイトなどでステートフルな処理を行う場合は、アプリケーションサーバーがセッションIDを発行してセッション管理を行う。
      p117-2.png
  • トランザクション

    • セッション中で行われる一連の作業の最初単位。
    • 予約手続きのように「すべてのやりとりが成功するまで完了しない」処理は、1つのリクエスト・レスポンス単位ではなく、トランザクション単位で管理する。
      p117-3.png

データベース管理システム(DBMS)

  • 蓄積されたデータはデータベース(DB)に格納されましたが、そのデータベースを管理する役割を担うもの。
  • データベースにとって保持するデータの保全は非常に重要。そのためDBサーバーも基本的に冗長化構成をとる。
    • ミラーリング:データの更新命令を受けたDBMSが複数のデータベースに対して同時に同じ更新を行うことでデータベースを冗長化する方法。
      p119-1.png

    • レプリケーション:データの更新命令をDBMSが更新の内容を別のDBMSに連携し、連携を受けたDBMSが同じ内容の更新を自身の管理するデータベースに実施する。
      p119-2.png

    • シェアードディスク:データベースを共用の機器(データストレージ)に持ち、複数のDBサーバー(DBMS)からそれを更新する。
      p119-3.png

キャッシュサーバー

  • 「リクエストに対するレスポンスを覚えておく」役割を実現するプログラム

  • キャッシュ:「リクエストに対するレスポンスの記憶」

  • コンテンツキャッシュ:文書や画像、動画といったコンテンツのキャッシュ
    p121-1.png

  • クエリキャッシュ:DBMSのデータ検索要求(クエリ)の結果のキャッシュ
    p121-2.png

  • CDN(Contents Delivery Network):世界各地に設置されたコンテンツキャッシュサーバーで構成されるネットワーク。CDN全体として1台のキャッシュサーバーのように動作する。

p121-3.png

Ajax

  • 同期処理:クライアントとサーバーが交互に処理を行い、同調して通信を行うこと。
    • HTMLファイルを受け取ってから表示の処理を行うため、全体としてページの更新に時間がかかってしまう。
    • 送信するデータも多くなりがちで、サーバーに負担がかかってしまう。

p123-1.png

  • Ajax:Webブラウザ上でクライアントサイド・スクリプトとして動くJavaScriptが直接Webサーバーと通信を行い、取得したデータを用いて、表示するHTMLを更新する。
  • 非同期通信:Webサーバーからのレスポンスを待つ間もクライアント側であるJavaScriptがレスポンスに左右されない箇所のHTMLを更新したり、ユーザーからの入力を受け付けることができる。レスポンス待ちの時間を有効活用することができ、ページの更新がより速くなる。
    p123-2.png

Webプログラミング

  • プログラミング言語を使ってWebアプリケーションを開発すること

p125-1.png

  • サーバーサイド・プログラミング
    p125-2.png

  • クライアントサイド・プログラミング
    p125-3.png

WebAPI

  • WebAPIは、アプリケーションがWebサーバーの機能を利用するためのインターフェース。

  • ユーザーがWebブラウザから操作しなくてもアプリケーションが直接Webサービスを利用できる。
    p127-1.png

  • 天気予報サービスを例にすると、、、
    p127-2.png

  • XML-RPC:XMLを送信することで処理の実行を要求するプロトコル。受信するデータの形式にもXMLを使う。

  • SOAP:XML-RPCの機能を拡張したもの。

  • REST:設計思想。シンプルな設計で、かつデータの形式をXMLに限定されずJSONのような軽量なデータも利用できることから、SOAPに代わり現在主流となっている。

マッシュアップ

  • プログラムが複数のWebサービスを利用し、それらの処理結果を組み合わせることで別のサービスを提供すること。
    p129-1.png

p129-2.png

  • 注意点
    • マッシュアップにより便利な新サービスを生み出したとしても、もとになっているサービスがWebAPIの公開を終了するとその新サービスを継続できない。
    • WebAPIの仕様が変更となった場合はそれに合わせてサービスを修正の必要がある。
      p129-3.png

CGI

  • Webサーバーがクライアントからの要求に応じてサーバーサイド・スクリプトを起動するための仕組み。
    p131-1.png

p131-2.png

サーバー感の連携

  • CGIを利用せずにサーバーサイド・スクリプトを動作させる場合は、WebサーバーがAPサーバーにデータの処理を依頼し、APサーバーがサーバーサイド・スクリプトを動作させるという流れになる。
    p133-1.png

  • サーバー間の連携時に使用するポート番号とIPアドレス
    p133-2.png

  • 利用するプロトコル

    • APサーバー:HTTPのほかにAJPやWebSocketといったプロトコルが利用されている。
    • DBMS:それぞれ独自のプロトコルが採用されており、各APサーバーがそのすべてに対応することは難しいため、APサーバーとDBMS間で通信を行うためにODBCというAPIが開発されている。

p133-3.png


参考:Web技術の基本

2
3
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
2
3