Webアプリのシステム設計するところを大雑把に層(レイヤー)に分けて考えてみてる。
ちょっと前の考え方かもしれません．．．

Webシステム3層構造

まずは大きくシステムを３つの層に分割する。昔から使われてるやつですね．．．
Web(プレゼンテーション層), AP(アプリケーション層), DB(データベース層) に分けて考えることで疎結合にできるかなと。
AP（アプリケーション層）は Web, DB のどちらにも依存しないのが一番、重要になると感じてます。
各々が依存するのがインターフェースだけにして自分以外の層に変更があっても影響が出ないようにできる。

各層の役割、概要

役割	層	概要
Web	プレゼンテーション層	要求を受けたり結果を表示 ⇒ 表現
AP	アプリケーション層(ビジネス層)	要求に対して処理 ⇒ 動作
DB	データベース	データを管理 ⇒ 情報

サーバごとのソフト・ハードの各層

Web, AP, DB, (その他も．．．) の各サーバ事にアプリケーション・ミドルウェア、OS、ハードウェア、ネットワークなどで層を分割する
ここら辺はインフラが弱いのでTCP/IPとかOSI参照モデルからするともっと分けろよ！！と怒られそうな気がする．．．

各層のプロダクト(種類・製品)と開発でやること

層	プロダクト(種類・製品)	フェーズ	開発でやること
アプリケーション	各種アプリケーション	開発、設計	業務に合わせて作成
ミドルウェア	Webサーバ(Apatch), APサーバ(Tomcat), DBサーバ(MySQL)	設計	選択(種類, バージョン), 設定(機能, 制御, 性能)
OS	Windows, Linux, Unix, Mac	設計	選択(種類, バージョン), 設定(機能, 制御, 性能)
ハードウェア	物理(PC, スマホ, サーバ機器)	設計	選択(種類, 容量, サイズ, 性能)
ネットワーク	ネットワーク, プロトコル(TCP, IP, SMTP, HTTP)	設計	選択(種類, 容量, サイズ, 性能), 設定(接続制御)

各層のクラウドサービス