Nginx 静的ファイル配信設定

Nginxで高パフォーマンスな静的ファイル配信を実現するための設定方法を解説。MIMEタイプ、try_filesフォールバック、sendfileカーネル最適化、SPAルーティングに対応。

Performance

詳細な説明

Nginxは非同期のイベント駆動アーキテクチャにより、静的ファイルの配信が非常に高速で、最小限のメモリオーバーヘッドで数千の同時ファイル転送を処理します。

基本的な静的ファイル設定

root または alias ディレクティブで静的ファイルのディスク上の場所を定義します:

server {
    listen 80;
    server_name static.example.com;
    root /var/www/html;

    location / {
        try_files $uri $uri/ =404;
    }
}

root vs alias

root ディレクティブはlocationパスの全体を指定ディレクトリに追加します。alias ディレクティブはマッチしたlocationパスを完全に置換します。この違いは設定バグの一般的な原因です:

# rootの場合、/images/logo.png は /var/www/html/images/logo.png を配信
location /images/ {
    root /var/www/html;
}

# aliasの場合、/images/logo.png は /var/www/assets/logo.png を配信
location /images/ {
    alias /var/www/assets/;
}

パフォーマンス最適化

sendfile を有効にすると、カーネルがディスクからネットワークソケットへ直接ファイルを転送し、ユーザー空間メモリバッファを完全にバイパスします。tcp_nopush と組み合わせることで、送信されるネットワークパケットの総数を最小化します。

sendfile on;
tcp_nopush on;
tcp_nodelay on;

MIMEタイプ

Nginxは mime.types ファイルを参照して各ファイル拡張子に正しい Content-Type ヘッダーを設定します。ブラウザがファイルタイプを誤認識するのを防ぐため、このファイルが設定に含まれていることを確認してください:

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
}

ディレクトリリスティング

ファイルダウンロードサーバーや内部アセットリポジトリ用に autoindex ディレクティブでディレクトリブラウジングを有効にします:

location /downloads/ {
    autoindex on;
    autoindex_exact_size off;
    autoindex_localtime on;
}

シングルページアプリケーション用try_files

React、Vue、Angularで構築されたSPAでは、try_files を使用してすべてのルートを index.html にフォールバックさせ、JavaScriptルーターがクライアントサイドルーティングを処理できるようにします:

location / {
    try_files $uri $uri/ /index.html;
}

リクエストされたファイルがディスク上に存在すればそれを配信し、存在しなければ index.html を返してフロントエンドフレームワークがURLに基づいて適切なビューをレンダリングします。

ユースケース

シングルページアプリケーションやファイルダウンロードサーバーをホストし、HTML、CSS、JavaScript、画像などの静的アセットをNginxで効率的に配信します。

Try It — Nginx Config Generator

フルツールを開く