如何在 AWS EC2 上使用 node.js 后端在 Nginx 上运行 React App？

Question

我正在尝试在 Nginx 服务器上运行带有 Node.js 后端的反应应用程序。

这是 nginx.conf 文件中的服务器块：

include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/folder-name/frontend/build;
        index index.html index.htm;

        location / {
                proxy_pass http://localhost:5000;
        }
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;



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

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

build文件夹包含已编译的 react js 代码（使用npm run build ） Node.js 后端使用 pm2/forever 在端口 5000 上运行。

重启 Nginx 服务器后，react UI 出现在服务器 IP 上，但 UI 失真。 此外，我无法访问MyIP/api/endpoint上的后端 API。

我究竟做错了什么。？ 这个 nginx 配置是从 SO 和其他在线资源构建的，因此它很有可能是错误的。 请帮忙！

提前致谢！

Answer 1

我有经验。请检查我的图像文件

此配置在 aws 上成功运行。 你的错误是代理区域。 请这样改变。

location /api/ {
   proxy_pass http://127.0.0.1:5000/api/
}

如果你愿意，我可以帮助你。

Answer 2

我究竟做错了什么。？

一个问题是您的proxy_pass指令。 您缺少斜杠/

...
location / {
                proxy_pass http://localhost:5000/;
        }
...

首先，试试这个并分享你的结果。

Answer 3

是的，您可以在同一域或主机上同时托管 api 和 static 文件（前端的构建文件）。 您可以在下面找到示例 api 托管在 3000 和 static html 文件在端口 80 上提供的根位置的服务器块。

server {
    listen 80;
    server_name localhost;
    location / {    
        root /var/www/html;
        index index.html;
        error_page 404 index.html;
    }
    location /api/ {    
        proxy_pass http://localhost:3000/;
    }
}

您可以在 http://localhost/<blah...> 访问前端，而在 http://localhost/api/<blah...> 访问 api。 （请注意 /api 在此处的 url 和上面的服务器块中是如何处理的。）将 localhost 替换为您的域名。

Answer 4

问题是您正在为根 ( / ) 设置 API 代理。 正确的应该是这样的：

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/folder-name/frontend/build;
        index index.html index.htm;

        location /api {
            proxy_pass http://localhost:5000;
        }

        location / {
            try_files $uri $uri/ =404;
        }
    }

如果您的 Node.js 中没有/api路径，您将需要这样的重写规则：

        location /api {
            rewrite ^/api/?(.*) /$1 break;
            proxy_pass http://localhost:5000;
            proxy_redirect     off;
            proxy_set_header   Host $host; 
        }