클라이언트 쪽 라우팅이 브라우저 새로 고침으로 잘 재생되도록 모든 CDN에서 요청 URI를 다시 쓸 수 있습니까?

Question

정적 HTML/js/css로 작성된 HTML5 앱이 있습니다 (실제로는 Dart로 작성되었지만 자바 스크립트로 컴파일됩니다). 별도의 도메인에서 호스팅되는 REST API를 사용하여 CDN을 통해 응용 프로그램 파일을 제공하고 있습니다. 앱은 클라이언트 측 라우팅을 사용하므로 사용자가 앱을 사용하면 URL은 http://www.myapp.com/categories과 같이 바뀔 수 있습니다. 사용자가 페이지를 새로 고침하면 문제는, 그것이 초래하는 404

거기에 나를 사용자가 유효한 클라이언트 측 경로입니다 페이지를 요청하는 경우, 규칙을 만들 수 있도록하는 어떤 CDN의, 그냥 (내 경우에는) client.html 페이지를 반환하겠습니까? 내 웹 응용 프로그램의 정적 파일을 S3에 저장 아마존의 CloudFront를 CDN을 통해 제공됩니다

더 자세한 설명/예. 응용 프로그램을 부트 스트랩하는 단일 HTML 파일 client.html이 있습니다. 이 도메인 루트를 방문 할 때 봉사의 기본 파일입니다, 그래서 당신은 www.mysite.com에 가면 브라우저는 실제로 www.mysite.com/client.html 제공됩니다.

웹 응용 프로그램은 클라이언트 측 라우팅을 사용합니다. 앱이로드되고 사용자가 탐색을 시작하면 URL이 업데이트됩니다. 이러한 URL은 CDN에 실제로 존재하지 않습니다. 예를 들어, 사용자가 위젯을 탐색하려면 단추를 클릭하고 클라이언트 측 라우팅은 "위젯"보기를 표시하고 브라우저의 URL은 www.mysite.com/widgets/browse으로 업데이트됩니다. CDN에에서 /widgets/browse 실제로 사용자가 브라우저에서 새로 고침 버튼을 안타, 그래서 그들은 404

내 질문은 어떤 CDN 서비스 지원 요청 URI를보고 다시 작성 여부입니다 얻을 존재하지 않습니다. 그래서 /widgets/browse에 대한 요청을보고 /client.html으로 다시 쓸 수 있습니다. 그런 식으로, 응용 프로그램 대신 내가 다른 솔루션, 즉 CDN 앞에 서버를 배치,이 문제가 깨닫는 404

을 반환하는 제공 될 것입니다,하지만 덜 이상적입니다.

Answer 1

나는 CloudFront를 사용하여이 작업을 수행하지만 이러한 목표를 달성하기 위해 아파치를 실행하는 내 자신의 서버를 사용합니다. 아마존과 함께 서버를 사용하고 있다는 것을 알았지 만, 당신이 제한적이라고 명시하지 않았기 때문에 어쨌든 당신이하고자하는 것을 성취하는 방법에 대해 대답 할 것이라고 생각했습니다.

그것은 꽤 간단합니다. CloudFront의 캐시에 아직없는 항목이나 캐시에 있지만 만료 된 항목을 쿼리 할 때마다 CloudFront는 웹 서버로 돌아가서 콘텐츠를 제공하도록 요청합니다. 이 시점에서 요청을 완전히 제어 할 수 있습니다. Apache에서 mod_rewrite를 사용하여 요청을 캡처 한 다음 요청에 따라 어떤 콘텐츠를 제공할지 결정합니다. 사실, 내 서버에는 하나의 파일 (예비 PHP 스크립트)이 없지만 클라우드 프런트는 수천 명이 있다고 생각합니다. 꽤 확실한 URL 재 작성은 대부분의 웹 서버에서 표준으로, 나는 단지 자신의 경험에서 lighttp와 아파치에서만 확인할 수 있습니다.

추가 정보

당신이하고있는 모든 단지 그들을 만족시키기 위하여 들어오는 요청을 다시 작성하도록 서버를 말하고있다. 이것은 프록시 같은 것으로 간주되지 않습니다.

사이 CloudFront를 사용하여 응용 프로그램과 서버간에 콘텐츠의 흐름은, 다음과 같이이다 :

는

appRequest->cloudFront 
     if cloudFront has file, return data to user without asking your server 
     for the file. 

     If cloudFront DOESN'T have the file (or it has expired), go back to 
     the origin server and ask it for a new copy to cache. 

그러니까 기본적으로, 어떤 상황에서 어떤 일이 일어나고 것은 이것이다 :

A) app-> url 클라우드 프런트에 클라우드 프론트에 문의하십시오.
B) 클라우드 프론트 소스 서버에
C) 파일이 존재하지 않습니다. 이므로 서버가 cloudFront에 연을 날려달라고합니다.
D) cloudFront가 빈손으로 반환되어 앱을 만듭니다.
E) 앱이 충돌하고 화상이 나옴. 사용자가 도망 가거나 다른 것을 사용합니다.

그래서, 당신은 mod_rewrite를 함께하고있는 모두가 특정 포맷 요청을 재 해석하고 그에 따라 행동 할 수있는 방법 서버를 말하고있다. 당신은 singleImage.jpg를 가리 키도록 요청 .JPG 모두 다음 앱 요청이 지점 수 :

www.mydomain.com/image3.jpg
www.mydomain.com/naughtystuff.jpg

어느 쪽도 없습니다 이러한 이미지 중 귀하의 서버에 존재해야합니다. Apache는 singleImage.jpg를 보내서 요청을 존중합니다. 그러나 클라우드 프론트 또는 앱과 관련하여이 두 가지 파일은 서버의 서로 다른 두 위치에 있습니다.

희망 사항.

http://httpd.apache.org/docs/current/mod/mod_rewrite.html

Answer 2

난 당신이 잘못된 방법으로 URL 구조를 사용하고 생각합니다. 슬래시로 정의 된 경로는 client.html 예제에서 특정 리소스로 이동하게됩니다. 그러나, 그 자원 내에서 그 지점 너머로 라우팅하려면 많은 자바 스크립트 프레임 워크에서와 같이 #을 사용해야합니다. 이렇게하면 리소스 상태 (html 페이지 또는 응용 프로그램)가 라우터에 알려야합니다. 참조 된 다른 리소스가있는 경우. 이미지가 있다면 CDN을 통과하는 다른 경로를 제공해야합니다.