在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服务器上反应路由器应用程序

回答

相关问题