Wie kann ich konfigurieren reagieren-router mit nginx/cherrypy und meine aktuelle reactjs app

Ich habe eine funktionierende web-app-serviert von nginx mit cherrypy in der backend-und ReactJS für das front-end.

Die app wuchs, so dass ich Sie benutzen will reagieren-router und sorgen Sie für schnellen Zugriff auf Seiten mit URLs.
Zum Beispiel möchte ich dass meine.domain.name/Benutzer bekommen das Teil in meine app, mit der Benutzer verwaltet.

Meine einzige index.html enthält die js-bundle wie dieses:
<script src="/js/bundle.js"></script>

Bis jetzt meine app gestartet-rendering AppMain.
Jetzt habe ich eine NoMatch Klasse und ich habe beide in einen reagieren-router, wie diese:

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

Wenn Sie versuchen, diese funktionierte es gut. Mit http://my.domain.name gab mir die app nach wie vor.
Aber thoeritcally versucht nun http://my.domain.name/whatever sollte renderred was NoMatch-rendering. Aber stattdessen bekomme ich die nginx 404-Seite.

So, glaube ich, ein nginx-Seite-Konfiguration ist erforderlich, aber vielleicht nicht nur (das ist, warum ich brachte die ganze Geschichte oben).

Nginx-Konfiguration vornehmen ("http" - Teil) sieht wie folgt aus: 

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

Wie Sie sehen können cherrypy ist immer alle /api/* Pfade.

Habe ich statische Inhalte unter /css /img etc, ich will bedient werden, richtig.

Also muss ich alles, was nicht statisch ist und nicht /api zu gehen js/bundle.js

Wie Konfiguriere ich, dass in nginx?
Muss ich etwas tun, cherrypy oder javascript anders?

Vielen Dank im Voraus.

InformationsquelleAutor drorsun | 2016-03-30
  1. 26

    Gefunden, meine Antwort... Hier ist Sie:

    Grundsätzlich nginx-Konfiguration nötig, Weiterleitungs-urls auf /index.html (nicht meine bundle.js natürlich)

    Den Zusatz von try_files in der nginx conf übernimmt:

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

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

    Zusätzlich habe ich geändert, den router ' s Haupt-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'));

    Und in AppMainNewNav render() modifizierte ich die navigation etwas wie dies:

    <nav>
    <ul role="nav">
        <li><Link to="/videos">Videos</Link></li>
        <li><Link to="/about">About</Link></li>
    </ul>
</nav>
    • index index.html und try_files index.html arbeitete für mich!
    • dieses nette try_files router trick, die verwendet werden können, Google Storage Eimer ohne ein nginx webserver 🙂 ackee.cz/blog/en/...
    InformationsquelleAutor drorsun
Schreibe einen Kommentar