Question

我有一个应用程序，有两个路由器主页和结果。在主页中，我必须转到我们的授权微服务并返回到我的反应应用程序，返回结果页面，但是result.html文件不存在，因为是一个反应应用程序，所以我得到404错误。

我在我的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;
    }
}

但仍无效。有任何建议请。

Answer 1

这是我如何在不使用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;
  }
}

Answer 2

这个答案是问题部分中的以下评论。

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，并直接使用App.js文件中的端口80。我保留了nginx，因为我在同一个vps中有多个网站

在nginx服务器上反应路由器应用程序

2 个答案: