【メモ】Webアプリケーションの基本の整理

Posted at 2025-06-28

書こうと思った理由

AWSでWebアプリを構築しようとした際、
そもそも自分のWebアプリに対する理解が浅いことに気づきました。
絶対に今まで何度も調べたり聞いたりしてる内容を毎回忘れているため、
また調べるであろう自分のために、また、理解促進のために、ここにまとめて記録しておこうと思います。

せっかくなのでAWSのサービス名も交えて整理しておきます。
同じような境遇の方にとっても、少しでも参考になれば幸いです。
もし間違いや補足などがあれば、ぜひコメントで教えていただけると嬉しいです。

何度も聞いてきたこの「サーバー構成」の話ですが、
自分で実際にAWSを触ってみてようやく
Webサーバーは「HTMLやCSSを表示する」という感覚がつかめました。

なお、以下で紹介する役割分担はあくまで一例であり、
アプリの構成や要件によってはこの限りではないような気も何となくしています、が、私の知ってる範囲で書きます。

サーバー種別	役割説明	代表例 (一般)	代表例 (AWS)
Webサーバー（フロントエンド）	HTML/CSS/JavaScriptなどの静的ファイルを配信	Apache, Nginx, Lighttpd	S3 (静的ホスティング)
アプリケーションサーバー	サーバーサイドの処理（会員管理・認証・決済・APIロジックなど）を担当	Tomcat, Node.js, PHP-FPM	EC2, Elastic Beanstalk, Fargate
DBサーバー	ユーザー情報・商品情報などのデータを保存し永続化	MySQL, PostgreSQL, Oracle	RDS (MySQL/Postgres/Aurora), DynamoDB

上の表では「どんな役割のサーバーが必要か」をまとめました。
次に、そのアプリケーションサーバーで動かすプログラムについて
「どんな言語・どんなフレームワークで作るのか」
という視点の一覧を示します。

これまで私は
「Webサーバ・アプリケーションサーバ・DBサーバ」
といういわゆる3層構成だけを意識していました。

しかし実際にAWSを触ってみると、
アプリとして運用するには

そこで、ここでは Webアプリケーションの全体像を
サーバー構成からさらに広げて、処理の流れや必要な要素を知っている範囲で整理します。

クライアントとサーバのやり取り
- ブラウザからのHTTP(S)リクエストでWebアプリにアクセス
  - 静的コンテンツ（HTML/CSS/JS）はWebサーバやCDNから配信
  - APIリクエストはアプリケーションサーバに流れ、データを取得
  - CookieやセッションIDで「誰のアクセスか」を管理

ネットワーク・セキュリティ
- WAF
  - 攻撃（SQLインジェクション・XSSなど）をブロック
  - ブラウザからのリクエストを最初にチェック
- CDN (CloudFrontなど)
  - 世界中にキャッシュを置き、静的ファイルを高速配信
  - リクエストを最適化してWebサーバの負荷を軽減
- VPC (ネットワーク分割)
  - パブリックサブネット（ALB/NAT Gatewayなど外向け）
  - プライベートサブネット（EC2/Fargate/DBなど内向け）
  - ネットワークを論理的に分けてセキュリティを強化
- IAM (権限管理)
  - AWSリソースへのアクセスを最小権限で制御

Webサーバ・アプリケーションサーバ・DBサーバ
- Webサーバ
  - 静的コンテンツ（HTML/CSS/JS）を配信
  - 例：Apache、Nginx、S3
- アプリケーションサーバ
  - 会員管理・決済・API処理など動的なレスポンスを生成
  - 例：EC2、Fargate、Elastic Beanstalk
- DBサーバ
  - ユーザー情報や商品情報を保存し永続化
  - Secrets Managerで接続情報を安全に管理
  - 例：RDS、DynamoDB

URLとルーティング
- URL（パス）に応じて処理を分ける
  - /login → ログイン処理
  - /products/123 → 商品詳細
- Node.jsならExpressのrouter
- Ruby on Railsならroutes.rbなどで実装

状態管理（ステート管理）
- Webは基本的に「ステートレス」
- ログイン状態やカートの中身などの状態を
  - サーバー側のセッション
  - クライアント側のCookieやJWT
- で管理する
- ここを適切に設計しないと
  - 「誰のデータかわからない」などの不具合につながる

ログ・監視
- CloudWatch
  - サーバー・アプリのログ収集
  - メトリクス監視やアラーム
- GuardDuty
  - 脅威検出（マルウェア、不審アクセスの検知）
- 本番環境では必須レベルの仕組み

CI/CD
- コードを修正したら自動でテスト・デプロイ
- ヒューマンエラーを防止
- 例：
  - CodePipeline / CodeBuild
  - GitHub Actions
  - Amplify Console

スケーラビリティ
- Webアプリはトラフィックが増減するため「伸び縮みできる構成」が大切
  - オートスケーリング
  - コンテナ（Fargateなど）
  - キャッシュ（CloudFront、ElastiCache）
    を組み合わせることで柔軟に対応可能

Webアプリケーションとは
単にサーバーが動くだけではなく、

といった様々な要素が合わさったシステムということがわかりました。
これからWebアプリを設計する際、「どの仕組みがどの役割を担っているか」を意識してみようと思います！