在同一个域上分离后端和前端应用程序？

Posted 2023-02-15

【中文标题】在同一个域上分离后端和前端应用程序？

【英文标题】：Separate back-end and front-end apps on same domain?

【发布时间】：2013-08-01 13:39:31

【问题描述】：

我们正在使用 Play 框架构建一个完全 RESTful 的后端。我们还在构建一个单独的 Web 前端，该前端具有不同的技术堆栈，将调用 RESTful API。

我们如何部署这两个应用程序以使它们具有相同的域名，其中一些 url 用于后端 API，一些用于前端视图？

例如，访问 MyDomain.com 表示前端显示主页，但发送 GET 到 MyDomain.com/product/24 表示后端返回带有产品信息的 JSON 对象。另一种可能性是，如果 Web 浏览器查看 MyDomain.com/product/24，那么前端会显示一个 html 页面，并且该网页是通过对同一 url 的后端调用构建的。

最后，我们需要两台专用服务器吗？或者前端和后端可以部署在同一台服务器上（例如OpenShift、Heroku）

【问题讨论】：

你能解释一下GET 到MyDomain.com/product/24 应该从你的前端返回一个响应和一个应该从你的后端返回一个响应吗？您是否要求您的后端用户添加一个特殊的 HTTP 标头？特定的用户代理？

是的，根据 REST 协议，数据类型是通过 HTTP 标头确定的。不过，该功能对于在同一个域上同时获得前端和后端而言是次要的。

【参考方案1】：

我想到了一个不同的解决方案。我打算将后端部署到一个子域，例如

http://api.myapp.com

并将前端部署到主域：

http://myapp.com/

但我认为您最好使用 2 个不同的主机，一个用于前端，一个用于后端（我搜索了 google，这是我调查的结果：）

【参考方案2】：

确实，创建 MEAN STACK 应用程序并使用像 Heroku 这样的主机要容易得多。 你的前端就是你的后端，前端就是你的后端。像这样访问后端/restfulAPI 和前端将很容易：

http://localhost:3000/api/contacts（访问和使用您的 API 端点）

http://localhost:3000/contacts（前端）

注意：localhost:3000 或 http://yourapp.com/api/contacts (api) http://yourapp.com/contacts（前端）

.....它在网址中:)

【参考方案3】：

其他可能性（因此作为单独的答案）是使用 Play 2.1.x a Content negotiation 添加的可能性我认为它最接近你最初想要得到的东西:)

【参考方案4】：

你要去挖掘自己……深 :)

毫无疑问，最简单、最干净的方法是创建一个为 BE 和 FE 提供数据的单一应用程序，您可以通过 URL、伪路由来区分响应（JSON 与 HTML）：

GET  /products/:id          controllers.Frontend.productHtml(id)
GET  /backend/products/:id  controllers.Backend.productJson(id)

好处：

单一部署（假设是 Heroku） 名称空间由一个应用管理 在许多应用中更改其中一个后无需修改模型

否则

如果您真的决定创建两个单独的应用程序，请使用一些 HTTP 服务器作为代理 - 例如 nginx - 这样它会将所有请求发送到 domain.tld/* 到在端口 9000 上工作的应用程序（它将以 HTML 响应）但对 domain.tld/backend/* 的请求重定向到在端口 9001 上工作的应用程序以 JSON 响应。

否则

如果您真的要根据调用者使用 JSON 或 HTML 进行响应，您可以尝试比较标头以检查请求是从浏览器发送的还是从每个控制器中的 AJAX 调用发送的，但相信我这将比你这东西……投币，选口味

【讨论】：

我已经看到很多关于创建独立 REST 后端应用程序和独立 javascript 前端应用程序的讨论，我认为 Twitter 可能曾经走这条路？但我从未听说过他们如何管理服务器和域。您认为大多数尝试此功能的人是否为每个应用程序都使用了单独的域名？

我不建议单独的域，因为您在创建 AJAX 请求时需要额外处理它，因此我在 else if 部分中写了如何做到这一点（恕我直言）单个域和两个（或更多）应用程序使用此堆栈前面的一些 http 服务器