どのようにリアクションルータをnginx/cherrypyと現在のreactjsアプリに設定することができますか

Question

nginxがバックエンドにcherrypy、フロントエンドにReactJSを提供しています。

アプリが増えたので、反応ルータを使用してURLのあるページにすばやくアクセスできます。 たとえば、my.domain.name/userがユーザーを管理するアプリケーションの一部を取得したいとします。今、私のアプリはAppMainをレンダリングし始めるまで <script src="/js/bundle.js"></script>

：

私の単一のindex.htmlは、このようなJSバンドルが含まれています。 は今、私はNOMATCHクラスを作成し、私はこのように、反応し、ルータに両方を入れている：それはうまく働いたこれをしようとすると

ReactDOM.render((
    <Router history={browserHistory}> 
     <Route path="/" component={AppMain}> 
      <Route path="*" component={NoMatch}/> 
     </Route> 
    </Router> 
), document.getElementById('main-central')); 

。 http://my.domain.nameを使用すると、以前のように私にアプリを渡しました。 しかし、今度は、http://my.domain.name/whateverは、NoMatchがレンダリングしているものをレンダリングする必要があります。しかし代わりに、私はnginx 404ページを取得します。

だから、私はnginx側の設定が必要だと思うかもしれませんが、多分（私は上記の全体の話を持っている理由です）。 （HTTP一部）

nginxの構成は次のようになります。

upstream app_servers { 
    server 127.0.0.1:9988; 
} 

# Configuration for Nginx 
server { 

    location/{ 
     root /var/www; 
     index index.html; 
    } 

    # Proxy connections to the application servers 
    # app_servers 
    location /api { 
     proxy_pass   http://app_servers/api; 
     proxy_redirect  off; 
     proxy_set_header Host $host; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header X-Forwarded-Host $server_name; 
    } 
} 

あなたはCherryPyには、すべての/ API/*パスを取得している見ることができるように。

静的コンテンツは、/ css、/ imgなどの下に適切に配信されます。

だから私は、JS/bundle.js私はnginxの中にいることを設定するにはどうすればよい

に行くに静的ではなく/ APIではないすべてのものがありますか？ cherrypyやjavascriptで何か別のことをする必要がありますか？

ありがとうございます。ここに私自身の答えを見つけ

Answer 1

...されている：基本的にnginxの設定が必要

は（もちろん、ない私のbundle.jsに）/index.htmlにリダイレクトURLを

try_filesの追加nginxのconfの中は、そのの世話をする：

location/{ 
    root /var/www; 
    index index.html; 

    try_files $uri $uri/ /index.html; 
} 

さらに私は、ルータのメインredneringを変更：

ReactDOM.render(
    (<Router history={browserHistory}> 
     <Route path="/" component={AppMainNewNav}> 
      <Route path="users" component={UsersPage}/> 
      <Route path="about" component={About}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 
    </Router>) 
    , document.getElementById('navbar')); 

とAppMainNewNavに（レンダリング）私はこのような何かへのナビゲーションを修正：

<nav> 
    <ul role="nav"> 
     <li><Link to="/videos">Videos</Link></li> 
     <li><Link to="/about">About</Link></li> 
    </ul> 
</nav>