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

We are building a fully RESTful back-end with the Play Framework. We are also building a separate web front-end with a different technology stack that will call the RESTful API.

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

How do we deploy both apps so they have the same domain name, with some url's used for the backend API and some for the front-end views?

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

For example, visiting MyDomain.com means the front-end displays the home page, but sending a GET to MyDomain.com/product/24 means the back-end returns a JSON object with the product information. A further possibility is if a web browser views MyDomain.com/product/24, then the front-end displays an HTML page, and that webpage was built from a back-end call to the same url.

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

Finally, do we need two dedicated servers for this? Or can the front-end and back-end be deployed on the same server (e.g. OpenShift, Heroku)

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

3 个解决方案

#1

You are gonna to dig yourself... deep :)

Simplest and most clean approach with no any doubt is creating a single application serving data for both, BE and FE, where you differ response (JSON vs HTML) by the URL, pseudo routes:

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

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

Benefits:

优点：

• single deployment (let's say to Heroku)
• 单一部署（比如Heroku）
• name space managed from one app
• 从一个应用程序管理名称空间
• No need to modify the models in many apps after change in one of them
• 在更改其中一个应用程序后，无需修改许多应用程序中的模型

else if

If you're really determined to create a two separate apps, use some HTTP server as a proxy - for an example nginx - so it will send all requests to domain.tld/* to application working at port 9000 (which will answer with HTML) but requests to domain.tld/backend/* redirect to application working at port 9001 responding with JSON.

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

else

If you are really gonna to response with JSON or HTML depending on the caller you can try to compare headers to check if request was sent from browser or from AJAX call in each controller , but believe me that will become a nightmare faster than you thing... insert the coin, choose the flavor

如果您真的要根据调用者使用JSON或HTML进行响应，您可以尝试比较标头以检查请求是从浏览器发送还是从每个控制器中的AJAX调用发送，但请相信我这将成为比您更快的噩梦。 ..插入硬币，选择风味

#2

Other possibility (therefore as separate answer) is using a possibility added in Play 2.1.x a Content negotiation I think it's closest for that what you wanted to get initially :)

其他可能性（因此作为单独的答案）是使用Play 2.1.x中添加的一种可能性和内容协商我认为它最接近你最初想要得到的:)

#3

Indeed its much easier to create a MEAN STACK APP and use one hosting like Heroku for instance. Your frontend is what it is, front end for your backend. It will be easy to access backend / restfulAPI's and frontend like this:

事实上，它更容易创建一个MEAN STACK APP并使用像Heroku这样的托管。你的前端就是这样，后端的前端。可以很容易地访问backend / restfulAPI和前端，如下所示：

http://localhost:3000/api/contacts (to access and consume your API endpoint)

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

http://localhost:3000/contacts (frontend)

http：// localhost：3000 / contacts（frontend）

NB: localhost:3000 or http://yourapp.com/api/contacts (api) http://yourapp.com/contacts (frontend)

NB：localhost：3000或http://yourapp.com/api/contacts(api)http://yourapp.com/contacts（frontend）

.....its in the url :)

.....它在网址:)