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