靜態檔案上的Nginx Next.js404-有解無憂

我有一個/var/www/html/帶有 nginx 服務器的 WordPress 站點（在路徑中），現在我希望通過代理在 nextjs（在路徑中）中有一個特定頁面/var/www/html/，用于埠 3000。我請求，example.com/specific-next-page該頁面確實加載，但所有靜態檔案（ js/css) 未找到 (404)。例如：

GET https://example.com/_next/static/css/1ca183f3cca214b7.css net::ERR_ABORTED 404

這是我在 nginx 日志中看到的。 2022/06/10 14:47:25 [error] 3015605#3015605: *10 open() "/var/www/html/_next/static/BA1dIGPMYI7hn430ayZ2f/_buildManifest.js" failed (2: No such file or directory), client: 172.70.200.XXX, server: example.com, request: "GET /_next/static/BA1dIGPMYI7hn430ayZ2f/_buildManifest.js HTTP/2.0", host: "example.com", referrer: "https://example.com/specific-next-page"

我了解問題是nginx正在尋找/var/www/htmlWordPress檔案夾中的檔案，而nextjs在即/var/www/next，靜態檔案的正確路徑是/var/www/next/.next/static

我真的嘗試了很多選擇，但都失敗了。這是我的 nginx 組態檔。

upstream php-handler-https {
  server 127.0.0.1:9000;
}

server {
  listen 443 ssl http2 ;
  listen [::]:443 ssl ;
  server_name example.com www.example.com; 
  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot

  root /var/www/html/;
  index index.php;

  client_max_body_size 2G;
  fastcgi_buffers 64 4K;

  access_log /var/log/nginx/wordpress_https_access.log combined;
  error_log /var/log/nginx/wordpress_https_error.log;

  server_tokens off;

  location = /favicon.ico {
    log_not_found off;
    access_log off;
  }

  location = /robots.txt {
    allow all;
    log_not_found off;
    access_log off;
  }

  # NEXT PROXY
  location /__nextjs_original-stack-frame {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
  location /content {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
  }
  location /_next {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
  }
 
  # specific-page - next.js
  location /specific-next-page {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
  }
  # END NEXT


  location / {
    try_files $uri $uri/ /index.php?$args ;
  }

  # protected area (XHProf)
  location ^~ /xhprof/xhprof_html/ {
    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/htpasswd/xhprof;

    location ~ \.php(?:$|/) {
      fastcgi_split_path_info ^(. \.php)(/. )$;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
      fastcgi_param PHP_FLAG "session.auto_start=off \n mbstring.encoding_translation=off";
      fastcgi_param PHP_VALUE "assert.active=0 \n mbstring.http_input=pass \n mbstring.http_output=pass";
      fastcgi_pass php-handler-http ;
      fastcgi_read_timeout 60s;
    }
  }

  # protected area (phpmyadmin)
  location ^~ /mysqladmin/ {
    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/htpasswd/phpmyadmin;

    location ~ \.php(?:$|/) {
      fastcgi_split_path_info ^(. \.php)(/. )$;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
      fastcgi_param PHP_FLAG "session.auto_start=off \n mbstring.encoding_translation=off";
      fastcgi_param PHP_VALUE "assert.active=0 \n mbstring.http_input=pass \n mbstring.http_output=pass";
      fastcgi_pass php-handler-http ;
      fastcgi_read_timeout 60s;
    }
  }

  location ^~ /wp-admin/install.php {
    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/htpasswd/wpadmin;

    location ~* \.(htaccess|htpasswd) {
      deny all;
    }

    location ~ \.php(?:$|/) {
      fastcgi_split_path_info ^(. \.php)(/. )$;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
      fastcgi_param HTTPS on;
      fastcgi_param PHP_VALUE "auto_prepend_file=/var/www/html/xhprof/external/header.php";
      fastcgi_pass php-handler-https;
      fastcgi_read_timeout 60s;
    }
  }

  location ~* \.(htaccess|htpasswd) {
    deny all;
  }

  location ~* \.(?:ini|conf|txt)$ {
    deny all;
  }

  location ~ \.php(?:$|/) {
    fastcgi_split_path_info ^(. \.php)(/. )$;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
    fastcgi_param HTTPS on;
    fastcgi_param PHP_VALUE "auto_prepend_file=/var/www/html/xhprof/external/header.php";
    fastcgi_pass php-handler-https;
    fastcgi_read_timeout 60s;
  }

  # set long EXPIRES header on static assets
  location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
    expires 30d;
    access_log off;
  }
}

