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 <- 没有像我预期的那样工作（心跳只是检查应用程序是否存在的端点）但出于某种原因，没有 return application/JSON 而是在某种框架内带有正确 'real URL' 的 text/HTML 网页：

<!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 是按预期工作的框架：
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 和 set-up反向代理。当我在我的另一个 VPS 上使用 NGINX 时，它的结构有点不同（sites-enabled 和 sites-available 文件夹）。但是在这个 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项目文件夹结构是这样的
...
控制器/
型号/
静态/
- 图片/
-- logo.png
上传/
- 头像/
-- user1.jpg
-- user2.jpg
-- ...

Answer 1

您现有的代码在向上游传递之前不会尝试从 URI 的前面删除 /api。向 location 和 proxy_pass 值添加尾随 /。例如：

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

详情见this document。

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

例如：

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

详情见this document。

ec2 实例上的 Nginx 不提供静态文件

Nginx on ec2 instance does not serve static files

reverse-proxy

nginx

amazon-web-services

node.js

amazon-linux-2

什么在起作用

改变了什么

主要问题

帮助源代码