nginxで404 Not Foundが出る原因と対処法

Posted at 2026-06-08

やりたかったこと

VPSにnginxを入れてNext.jsのビルド済み静的ファイルを配信しようとしたら、どのURLを叩いても404 Not Foundしか返ってこなかった。設定ファイルはドキュメントのコピペなのに全然動かなくて、原因を探すのに2時間かかった。

環境

Ubuntu 22.04
nginx 1.18.0
Next.js 14.x（静的エクスポート、out/ ディレクトリに出力）

nginxの404が出る主な原因

原因1: rootパスが存在しないか空

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

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

root に指定したディレクトリが実際にあるか確認する。

ls -la /var/www/html/out

ディレクトリが存在しない・空だと問答無用で404になる。Next.jsなら npm run build のあとに npm run export（またはOutputの設定）を実行してから配置する必要があった。

原因2: SPAなのにtry_filesが=404で終わっている

# SPAで全ページ404になるパターン
location / {
    try_files $uri $uri/ =404;
}

# 正しい設定
location / {
    try_files $uri $uri/ /index.html;
}

=404 を最後に書くと、ファイルが直接存在しないURLはすべて404になる。React/Next.js/Vue.jsのSPAはパスがファイルに対応していないので、/index.html にフォールバックさせる必要がある。

原因3: ファイルのパーミッションが足りない

# nginxはwww-dataユーザーで動いている
ls -la /var/www/html/out/

# 755または644以上が必要
chmod -R 755 /var/www/html/out
chown -R www-data:www-data /var/www/html/out

ownerがrootのままだとnginxが読めずに403や404が返ることがある。

原因4: rootとaliasの挙動の違い

# rootはlocationのパスを含めたパスでファイルを探す
location /static/ {
    root /var/www/files;
    # /static/foo.js → /var/www/files/static/foo.js を探す
}

# aliasはlocationのパスを除いたパスで探す
location /static/ {
    alias /var/www/files/;
    # /static/foo.js → /var/www/files/foo.js を探す
}

root を使うと /static/ ディレクトリがファイルパスに含まれてしまう。意図によってどちらを使うか決める必要がある。

試したこと・うまくいかなかったこと

nginx -tをやらずに再起動を繰り返した

設定を直すたびに systemctl restart nginx していたが、何も変わらなかった。
しばらくして気づいたが、設定に構文エラーがあってnginxが古い設定のまま動き続けていた。

# 構文チェックを先にやる
nginx -t

# エラーがなければリロード
systemctl reload nginx

nginx -t が FAILED のままでは reload しても restart しても設定は更新されない。

エラーログを見ていなかった

404の原因を設定ファイルだけ見て探していたが、エラーログを見たら一発でわかった。

tail -f /var/log/nginx/error.log

2026/06/07 10:23:14 [error] 1234#1234: *1 "/var/www/html/out/about/index.html" is not found

ログを最初から見ていれば30分は無駄にしなかった。

解決策

nginx -t で構文エラーを確認し、rootのパスとファイルのパーミッションを修正したら直った。

# 確認の手順
nginx -t
ls -la /var/www/html/out/index.html
chown -R www-data:www-data /var/www/html/out
chmod -R 755 /var/www/html/out
systemctl reload nginx

# ログで確認
tail -f /var/log/nginx/error.log

エラーログに is not found が出ていたら rootのパスかパーミッションが原因。Permission denied が出ていたら chmod/chown が必要。

ハマったポイント

nginx -t を最初にやらなかったせいで、設定が反映されていないまま何度も確認ループした
root と alias の動作が違うことを知らなくて、同じパスを書いているのに404になるケースに遭遇した
SPAで try_files $uri $uri/ =404 を使っていたせいで直リンクが全部404になった。/index.html へのフォールバックが必要だった
chown でオーナーを変えたのに chmod を忘れていて、パーミッション不足で404が続いた
エラーログを後から見たら原因が一行で書いてあった。最初にログを見る習慣を付けるべきだった

この記事は errsolved.com にも掲載しています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up