静的サイトホスティング

このパターンは？

HTML/CSS/JS（や SPA、静的サイトジェネレータの出力）を、サーバーレスで世界配信する Azure の最小・最安構成です。AWS の S3 + CloudFront に相当する組み合わせを、Azure では Blob Storage（静的 Web サイト）+ Front Door で実現します。

Storage の静的 Web サイトエンドポイントは $web 内のファイルを匿名読み取りで返します。ただし Front Door Premium から web サブリソースへ Private Link 接続し、Storage のパブリックネットワークアクセスを拒否すれば、利用者からの直接接続を閉じて Front Door 経由だけにできます。

横にスクロール

構成

[ユーザー]
   │ HTTPS
   ▼
Azure DNS (エイリアスレコード) ──► Front Door (CDN/POP, WAF, マネージド証明書)
                                      │  Premium: Private Link (web)
                                      ▼
                          Blob Storage (静的 Web サイト: $web コンテナー)
                                      │  既定エンドポイント:
                                      │  https://<account>.z??.web.core.windows.net

CI/CD: GitHub Actions ─(build)→ out/ ─(azcopy sync)→ $web ─(purge)→ Front Door

各コンポーネントの役割

• Blob Storage: ビルド成果物を保存。「静的 Web サイト」機能を有効化すると、$web という専用コンテナとプライマリ静的 Web サイトエンドポイント（web.core.windows.net）が生える。index.html（インデックスドキュメント）と 404.html（エラードキュメント）を指定できる
• Front Door: Microsoft のグローバルエッジ（POP）からのキャッシュ配信＋HTTPS（SSL オフロード）＋WAF。オリジンを $web エンドポイントに向ける
• Azure DNS: 独自ドメイン。apex（example.com）は CNAME を置けないためエイリアスレコード（A/AAAA） で Front Door へ。www などのサブドメインは CNAME で azurefd.net を指してもよい
• Key Vault: 独自証明書を持ち込む（BYOC）場合の格納先。Front Door マネージド証明書なら不要（自動発行・自動更新・無料）

オリジン保護（S3 の OAC に相当）

AWS では CloudFront の OAC で S3 を非公開のまま読ませます。Azure では Front Door Premium の Private Linkを使い、Storage 静的 Web サイトの web / web_secondary サブリソースへ非公開接続できます。

設計の勘所

• デプロイは build → $web へ azcopy sync → Front Door を purge
• キャッシュはファイル名にハッシュを付け（app.abcd123.js）、index.html は短い TTL（または毎回 purge）に
• TTL はオリジンの Cache-Control ヘッダ、または Front Door のルールエンジン「キャッシュ有効期間の上書き」で制御
• SPA / ディレクトリ URL（/azure/）の扱いは、静的 Web サイトの インデックスドキュメントでルート補完しつつ、未知パスを index.html に寄せたい場合は Front Door ルールエンジンのリライト/404 上書きで調整
• 証明書は Front Door マネージド証明書（自動更新）を第一候補に。組織方針で持ち込みが必要なときだけ Key Vault の BYOC

Well-Architected の観点

• コスト最適化: サーバー常駐なし。Blob は Hot アクセス層の保存＋転送、Front Door は基本料金＋送信データ転送＋リクエスト。要件が静的配信主体で WAF 不要なら Front Door Standard で十分
• パフォーマンス効率: エッジ（POP）キャッシュ＋ Microsoft バックボーンで高速。gzip / brotli 圧縮と HTTP/2 を活用
• セキュリティ: Front Door Premium から web サブリソースへ Private Link 接続し、Storage のパブリックネットワークアクセスを拒否。HTTPS 強制（TLS 1.2 以上）、WAF、必要に応じて Key Vault で証明書を管理
• 運用上の優秀性: GitHub Actions で build → sync → purge を自動化。Azure Monitor でキャッシュヒット率・4xx/5xx・オリジンレイテンシを可観測に

よくある落とし穴

監視・アクセス分析は Azure Monitor のメトリクスと、Front Door のアクセスログ / WAF ログを Log Analytics に送って行います。