nginx try_files和react-router總是提供索引頁面

Question

我有一個node.js應用程序與我通過nginx 1.10.1進行代理的Spring Boot後端應用程序一起運行。我的配置文件看起來像這樣：

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; 
     } 
    } 
} 

在這種配置中，一切都被髮送到index.html的，即使存在子路徑（即，/bundle.js）。如果我取出try_files，那麼頁面將正常運行，但由於請求不會路由到該頁面，因此react-router不再工作。

關於我如何解決這個問題的任何想法？

編輯：我似乎找到了一種方法來得到我所要求的，但不是我想要的。

如果我用這種方式構造nginx配置文件，那麼它會正確加載包和索引頁。現在的問題是，網頁顯示爲空白;該腳本不執行，以及/路線總是顯示nginx的歡迎頁面：

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; 
     } 
    } 

這裏是我反應過來有路由器配置：

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")) 

我能做些什麼來讓頁面以正確加載並執行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"))