2017-11-02 19 views
0

React 사이트를 Play Framework 서버에서 호스팅하려고합니다. React 프론트 엔드는 별도의 프로젝트로 개발되고 빌드 아티팩트 (정적 html/js/css/etc 파일)가 Play 프로젝트의 public 폴더로 복사됩니다.호스팅하기 위해 Play Framework에서 nginx의 try_files를 다시 작성하는 방법

이제 예를 들어 네비게이션 해 보았습니다./page1 (이 경로는 React 경로입니다.)하지만 서버에 이러한 경로가 없으므로 404가 표시됩니다.

내가 원하는 것은 nginx의 try_files $uri /index.html 기능을 복제하는 것입니다. 요청되는 경로가 제공 될 수 있다면 (예 : 서버가 알고있는 자산에 해당), 서비스가 제공됩니다. 그렇지 않으면 URL을 다시 쓰지 않고 index.html 의 내용을 제공하면 React의 라우팅이 작동 할 수 있습니다.

나는 이것을 routes 파일과 컨트롤러 (if/else 포함)로만 사용하려고 시도했습니다. 나는 정확히 nginx에서 하나의 라이너를 복제 할 수 없었습니다. 내가 어떻게 할 수 있니?

답변

2

: 파일의 맨 아래에,이 캐치 모든 규칙을 추가 . 당신은 여전히 ​​제대로 제공 될 싶습니다 public에서 다른 파일이있는 경우

그러나은 (예를 들어, 이미지 파일)을, 당신은 좀 더 강력한 뭔가를 사용해야합니다.

이 내용은 my blog in July에 썼습니다.하지만 스택 오버플로 규칙에 따라 여기에서도 설명하겠습니다. 기본적으로 FrontEndServingController을 선언하는 this Gist을 복사 할 수 있습니다. 이 컨트롤러는 위의 제공

의 핵심 기능이 내장 된 Assets 컨트롤러를 처음 사용할 때, 그것은 반복적으로 실제 파일을 찾기 위해 public 디렉토리를 검색, 그래서 그들을 봉사 때 역할을하는시기를 알고 있다는 것입니다 index.html (귀하의 React 앱).

그런 다음이처럼 routes 파일에서 사용 :

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

이것은 "dev 모드"에서 완벽하게 작동하지만 뚜렷한 모드에서는 실패했습니다. 구체적으로 말하자면, gist의 25 번째 라인에서'f.listFiles'를 사용할 수없는 것으로 보입니다.이 파일은'NullPointerException'으로 폭발합니다. 다음과 같이 dev와 prod 모드 모두에서 작동하도록하려면 Gist를 수정해야합니다. https://gist.github.com/mrubin/211f007508cd90f471d697132727808c – iraxef

+1

명시 적으로'index' 원하는 경우 경로를 다음과 같이 다시 작성하면 'GET/$ path <.*> controllers.FrontEndServingController.frontEndPath (path) ' – iraxef

+0

@iraxef! – millhouse

-1

경로 파일에서 간단하게 수행 할 수 있습니다. @vdebergue가 말한대로 당신의 conf/routes 파일의 하단에 포괄를 추가하여 당신은 당신이 원하는 것을 단순화 된 버전을 얻을 수

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

이 작동하지 않습니다 '컴파일 오류 [전화 정의에서 매개 변수 누락 : 어떤] [오류] GET/$ 어떤 <.*> 컨트롤러 .Assets.at (path = "/ public", file = "index.html")' – iraxef