靜態內容Node.js應用反向代理的NgInx禁止錯誤

Question

我正在通過HTTPS為我的expressjs網站使用NgInx反向代理。 使用https可以正常訪問網站，並且請求正在Nodejs服務器上，但是靜態內容存在問題。

所有靜態內容（JS，CSS，圖像，字體等）都拋出403禁止錯誤 。

以下是我的ngInx配置文件的內容：

server {
    listen  80;
    listen 443 ssl;
    ssl on;
    ssl_certificate /home/ec2-user/certs/myapp.bundle.crt; 
    ssl_certificate_key /home/ec2-user/certs/myapp.key;

    root /home/ec2-user/myapp;

    server_name example.com;
    access_log /var/log/nginx/nginx.vhost.access.log;
    error_log /var/log/nginx/nginx.vhost.error.log;

    location / {
       #try_files $uri $uri/ /index.php?$args ;
       #try_files $uri $uri/ =404;
        proxy_pass https://example.com:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

我正在使用Amazon EC2和CentOS。 請幫忙。 提前致謝。

Answer 1

location / {
        proxy_pass https://example.com:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

您正在將所有流量重定向到nodejs。 那就意味着expressjs將提供靜態內容。

要提供靜態文件，請使用Express中內置的express.static中間件功能。

將包含靜態資產的目錄的名稱傳遞給express.static中間件函數，以開始直接提供文件。 例如，使用以下代碼在名為public的目錄中提供靜態文件：

app.use(express.static('public'))

此處提供更多信息： https : //expressjs.com/en/starter/static-files.html

Answer 2

您正在嘗試從NodeJS應用程序中處理靜態文件，這是不正確的方法，因為您正在使用Nginx。 將以下種類的塊添加到您的配置中

location ~ \.(css|gif|png|jpe?g|ico|js|swf|ttf|woff) {
    expires 30d;
    root /home/ec2-user/myapp;
    try_files $uri =404;
}

您可能需要根據資產的使用方式調整根文件夾。 但是，如果您使用的方法與/home/ec2-user/myapp則可以跳過添加此行的操作