如何在Heroku上托管带有Node后端的React应用？

Question

我正在尝试在Heroku实例上托管使用create-react-app的React应用。 它具有来自Node后端的API调用，我也需要将其托管。

我问过周围，人们说使用express中间件将从React应用程序构建的文件作为静态文件提供。 我不确定这意味着什么，我的所有尝试都导致了应用程序错误。 我不太确定是否需要托管生成的文件

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('~/Developer/JavaScript/Vue/fffreact/build'));
}

这就是我当前正在使用（可能是不正确的）来服务于我构建的静态文件。

Answer 1

当您运行create-react-app构建脚本时，您将获得一个构建文件夹。 这是您要告诉Express静态服务的文件夹。 然后，您将获得一个“全部捕获”路由处理程序，该处理程序将始终发送回在build文件夹中找到的index.html 。 请参见以下示例。

if (process.env.PROD) {
    app.use(express.static(path.join(__dirname, './frontend/build')));

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

__dirname将获得FULL路径，直到您当前所在的文件为止，然后您可以从那里使用build文件夹的相对路径。