uj5u.com熱心網友回復：

你了解 nginx 是如何選擇一個位置來處理請求的嗎？您是否根據使用的修飾符了解位置優先級？您是否閱讀過location指令檔案？您已經^~在配置中使用了 location 修飾符。您了解它的含義以及它是如何作業的嗎？

由于您的正則運算式location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ { ... }，沒有修飾符的任何前綴位置都不會處理對這些檔案型別的任何請求^~（好吧，至少在最長的前綴內會有另一個正則運算式位置之前）。您的配置的最小修復將至少使用^~修飾符作為/_next前綴位置：

location ^~ /_next {
    ...
}

但是，通過 nginx 本身提供靜態檔案而不代理對應用程式的請求會更有效。為此，您可以使用以下位置：

location ^~ /_next/static/ {
    alias /var/www/next/.next/static/;
    try_files $uri =404;
}

通常，使用可以避免的任何其他正則運算式位置都會降低性能，因為它（很可能，如果請求不會被另一個具有^~修飾符或正則運算式位置的前綴位置捕獲）將消除昂貴的 PCRE 庫呼叫來執行匹配正則運算式模式。這兩個位置：

location ~* \.(htaccess|htpasswd) {
    deny all;
}
location ~* \.(?:ini|conf|txt)$ {
    deny all;
}

可以很容易地組合成一個：

location ~* \.(?:htaccess|htpasswd|ini|conf|txt)$ {
    deny all;
}

如果禁用資產請求日志記錄對您來說不是必需的，那么這個：

location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
    expires 30d;
    access_log off;
}

可以替換為更大但更有效的配置，以根據Content-TypeHTTP 回應標頭添加快取策略（根據 nginx 1.21 使用的默認 MIME 型別）：

map $sent_http_content_type $expires {
    image/jpeg                     30d;
    image/gif                      30d;
    image/x-ms-bmp                 30d
    image/x-icon                   30d;
    image/png                      30d;
    text/css                       30d;
    application/javascript         30d;
    application/x-shockwave-flash  30d;
    default                        off;
}

server {
    ...
    location / {
        try_files $uri $uri/ /index.php?$args;
        expires $expires;
    }
    ...
}

此外，如果需要，您可以通過這種方式輕松地將相同的快取策略添加到您的應用程式（不再Next.js需要使用修飾符）：^~

location /_next/static/ {
    alias /var/www/next/.next/static/;
    try_files $uri =404;
    expires $expires;
}

我在這里更全面地描述了這種方法。

關于配置中的以下幾行：

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

這些用于 WebSocket 協議代理，如果未使用 WebSocket，則在某些情況下可能會破壞您的應用程式。我真的懷疑每個Next.js相關位置都需要這些線路。在此處閱讀更多技術細節。

uj5u.com熱心網友回復：

如果/var/www/html是您的 Web 服務器的根目錄，則不會為客戶端提供來自/var/www/next. 該.next檔案夾必須位于由 nginx 提供服務的位置，并且對客戶端公開可用。

我建議放在.next下面/var/www/html

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490069.html

標籤：nginx 下一个.js

上一篇：django視圖中的更改直到重新啟動uwsgi才會反映到頁面

下一篇：深入了解nginx父鏡像的Dockerfile