it-swarm.com.de

React-Router und Nginx

Ich stelle meine Reaction-App von Webpack-Dev-Server auf Nginx um.

Wenn ich zur Root-URL "localhost: 8080/login" gehe, erhalte ich einfach eine 404 und in meinem Nginx-Protokoll sehe ich, dass es versucht zu bekommen:

my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", Host: "localhost:8080"
my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"

Wo soll ich nach einer Lösung suchen?

Mein Router sieht folgendermaßen aus:

render(

  <Provider store={store}>
    <MuiThemeProvider>
      <BrowserRouter history={history}>
        <div>
          Hello there p
          <Route path="/login" component={Login} />
          <App>

            <Route path="/albums" component={Albums}/>

            <Photos>
              <Route path="/photos" component={SearchPhotos}/>
            </Photos>
            <div></div>
            <Catalogs>
              <Route path="/catalogs/list" component={CatalogList}/>
              <Route path="/catalogs/new" component={NewCatalog}/>
              <Route path="/catalogs/:id/photos/" component={CatalogPhotos}/>
              <Route path="/catalogs/:id/photos/:photoId/card" component={PhotoCard}/>
            </Catalogs>
          </App>
        </div>
      </BrowserRouter>
    </MuiThemeProvider>
  </Provider>, app);

Und meine Nginx-Datei wie folgt:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen 8080;
        root /wwwroot;

        location / {
            root /wwwroot;
            index index.html;

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


    }
}

BEARBEITEN:

Ich weiß, dass der Großteil des Setups funktioniert, denn wenn ich zu localhost: 8080 gehe, ohne angemeldet zu sein, erhalte ich auch die Anmeldeseite. Dies geschieht nicht durch eine Weiterleitung an localhost: 8080/login - es handelt sich um einen Reaktionscode.

66
martin

Der Standortblock in Ihrer Nginx-Konfiguration sollte sein:

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

Das Problem ist, dass Anforderungen an die Datei index.html funktionieren, aber Sie weisen nginx derzeit nicht an, andere Anforderungen auch an die Datei index.html weiterzuleiten.

163
Toby

Hier sind meine Lösungen

einfacher versuch:

location / {
    root /var/www/mysite;
    try_files $uri /index.html;
}

nicht mehr versuchen für Nicht-HTML-Typen:

location / {
    root /var/www/mysite;
    set $fallback_file /index.html;
    if ($http_accept !~ text/html) {
        set $fallback_file /null;
    }
    try_files $uri $fallback_file;
}

nicht mehr versuchen für Nicht-HTML-Typen und Verzeichnis (machen try_files kompatibel mit index und/oder autoindex):

location / {
    root /var/www/mysite;
    index index.html;
    autoindex on;
    set $fallback_file /index.html;
    if ($http_accept !~ text/html) {
        set $fallback_file /null;
    }
    if ($uri ~ /$) {
        set $fallback_file /null;
    }
    try_files $uri $fallback_file;
}
9
fuweichin