时间戳

首页 > 解决方案 > ec2 实例上的 Nginx 不提供静态文件

node.js - ec2 实例上的 Nginx 不提供静态文件

问题描述

什么工作

我在 AWS EC2 实例上启动并运行了 MERN 堆栈仪表板。

改变了什么

当我在 GoDaddy 设置域以
从somebusiness.com转发（带屏蔽）到ec2.....aws.com时，问题就开始了。

首先，我设置NGINX反向代理来服务/作为我的反应应用程序（前端）和/api作为我的节点应用程序（后端）
（稍后你会在下面找到 nginx 代码）

http://somebusiness.com/ <- 打开 React 应用程序并正常工作
http://somebusiness.com/api/heartbeat <- 没有按我的预期工作（心跳只是检查应用程序是否存在的端点）但是出于某种原因，它不返回应用程序/JSON，而是在某种框架内返回具有正确“真实 URL”的文本/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 是按预期工作的 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项目文件夹结构是这样的
...
controllers/
models/
static/ -pictures
/
--logo.png
uploads/ -avatars
/
--user1.jpg
--user2.jpg
--...

标签： node.jsamazon-web-servicesnginxreverse-proxyamazon-linux-2

解决方案

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

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

有关详细信息，请参阅此文档。

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

例如：

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

有关详细信息，请参阅此文档。

推荐阅读