在nginx服務器上反應路由器應用程序

我有一個應用程序，帶有兩個路由器主頁和結果。在主頁，我必須去我們的授權微服務和返回到我的反應的應用程序，結果頁面，但result.html文件不存在，因爲是一個反應的應用程序，所以我得到404錯誤。在nginx服務器上反應路由器應用程序

我想下面的配置我的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; 
    } 
}

，但仍然沒有工作。請提供任何建議。

來源

2017-06-20 Jean

當你說「我有沒有HTML文件，因爲它是一個反應的應用程序「，你的意思是你在你的服務器執行webpack？ – Vashnak

您是否創建了一些服務器來顯示您的React JS文件？ – ickyrr

您需要在'express'或任何Web服務器上運行您的React JS應用程序才能使其工作。 – ickyrr

這多個網站，我是如何解決這個問題，而無需使用expressjs服務器：

這是我的nginx的配置文件：

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

來源

2017-06-20 15:38:56 Jean

此答案是問題部分的評論以下內容。

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;

然後在我的nginx的配置我用proxy_pass 127.0.0.1:3000 但你也可以刪除nginx的，並直接使用的端口80在App.js文件中。我把nginx的，因爲我有同樣的VPS

來源

2017-06-20 09:15:23 Vashnak

在nginx服務器上反應路由器應用程序

回答

相關問題