服務的節點在本地反應但不在heroku上工作

Question

我制作了一個簡單的create-react-app應用程序和一個node.js express服務器端。 在本地這可以工作（服務器提供ui並執行api），但是當部署到heroku時，僅提供UI（任何API調用均獲得503代碼）

App.js

// Routes

// works both locally and on heroku
app.get('/ui', (req, res) => {
  res.sendFile(path.resolve(__dirname,'build','index.html'));
});

// works only locally
app.use('/users',users);
app.use('/pledge',pledge);

反應路由器

 <ThemeProvider theme={theme}>
                <div>
                    <Router history={history}>
                        <div>
                            <Route path={'/ui/'} component={Header}/>
                            <Route exact={true} path='/ui/welcome' component={Welcome}/>
                            <Route exact={true} path="/ui/login" component={Login}/>
                            <Route exact={true} path="/ui/help" component={Help}/>
                            <Route exact={true} path="/ui/dashboard" component={DashBoard}/>
                            <Route exact={true} path='/ui/logout' component={Logout}/>
                            <Route exact={true} path='/ui/pledge' component={Pledge}/>
                            <Route exact={true} path='/ui/buckets' component={Bucket}/>
                            <Route exact={true} path='/ui/add' component={AddStuff}/>
                            <Route exact={true} path='/ui/motion' component={MotionInput}/>
                            <Route exact={true} path='/ui/status' component={Status}/>
                        </div>
                    </Router>
                </div>
            </ThemeProvider>

沒有服務器端渲染。 API的示例：

app.post('/usersAdd',(req, res) => {

  let newUser = new User(req.body);
  newUser.save((err) => {
    if (err)
      return res.send(500, {error: err});

    return res.send("successfully saved");
  });
});

API調用

export function getUsers() {
    return new Promise((resolve, reject) => {
        axios.get(serverProps.server + serverProps.getUsers, {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        })
            .then(resolve)
            .catch(reject);
    });
}

Answer 1

這是因為在部署時，在路由/users它將查找名為users.html的任何文件，但找不到該文件，因此返回503。您可以通過替換所有app.get調用將所有路由重定向到index.html來進行app.get與：

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

在這里看看。 看看是否可行。