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

【问题标题】：Static files are not being served due to connection issues between the client and the backend in a MERN stack app由于 MERN 堆栈应用程序中客户端和后端之间的连接问题，未提供静态文件
【发布时间】：2021-09-17 13:01:57
【问题描述】：

我正在尝试将 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.js reactjs deployment axios mern

【解决方案1】：

您通常需要一个反向代理服务器来将 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-a-reverse-proxy-server

【讨论】：