nginx try_files und react-router liefert immer Index-Seite

Question

Ich habe eine node.js-Anwendung im Tandem mit einer Spring-Boot-Backend-Anwendung, die ich Proxy über nginx 1.10.1 bin. Meine Konfigurationsdatei sieht wie folgt aus:

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

In dieser Konfiguration wird alles zu index.html gesendet, auch für Teilstrecken, die (das heißt, /bundle.js) vorliegen. Wenn ich try_files herausnehme, dann wird die Seite wie gewohnt angezeigt, aber der react-Router funktioniert nicht mehr, weil Anfragen nicht an diese Seite weitergeleitet werden.

Irgendwelche Ideen, wie ich das beheben?

EDIT: Ich habe anscheinend einen Weg gefunden zu bekommen, was ich fragte, aber nicht was ich will.

Wenn ich die nginx-Konfigurationsdatei auf diese Weise strukturiere, lädt sie das Bundle und die Indexseite richtig. Das Problem besteht jetzt darin, dass die Seiten leer angezeigt werden. wird das Skript nicht ausgeführt werden, und die / Route zeigt immer die nginx Begrüßungsseite:

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

Hier ist, wie ich react-Router konfiguriert:

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

Was kann ich tun, Seiten zu bekommen richtig laden und die Datei bundle.js ausführen?

Answer 1

So konnte ich nah genug zu einer Antwort kommen, um praktikabel zu sein. Es funktioniert immer noch nicht für den / Pfad, aber ich fügte eine /home Route hinzu, die gut genug für mich arbeiten wird.

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

Die Reaktion Router ...

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