0

我正在尝试从 Play Framework 服务器托管一个 React 站点。React 前端是在一个单独的项目中开发的,它的构建工件(静态 html/js/css/etc. 文件)被复制到我的 Play 项目的public文件夹中。

现在我尝试导航到例如 /page1 (这是一个 React 路由),但我得到一个 404,因为服务器当然没有这样的路由。

我想要的是复制 nginx 的try_files $uri /index.html那种功能——如果可以提供所要求的路径(即它对应于服务器知道的资产),它就会被提供。否则,在不重写 url 的情况下提供 index.html 的内容,以便 React 的路由可以工作。

我试过让它只与routes文件一起使用,也可以作为控制器(使用 if/else)。我无法准确地复制 nginx 中的单线。我怎么能这样做?

4

2 回答 2

2

正如@vdebergue 所说,您可以通过在文件底部添加全部内容来获得所需内容的简化版本conf/routes

但是,如果您有其他文件public仍希望正确提供(例如,图像文件),则需要使用功能更强大的东西。

我在 7 月份的博客中对此进行了介绍,但根据 Stack Overflow 约定,我也会在此处对其进行扩展。基本上,你可以复制这个 Gist,它声明了一个FrontEndServingController.

该控制器在内置控制器之上提供的关键功能Assets是,在第一次使用时,它会递归地扫描您的public目录以查找真实文件,因此它知道何时提供它们以及何时提供它们index.html(您的 React 应用程序)。

然后你在你的routes文件中使用它,如下所示:

GET /       controllers.FrontEndServingController.index
GET /*file  controllers.FrontEndServingController.frontEndPath(file)
于 2017-11-03T09:35:08.040 回答
-1

您可以简单地在路由文件中执行此操作。在文件的底部,添加以下 catch all 规则:

# your other routes above
# ...
GET     /$any<.*>                controllers.Assets.at(path="/public", file="index.html")
于 2017-11-02T21:40:39.730 回答