Question

我有一个node.js应用程序与Spring Boot后端应用程序串联运行，我通过nginx 1.10.1进行代理。我的配置文件如下所示：

worker_processes 1;
error_log /usr/local/var/log/nginx/error.log;

events {
  worker_connections  1024;
}

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

  # Note this log_format is named 'main', and is used with the access log below
  log_format   main '$remote_addr - $remote_user [$time_local]  $status '
    '"$request" $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile        on;
  keepalive_timeout  65;

  upstream appservice {
    server localhost:9084;
  }

  upstream appui {
  server localhost:3000;
  }

  proxy_buffer_size   128k;
  proxy_buffers   4 256k;
  proxy_busy_buffers_size   256k;

  server {
      listen 80;
      server_name localhost;
      access_log /usr/local/var/log/nginx/my_site.local.access.log  main;
      error_log /usr/local/var/log/nginx/my_site.local.error.log error;

      location / {
          proxy_redirect off;
          proxy_pass         http://appui;
          try_files $uri $uri/ /index.html;
      }

      location /services {
      rewrite ^/services(.*) /$1 break;
          proxy_pass         http://appservice;
      }
  }
}

在此配置中，即使对于存在的子路径（即/bundle.js），EVERYTHING也会发送到index.html。如果我取出try_files，则该页面正常运行，但react-router不再有效，因为请求未被路由到该页面。

关于我如何解决此问题的任何想法？

编辑：我似乎找到了一种方法来获得我所要求的，但不是我想要的。

如果我以这种方式构造nginx配置文件，那么它会正确加载bundle和index页面。现在的问题是页面显示为空白;脚本不执行，/路径始终显示nginx欢迎页面：

server {
      listen 80;
      server_name localhost;
      access_log /usr/local/var/log/nginx/my_site.local.access.log  main;
      error_log /usr/local/var/log/nginx/my_site.local.error.log error;

      try_files $uri $uri/  @proxy;

      location @proxy {
          proxy_redirect off;
          proxy_pass         http://vpagerui;
      }

      location /services {
          rewrite ^/services(.*) /$1 break;
          proxy_pass         http://vpagerservice;
      }   
  }

以下是我配置react-router的方法：

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';
import Welcome from './welcome';
import Merchant from './merchant';
import CreateMerchant from './create-merchant';
import TakeTicket from './take-ticket';
import TicketStatus from './ticket-status';
require('bootstrap/dist/css/bootstrap.css');
// /* globals document, window */
//
// const { pathname, search, hash } = window.location
// const location = `${pathname}${search}${hash}`

render((
    <Router history={browserHistory}>
        <Route path="/" component={Welcome}/>
        <Route path="/merchant" component={CreateMerchant}/>
        <Route path="/merchant/:merchantId" component={Merchant}/>
        <Route path="/merchant/:merchantId/tickets/take-ticket" component={TakeTicket} />
        <Route path="/merchant/:merchantId/tickets/:ticketId" component={TicketStatus} />
    </Router>
), document.getElementById("app"))

如何才能正确加载页面并执行bundle.js文件？

Answer 1

所以，我能够接近一个可行的答案。它仍然不适用于/路径，但我添加了/home路由，这对我来说效果不错。

nginx.conf：

# Replace /usr/local/etc/nginx/nginx.conf with this. This is the
# default location for Nginx according to 'nginx -h'
worker_processes 1;
error_log /usr/local/var/log/nginx/error.log;

events {
  worker_connections  1024;
}

http {
  # This should be in the same directory as this conf
  # e.g. /usr/local/etc/nginx
  include       mime.types;
  default_type  application/octet-stream;

  # Note this log_format is named 'main', and is used with the access log below
  log_format   main '$remote_addr - $remote_user [$time_local]  $status '
    '"$request" $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile        on;
  keepalive_timeout  65;

  upstream areasetservice {
    server localhost:9084;
  }

  upstream areasetui {
  server localhost:3000;
  }

  # Without this I got this error: 'upstream sent too big header
  # while reading response header from upstream'
  proxy_buffer_size   128k;
  proxy_buffers   4 256k;
  proxy_busy_buffers_size   256k;

  server {
      listen 80;
      server_name localhost;
      access_log /usr/local/var/log/nginx/my_site.local.access.log  main;
      error_log /usr/local/var/log/nginx/my_site.local.error.log error;


      location / {
          proxy_redirect off;
          proxy_pass         http://areasetui;
          index /index.html;
      }

      location /services {
      rewrite ^/services(.*) /$1 break;
          proxy_pass         http://areasetservice;
      }
  }
}

React路由器......

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';
import Welcome from './welcome';
import Area from './Area';
import CreateArea from './create-area';
import Takemap from './take-map';
import MyMapStatus from './map-status';
require('bootstrap/dist/css/bootstrap.css');
// /* globals document, window */
//
// const { pathname, search, hash } = window.location
// const location = `${pathname}${search}${hash}`

render((
    <Router history={browserHistory}>
        <Route path="/" component={Welcome}/>
        <Route path="/home" component={Welcome} />
        <Route path="/Area" component={CreateArea}/>
        <Route path="/Area/:AreaId" component={Area}/>
        <Route path="/Area/:AreaId/maps/take-map" component={TakeMyMap} />
        <Route path="/Area/:AreaId/maps/:mapId" component={MyMapStatus} />
    </Router>
), document.getElementById("app"))

nginx try_files和react-router始终提供索引页面

1 个答案: