生产Express / React应用中HTTP的基本/代理URL

问题描述 投票:0回答:1

我有一个React前端(由create-react-app制造)和一个Express后端,以及一个远程MySQL数据库。当我同时在本地运行,在localhost:3000上服务前端并将http请求代理到localhost:3306(这也是Express应用程序侦听的端口)时,一切正常。向localhost:3000/api/endpoint发出了请求,同样有效。

我现在正在尝试将此设置移至服务器上的生产环境。我正在使用共享服务器,并且通过Cpanel配置了Node(尽管我确实具有SSH访问权限)。我没有像开发中那样在服务器上“运行” React端,而是创建了构建文件并将其放置在与我的域主页相对应的目录中。

假设我的域名是foo.com。我的托管公司建议我在端口50000上运行Node(因为当我尝试使用3306时,它说它已经在使用)。当前,对我的API的每个请求似乎都导致404:它正在尝试查询foo.com/api/endpoint,但失败。我的问题是:如何正确地将这些请求定向到后端?我知道React package.json中的proxy选项并不是真的要在生产中使用,所以我应该改用什么,应该将其设置为什么?我还应该在服务器上配置其他任何东西吗?

node.js reactjs express http cpanel
1个回答
0
投票

好的,您遇到了一些困扰您的问题:

  • 您正在使用仅在开发中有效的package.json代理。而是在客户端使用axios configuration在API方面使用cors configuration,以允许两者在开发/生产中进行通信。

  • 您的server.js没有为您的客户build生产资产提供服务,因此我提供了如何进行此服务的example。另外,我在无存档的production中添加了package.json脚本,以创建一个有效的本地生产示例。只需键入npm run productionyarn production即可运行示例。在此简单示例中,转到localhost:5000,客户端将立即尝试通过调用找到的IFFE来验证伪造的JWT令牌。 API将接收令牌,对其进行身份验证,然后以“无效令牌”警报进行响应。

  • 我无法使您的API路由配置正常工作,所以我建议使用更标准的方法。

例如:

here

const authRoutes = require("./routes/api/auth");

app.use("/api/auth", authRoutes);

执行上述操作将使您开始工作。

这是一个工作仓库app.use("/api/auth", require("./routes/api/auth"));


其他注意事项...

通过使用https://github.com/mattcarlotta/seedbank-exampleasync/await块,您可以简化许多API控制器代码。例如,try/catch(如果标头不包含授权,当前会导致您的应用崩溃)可以简化为this(不幸的是,JWT使用回调函数代替了Promise,因此我将其包装在Promise中是为了保持整洁-但主要要点是this控制器更易于阅读并捕获任何错误,然后将它们发送回客户端,而不是使您的应用程序崩溃。]

© www.soinside.com 2019 - 2024. All rights reserved.