nginx try_filesとreact-routerは常にインデックスページを提供します

Question

私はnginx 1.10.1でプロキシしているSpring Bootバックエンドアプリケーションと連携してnode.jsアプリケーションを実行しています。私の設定ファイルは次のようになります。この構成では

worker_processes 1; 
error_log /usr/local/var/log/nginx/error.log; 

events { 
    worker_connections 1024; 
} 

http { 
    include  mime.types; 
    default_type application/octet-stream; 

    # Note this log_format is named 'main', and is used with the access log below 
    log_format main '$remote_addr - $remote_user [$time_local] $status ' 
    '"$request" $body_bytes_sent "$http_referer" ' 
    '"$http_user_agent" "$http_x_forwarded_for"'; 

    sendfile  on; 
    keepalive_timeout 65; 

    upstream appservice { 
    server localhost:9084; 
    } 

    upstream appui { 
    server localhost:3000; 
    } 

    proxy_buffer_size 128k; 
    proxy_buffers 4 256k; 
    proxy_busy_buffers_size 256k; 

    server { 
     listen 80; 
     server_name localhost; 
     access_log /usr/local/var/log/nginx/my_site.local.access.log main; 
     error_log /usr/local/var/log/nginx/my_site.local.error.log error; 

     location/{ 
      proxy_redirect off; 
      proxy_pass   http://appui; 
      try_files $uri $uri/ /index.html; 
     } 

     location /services { 
     rewrite ^/services(.*) /$1 break; 
      proxy_pass   http://appservice; 
     } 
    } 
} 

、EVERYTHINGであっても（すなわち、/bundle.js）を存在するサブパスのために、index.htmlをに送信されます。 try_filesを取り出すと、ページは正常に機能しますが、リクエストがそのページにルーティングされないため、反応ルータは機能しなくなります。

私はこれをどのように修正するかに関するアイデアはありますか？

編集：私は頼んだものを得る方法を見つけたようですが、私が望むものはありません。

この方法でnginx設定ファイルを構成すると、バンドルとインデックスページが正しくロードされます。今問題は、ページが空白として表示されることです。スクリプトが実行されず、そして/ルートは常にnginxのウェルカムページを示しています

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router, Route, Link, browserHistory} from 'react-router'; 
import Welcome from './welcome'; 
import Merchant from './merchant'; 
import CreateMerchant from './create-merchant'; 
import TakeTicket from './take-ticket'; 
import TicketStatus from './ticket-status'; 
require('bootstrap/dist/css/bootstrap.css'); 
// /* globals document, window */ 
// 
// const { pathname, search, hash } = window.location 
// const location = `${pathname}${search}${hash}` 

render((
    <Router history={browserHistory}> 
     <Route path="/" component={Welcome}/> 
     <Route path="/merchant" component={CreateMerchant}/> 
     <Route path="/merchant/:merchantId" component={Merchant}/> 
     <Route path="/merchant/:merchantId/tickets/take-ticket" component={TakeTicket} /> 
     <Route path="/merchant/:merchantId/tickets/:ticketId" component={TicketStatus} /> 
    </Router> 
), document.getElementById("app")) 

私はページがに取得するためにどのような操作を行うことができます。ここでは

server { 
     listen 80; 
     server_name localhost; 
     access_log /usr/local/var/log/nginx/my_site.local.access.log main; 
     error_log /usr/local/var/log/nginx/my_site.local.error.log error; 

     try_files $uri $uri/ @proxy; 

     location @proxy { 
      proxy_redirect off; 
      proxy_pass   http://vpagerui; 
     } 

     location /services { 
      rewrite ^/services(.*) /$1 break; 
      proxy_pass   http://vpagerservice; 
     } 
    } 

は私が反応し、ルータをしたかに構成され正しくロードしてbundle.jsファイルを実行しますか？

Answer 1

私は、実行可能であるためには十分に近い答えを得ることができました。 /パスではまだ動作しませんが、私には十分に機能する/homeルートを追加しました。

nginx.conf：

# Replace /usr/local/etc/nginx/nginx.conf with this. This is the 
# default location for Nginx according to 'nginx -h' 
worker_processes 1; 
error_log /usr/local/var/log/nginx/error.log; 

events { 
    worker_connections 1024; 
} 

http { 
    # This should be in the same directory as this conf 
    # e.g. /usr/local/etc/nginx 
    include  mime.types; 
    default_type application/octet-stream; 

    # Note this log_format is named 'main', and is used with the access log below 
    log_format main '$remote_addr - $remote_user [$time_local] $status ' 
    '"$request" $body_bytes_sent "$http_referer" ' 
    '"$http_user_agent" "$http_x_forwarded_for"'; 

    sendfile  on; 
    keepalive_timeout 65; 

    upstream areasetservice { 
    server localhost:9084; 
    } 

    upstream areasetui { 
    server localhost:3000; 
    } 

    # Without this I got this error: 'upstream sent too big header 
    # while reading response header from upstream' 
    proxy_buffer_size 128k; 
    proxy_buffers 4 256k; 
    proxy_busy_buffers_size 256k; 

    server { 
     listen 80; 
     server_name localhost; 
     access_log /usr/local/var/log/nginx/my_site.local.access.log main; 
     error_log /usr/local/var/log/nginx/my_site.local.error.log error; 


     location/{ 
      proxy_redirect off; 
      proxy_pass   http://areasetui; 
      index /index.html; 
     } 

     location /services { 
     rewrite ^/services(.*) /$1 break; 
      proxy_pass   http://areasetservice; 
     } 
    } 
} 

...ルータリアクト

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router, Route, Link, browserHistory} from 'react-router'; 
import Welcome from './welcome'; 
import Area from './Area'; 
import CreateArea from './create-area'; 
import Takemap from './take-map'; 
import MyMapStatus from './map-status'; 
require('bootstrap/dist/css/bootstrap.css'); 
// /* globals document, window */ 
// 
// const { pathname, search, hash } = window.location 
// const location = `${pathname}${search}${hash}` 

render((
    <Router history={browserHistory}> 
     <Route path="/" component={Welcome}/> 
     <Route path="/home" component={Welcome} /> 
     <Route path="/Area" component={CreateArea}/> 
     <Route path="/Area/:AreaId" component={Area}/> 
     <Route path="/Area/:AreaId/maps/take-map" component={TakeMyMap} /> 
     <Route path="/Area/:AreaId/maps/:mapId" component={MyMapStatus} /> 
    </Router> 
), document.getElementById("app"))