如何使用 nginx/cherrypy 和我当前的 reactjs 应用程序配置 react-router

Question

我有一个由 nginx 提供的工作网络应用程序，后端使用 cherrypy，前端使用 ReactJS。

应用程序越来越大，所以我想使用 react-router 来提供对带有 URL 的页面的快速访问。例如，我希望 my.domain.name/user 将在我的应用程序中获得管理用户的部分。

我的单曲 index.html 包含这样的 js 包： <script src="/js/bundle.js"></script>

直到现在，我的应用程序都是通过渲染 AppMain 开始的。现在，我创建了一个 NoMatch class 并将它们都放入了一个反应路由器中，如下所示：

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={AppMain}>
            <Route path="*" component={NoMatch}/>
        </Route>
    </Router>
), document.getElementById('main-central'));

尝试这个时效果很好。使用 http://my.domain.name 给了我以前的应用程序。但实际上，现在尝试 http://my.domain.name/whatever 应该会渲染 NoMatch 正在渲染的内容。但是我得到的是 nginx 404 页面。

所以我认为需要 nginx 端配置，但可能不仅如此（这就是为什么我把整个故事都放在上面）。

Nginx 配置（http 部分）如下所示：

upstream app_servers {
    server 127.0.0.1:9988;
}

# Configuration for Nginx
server {

    location / {
        root /var/www;
        index index.html;
    }

    # Proxy connections to the application servers
    # app_servers
    location /api {
        proxy_pass         http://app_servers/api;
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
    }
}

如您所见，cherrypy 正在获取所有 /api/* 路径。

我在 /css、/img 等目录下有静态内容，我希望得到正确的服务。

所以我需要一切不是静态的，也不是 /api 去 js/bundle.js

如何在 nginx 中配置它？我是否需要在 cherrypy 或 javascript 中做一些不同的事情？

提前致谢。

Answer 1

找到我自己的答案...这是：

基本上 nginx 配置需要将 URL 重定向到 /index.html（当然不是我的 bundle.js）

在 nginx conf 中添加 try_files 可以解决这个问题：

location / {
    root /var/www;
    index index.html;

    try_files $uri $uri/ /index.html;
}

另外我修改了路由器的主界面：

ReactDOM.render(
    (<Router history={browserHistory}>
        <Route path="/" component={AppMainNewNav}>
            <Route path="users" component={UsersPage}/>
            <Route path="about" component={About}/>
        </Route>
        <Route path="*" component={NoMatch}/>
    </Router>)
    , document.getElementById('navbar'));

在 AppMainNewNav render() 中，我将导航修改为如下内容：

<nav>
    <ul role="nav">
        <li><Link to="/videos">Videos</Link></li>
        <li><Link to="/about">About</Link></li>
    </ul>
</nav>

如何使用 nginx/cherrypy 和我当前的 reactjs 应用程序配置 react-router

How can I configure react-router to with nginx/cherrypy and my current reactjs app

nginx

cherrypy

reactjs

react-router