我正在尝试从Play Framework服务器托管React站点。 React前端是在一个单独的项目中开发的,它的构建工件(静态html / js / css / etc。文件)被复制到我的Play项目的public
文件夹中。
现在我尝试导航到例如/ page1(这是一个React路由),但我得到了404,因为服务器当然没有这样的路由。
我想要的是复制nginx的try_files $uri /index.html
类功能 - 如果可以提供要求的路径(即它对应于服务器知道的资产),送达。否则,请提供index.html 的内容,而不用重写网址,以便React的路由可以正常工作。
我尝试过只使用routes
文件和控制器(使用if / else)。我还没能完全复制nginx中的单行内容。我怎么能这样做?
答案 0 :(得分:2)
正如@vdebergue所说,你可以通过在conf/routes
文件的底部添加一个全能的内容来获得你想要的简化版本。
然而如果public
中有其他文件,您仍希望仍能正确使用(例如,图像文件),你需要使用更强大的东西。
我在my blog in July中写过这个,但根据Stack Overflow惯例,我也在这里进行了扩展。基本上,您可以复制this Gist,声明FrontEndServingController
。
此控制器在内置Assets
控制器上方提供的关键功能是,首次使用时,它会递归扫描您的public
目录以查找真实的文件,因此它知道何时提供服务,何时提供index.html
(您的React应用程序)。
然后您在routes
文件中使用它,如下所示:
GET / controllers.FrontEndServingController.index
GET /*file controllers.FrontEndServingController.frontEndPath(file)
答案 1 :(得分:-1)
您只需在路线文件中执行此操作即可。在文件的底部,添加此catch all规则:
# your other routes above
# ...
GET /$any<.*> controllers.Assets.at(path="/public", file="index.html")