ec2 實例上的 Nginx 不提供靜態文件

Question

什么工作

我在 AWS EC2 實例上啟動並運行了 MERN 堆棧儀表板。

Ec2 實例位於ec2...aws.com
React 應用程序在端口5004 上提供服務。
節點應用程序在端口5003上運行。

改變了什么

當我在 GoDaddy 設置域以進行轉發（帶屏蔽）時，問題就開始了
從somebusiness.com到ec2.....aws.com 。

首先，我將NGINX反向代理設置為/作為我的反應應用程序（前端）和/api作為我的節點應用程序（后端）
（稍后您將在下面找到 nginx 代碼）

http://somebusiness.com/ <- 打開 React 應用程序並正常工作
http://somebusiness.com/api/heartbeat <- 沒有按我的預期工作（心跳只是檢查應用程序是否活動的端點）但出於某種原因，不返回應用程序/JSON，而是一個文本/HTML 網頁某種框架內的正確“真實 URL”：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <title>Somebusiness Dashboard</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
</head>
<frameset rows="100%,*" border="0">
  <frame src="http://ec2-...aws.com/api/heartbeat" frameborder="0" />
</frameset>

</html>

框架中的實際 URL 是按預期工作的 URL：
http://ec2-...aws.com/api/heartbeat <-工作正常

我認為GoDaddy與此有關，因為在 GoDaddy 上我可以為此轉發指定標題、描述和關鍵字。 所以作為后端，我不得不使用http://ec2-...aws.com/api/作為我的后端 URL，這現在還可以（這是我目前的第二個問題，因為它只是方便使用后端的域名也是如此）

主要問題

如果我向
http://ec2.....aws.com:5003/uploads/avatars/user1.jpg
圖像加載正常。

所以如果我向
http://ec2.....aws.com/api/uploads/avatars/user1.jpg
圖像未加載。

所以回顧一下： http://ec2-...aws.com/api/對路由和請求工作正常，但不適用於提供靜態文件。 這讓我相信我的 nginx 設置是錯誤的，我已經花了無數個小時嘗試各種不同的設置。 在這里，我介紹我離開的地方：

幫助的源代碼和代碼

由於我使用的是Amazon Linux 2，因此我使用它的工具來安裝nginx1並設置反向代理。 當我在其他 VPS 上使用 NGINX 時，它的結構有點不同（啟用站點和可用站點的文件夾）。 但是在這個 nginx 上只有nginx.conf文件是我在其中進行設置的。 （我想這沒什么區別，只是想注意一下）

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  eyeratereviews.com;
        root         /home/ec2-user/somebusiness-web-backend;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        include /etc/nginx/mime.types;

        location / {
            proxy_pass http://127.0.0.1:5004;
            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;
        }

        location /api {
            root /home/ec2-user/somebusiness-web-backend/uploads/avatars;
            default_type application/json;
            proxy_pass http://127.0.0.1:5003;
            # Following is necessary for Websocket support
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

我的node.js項目文件夾結構是這樣的
...
控制器/
楷模/
靜止的/
- 圖片/
-- 標志.png
上傳/
- 頭像/
-- 用戶1.jpg
-- user2.jpg
——……

Answer 1

您現有的代碼在向上游傳遞之前不會嘗試從 URI 的前面刪除/api 。 向location和proxy_pass值添加尾隨/ 。 例如：

location /api/ {
    proxy_pass http://127.0.0.1:5003/;
    ...
}

有關詳細信息，請參閱此文檔。

或者，使用rewrite...break來修改 URI。

例如：

location /api {
    rewrite ^/api(.*)$ $1 break;
    proxy_pass http://127.0.0.1:5003;
    ...
}

有關詳細信息，請參閱此文檔。

ec2 實例上的 Nginx 不提供靜態文件

問題描述

什么工作

改變了什么

主要問題

幫助的源代碼和代碼

1 個解決方案

解決方案1
2 已采納 2019-12-12 20:28:15

ec2 實例上的 Nginx 不提供靜態文件

問題描述

什么工作

改變了什么

主要問題

幫助的源代碼和代碼

1 個解決方案

解決方案1 2 已采納 2019-12-12 20:28:15

解決方案1
2 已采納 2019-12-12 20:28:15