时间戳

首页 > 解决方案 > 由于 MERN 堆栈应用程序中客户端和后端之间的连接问题，未提供静态文件

node.js - 由于 MERN 堆栈应用程序中客户端和后端之间的连接问题，未提供静态文件

问题描述

我正在尝试将 MERN 堆栈应用程序部署到 DigitalOcean 液滴。我的后端在 Nginx 服务器上运行，并成功连接到 MongoDB atlas 实例。我使用 FileZilla 来提供我的静态文件，并且这些文件在我没有请求服务器的路由上成功提供。但是在向服务器发出请求的路由上（从 MongoDB 到 GET、POST、PUT 或 DELETE 记录），页面加载了几毫秒，然后由于无法从 API 获取数据相关的错误，一切都消失了。由于后端正在运行并连接到 MongoDB，我认为我传递给 Axios 的 URL 可能不正确。我在前端 package.json 中定义了一个代理值，如下所示：

"proxy": "HTTP://localhost:5000"

我提出的要求如下：

axios.get('/api/members')

它在我的本地机器上运行良好。但是，我在 stackoverflow 线程的某处读到代理仅在开发模式下生效，而不是在生产模式下生效。所以我从 package.json 文件中删除了代理，并将 axios 请求更改为：

axios.get('[IP_to_the_droplet]/members']

我不确定这是否正确，我认为不是，因为在我的前端带有 HTTP 请求的路由仍然不起作用。您认为问题与 HTTP 请求有关吗？你知道我应该如何解决这个问题吗？

先感谢您

标签： node.jsreactjsdeploymentaxiosmern

解决方案

您通常需要一个反向代理服务器来将 localhost:5000 映射到 droplet 的 IP。您可以在 Nginx 中轻松设置反向代理。这是你如何做到的。

您将使用守护程序启动应用程序以在 localhost:5000 上广播，这将是您的 Nginx 配置

. . .
    location / {
        proxy_pass http://localhost:5000;
        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;
    }
}

详细步骤在这里：

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04#set-up-nginx-as-反向代理服务器

推荐阅读