在同一域中托管 React 应用程序和 Express 应用程序
Hosting a React app and Express app on the same domain
我开发了一个调用 Express 后端的 React 应用程序。它们是两个完全不同的应用程序,位于两个不同的目录中并托管在不同的域中。我正在使用 passport
对用户进行身份验证,并使用 express-session
来确保他们的会话持续存在。在开发中一切都按预期工作,但在托管应用程序时,会话不会持续存在。我意识到这是因为应用程序位于不同的域中,并且来自我的 Express 服务器的 cookie 被浏览器阻止。我需要做的是将我的应用程序放在同一个域中来解决这个问题,我正试图找出最好的方法来做到这一点。到目前为止,我已经提出了两种解决方案,但我想要一些关于哪种是最好的以及是否有比这两种更好的解决方案的意见。
1) 将应用程序移动到同一目录中。我不确定如何为我的应用程序路由和定义入口点(如何同时在同一目录中启动两个应用程序?)。任何关于此的资源将不胜感激
2) 这两个应用目前都托管在 Heroku 上。我正在考虑购买一个域并使用 Route 53 别名将它们置于同一域中,但我也不确定这背后的逻辑以及这是否有效。
我之前必须实现这一点,就同时 运行 而言,我建议 concurrently 同时执行两个启动脚本。当然,您必须 运行 它们在不同的端口上。
在项目结构上,无论是客户端还是服务端都可以在根目录下,但只能一个。另一个需要放在一个文件夹中,以保持干净。无论哪个是根,都应包含启动两个应用程序的入口点(也称为并发调用)。
在路由方面,既然你说它们是完全不同的应用程序,我假设你只需要服务器进行 API 或 auth 调用。在这种情况下,您将需要设置一个代理中间件来处理 GET、POST 等针对服务器而非客户端的请求。我建议 http-proxy-middleware for that purpose. In simple cases, you can add a proxy
property in the package.json
for you React app, but it can get hairy. The React Docs 提供有关设置的精彩教程。
感谢 Enioluwa Segun 的回答,但实际上我决定尝试另一种方法,即购买域并统一该域上的两个应用程序,因为我记得我在另一个项目中做过类似的事情。它最终成功了,我的会话仍然存在!
更具体地说,我所做的是在 AWS Route 53 上购买一个域,然后我按照 this guide to set it up to alias my frontend Heroku app. I then used this 指南将 api.mydomain.com
重定向到我的后端 Heroku 应用程序。
我开发了一个调用 Express 后端的 React 应用程序。它们是两个完全不同的应用程序,位于两个不同的目录中并托管在不同的域中。我正在使用 passport
对用户进行身份验证,并使用 express-session
来确保他们的会话持续存在。在开发中一切都按预期工作,但在托管应用程序时,会话不会持续存在。我意识到这是因为应用程序位于不同的域中,并且来自我的 Express 服务器的 cookie 被浏览器阻止。我需要做的是将我的应用程序放在同一个域中来解决这个问题,我正试图找出最好的方法来做到这一点。到目前为止,我已经提出了两种解决方案,但我想要一些关于哪种是最好的以及是否有比这两种更好的解决方案的意见。
1) 将应用程序移动到同一目录中。我不确定如何为我的应用程序路由和定义入口点(如何同时在同一目录中启动两个应用程序?)。任何关于此的资源将不胜感激
2) 这两个应用目前都托管在 Heroku 上。我正在考虑购买一个域并使用 Route 53 别名将它们置于同一域中,但我也不确定这背后的逻辑以及这是否有效。
我之前必须实现这一点,就同时 运行 而言,我建议 concurrently 同时执行两个启动脚本。当然,您必须 运行 它们在不同的端口上。
在项目结构上,无论是客户端还是服务端都可以在根目录下,但只能一个。另一个需要放在一个文件夹中,以保持干净。无论哪个是根,都应包含启动两个应用程序的入口点(也称为并发调用)。
在路由方面,既然你说它们是完全不同的应用程序,我假设你只需要服务器进行 API 或 auth 调用。在这种情况下,您将需要设置一个代理中间件来处理 GET、POST 等针对服务器而非客户端的请求。我建议 http-proxy-middleware for that purpose. In simple cases, you can add a proxy
property in the package.json
for you React app, but it can get hairy. The React Docs 提供有关设置的精彩教程。
感谢 Enioluwa Segun 的回答,但实际上我决定尝试另一种方法,即购买域并统一该域上的两个应用程序,因为我记得我在另一个项目中做过类似的事情。它最终成功了,我的会话仍然存在!
更具体地说,我所做的是在 AWS Route 53 上购买一个域,然后我按照 this guide to set it up to alias my frontend Heroku app. I then used this 指南将 api.mydomain.com
重定向到我的后端 Heroku 应用程序。