SEIRO IWAMOTOFUKUOKA 33.59°N / REMOTEREV 2026.07
SHEET FIG.5 — /work/web-app-from-scratch
CASE STUDY § 01-5

toC Web アプリのゼロから設計

2021 / テックリード / AWS · ECS · API Gateway · CloudFront · WAF · VPC · OpenID Connect
テックリード
ROLE
toC Web アプリ
TARGET
アーキ設計 · SSO · CI/CD
SCOPE

課題

新規の toC Web アプリは、初期のアーキテクチャ設計がその後の拡張性・可用性・セキュリティを決める。土台を後から作り直すのは高くつく。

この案件では、基盤が無い状態から、アプリの実行環境・配信・認証・デプロイ経路までを設計する必要があった。

設計判断

  • AWS 上でアプリ実行を ECS、外部公開を API Gateway、配信を CloudFront、境界防御を WAF とし、役割ごとにレイヤーを分けて構成
  • ネットワークは VPC で分離し、公開範囲を明示的に設計
  • 認証は OpenID Connect による SSO を採用
  • デプロイは CI/CD で経路を標準化
CloudFront + WAFAPI GatewayECSOIDC SSO

ノードにカーソル・フォーカス・タップすると、各要素の設計判断が表示されます。

  1. 配信と境界防御。公開エッジを CloudFront、防御を WAF で担う。
  2. 外部公開の入口。VPC 内のアプリへ接続。
  3. アプリ実行環境。VPC 内に配置。
  4. OpenID Connect による認証。
FIG. 5-A — toC Web アプリのゼロから設計

進め方

  • 実行環境・配信・認証・デプロイをそれぞれ独立したレイヤーとして設計し、テックリードとして全体構成をまとめた