如何在 Play Framework 中重新创建 nginx 的 try_files 以托管 React 站点

How to recreate nginx's try_files in Play Framework for hosting React site

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

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

我想要的是复制 nginx 的 try_files $uri /index.html 类型的功能 - 如果可以提供所请求的路径(即它对应于服务器知道的资产),它就会被提供。否则,提供 index.html 的内容而不用 重写 url,这样 React 的路由就可以工作了。

我试过让它与 routes 文件一起工作,也可以作为控制器(使用 if/else)。我一直无法准确复制 nginx 中的单行代码。我该怎么做?

你可以简单地在路由文件中完成。在文件的底部,添加这个 catch all 规则:

# your other routes above
# ...
GET     /$any<.*>                controllers.Assets.at(path="/public", file="index.html")

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

但是 如果您在 public 中有 其他 个文件,您希望仍能正确提供这些文件(对于例如,图像文件),你需要使用更强大的东西。

我在 my blog in July, but as per Stack Overflow convention, I'll expand upon it here as well. Basically, you can copy this Gist 中写过这个,它声明了一个 FrontEndServingController

此控制器在内置 Assets 控制器之上提供的关键功能是,在首次使用时,它会递归扫描您的 public 目录以找到 real 文件,所以它知道什么时候提供它们,什么时候提供 index.html(你的 React 应用程序)。

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

GET /       controllers.FrontEndServingController.index
GET /*file  controllers.FrontEndServingController.frontEndPath(file)