Reagieren Router App auf Nginx-Server

Question

Ich habe eine App, mit zwei Router nach Hause und Ergebnisse. Auf der Startseite muss ich zu unseren Autorisierungs-Microservices und der Rückkehr zu meiner Reaction-App auf die Ergebnisseite gehen, aber die result.html-Datei existiert nicht, da es sich um eine React-App handelt, so bekomme ich 404-Fehler.

Ich versuche, die folgende Konfiguration auf meinem nginx:

server { 
    listen  80; 
    server_name localhost; 

    #charset koi8-r; 
    #access_log /var/log/nginx/log/host.access.log main; 

    location/{ 
     root /usr/share/nginx/html; 
     index index.html index.htm; 
    } 

    #error_page 404    /404.html; 

    # redirect server error pages to the static page /50x.html 
    # 
    error_page 500 502 503 504 /50x.html; 
    location = /50x.html { 
     root /usr/share/nginx/html; 
    } 

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80 
    # 
    #location ~ \.php$ { 
    # proxy_pass http://127.0.0.1; 
    #} 

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 
    # 
    #location ~ \.php$ { 
    # root   html; 
    # fastcgi_pass 127.0.0.1:9000; 
    # fastcgi_index index.php; 
    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 
    # include  fastcgi_params; 
    #} 

    # deny access to .htaccess files, if Apache's document root 
    # concurs with nginx's one 
    # 
    #location ~ /\.ht { 
    # deny all; 
    #} 

    # Any route that doesn't have a file extension (e.g. /devices) 
    location/{ 
     try_files $uri $uri/ /results.html; 
    } 
} 

aber immer noch nicht funktioniert. Irgendein Vorschlag bitte.

Answer 1

Diese haben, wie ich dieses Problem lösen, ohne einen Express.js Server mit:

diese Datei meine nginx config:

# pushState friendly! 
# The setup: 
# * website name is `_` 
# * javascript app is located at `/app` 

charset utf-8; 

tcp_nopush on; 
tcp_nodelay off; 
client_header_timeout 10s; 
client_body_timeout 10s; 
client_max_body_size 128k; 
reset_timedout_connection on; 

gzip on; 
gzip_types 
    text/css 
    text/javascript 
    text/xml 
    text/plain 
    application/javascript 
    application/x-javascript 
    application/json 
    application/xml 
    application/rss+xml 
    application/atom+xml 
    font/truetype 
    font/opentype 
    image/svg+xml; 

server { 
    listen 80; 
    server_name localhost; 
    root /usr/share/nginx/html; 


    # To make sure any assets can get through :) 
    location/{ 
    try_files $uri @rewrites; 
    } 

    # If no asset matches, send it to your javascript app. Hopefully it's a route in the app! 
    location @rewrites { 
    rewrite ^(.+)$ /index.html last; 
    } 
} 

Answer 2

Diese Antwort ist die folgende der Kommentare im Frageabschnitt.

App.js

const app = require('./app'); 

const PORT = process.env.PORT || 3000; 

app.listen(PORT,() => { 
    console.log(`App listening on port ${PORT}!`); 
}); 

Server.js

const express = require('express'); 
const path = require('path'); 

const app = express(); 

// Serve static assets 
app.use(express.static(path.resolve(__dirname, '..', 'build'))); 

// I always return index.html, react-router takes control 
app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); 
}); 

module.exports = app; 

Da ist in meinem nginx config ich proxy_pass 127.0.0.1:3000 Sie können aber auch nginx löschen und verwenden, um direkt den Hafen 80 in der App.js-Datei. Ich halte nginx, weil ich mehrere Website in den gleichen vps