女性向けエンジニアスクール
3秒でわかる
あらかじめ用意した HTML や画像をそのまま配信する方式。サーバー側でプログラムを動かさないため、安く速く、障害の起きにくい配信ができます。
もう少し詳しく
どういうものか
静的ホスティングは、リクエストのたびに処理を実行せず、置いてあるファイルをそのまま返す配信方式である。HTML、CSS、JavaScript、画像といったビルド済みの成果物を、ストレージや専用のサービスに置いておく。
Amazon S3 の静的ウェブサイトホスティング、Cloudflare Pages、GitHub Pages、Netlify などが該当する。多くは CDN と組み合わせ、世界中のエッジにファイルを複製して、利用者に近い拠点から返す。
なぜ必要か
配信するファイルが変わらないなら、リクエストごとにアプリケーションサーバーを動かす理由が無い。動かさない分だけ速く、安く、壊れにくい。
負荷の集中にも強い。アクセスが 100 倍になっても、返すのは同じファイルなので、CDN が並列に返すだけで済む。データベースへの接続が枯渇するといった障害の原因そのものが存在しない。
攻撃面でも、実行されるコードがサーバー側に無いため、SQL インジェクションやコマンド実行の入口が生まれない。
具体例
S3 のバケットへ成果物を同期し、CloudFront のキャッシュを無効化する流れは下記のようになる。
# ビルド成果物を作る
npm run build
# バケットへ同期する (消えたファイルは削除)
aws s3 sync ./dist s3://example-site --delete
# ハッシュ付きの資産は長期キャッシュ、HTML は都度確認にする
aws s3 cp ./dist/assets s3://example-site/assets --recursive \
--cache-control "public,max-age=31536000,immutable"
aws s3 cp ./dist/index.html s3://example-site/index.html \
--cache-control "no-cache"
# CDN のキャッシュを消して新しい HTML を配る
aws cloudfront create-invalidation --distribution-id E123ABC --paths "/*"つまずきやすいところ
React や Vue の SPA を置くと、/about を直接開いたときに 404 になる。ルーティングはブラウザ側の JavaScript が担っており、サーバーには /about というファイルが無いためである。存在しないパスを index.html に返す設定 (404 のフォールバック、あるいは書き換えルール) が要る。
デプロイしたのに古い画面が出るのも定番で、原因は CDN のキャッシュにある。ファイル名にハッシュが入る資産は長期キャッシュで良いが、index.html だけは毎回確認させる設定にしておく。
秘密情報の扱いも注意する。静的サイトのビルドに埋め込んだ値はすべて閲覧者から読める。API キーをフロントに埋めてはいけない。
似た用語との違い
動的ホスティングは、リクエストのたびにサーバー側でプログラムを実行し、その場で HTML や JSON を組み立てる方式を指す。ログイン状態で内容が変わるページや、検索結果はこちらになる。
近年は両者を混ぜる形が主流で、静的に配信したページからブラウザが API を呼ぶ構成 (JAMstack) や、静的生成と動的レンダリングをページ単位で選べる Next.js のような枠組みが使われる。
