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

Posted 2021-03-29

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

我已经四处询问并且人们声称使用express中间件将从React应用程序构建的文件作为静态文件提供。我不确定这是什么，我对它的所有尝试都导致应用程序错误。我不太确定我是否需要托管构建的文件

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

这是我目前正在使用（可能是不正确的）来提供我构建的静态文件。

答案

当您运行create-react-app构建脚本时，您将获得一个构建文件夹。这是您要告诉快递静态服务的文件夹。然后你有一个捕获所有路由处理程序，它将始终发送回构建文件夹中的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路径，直到您当前所在的文件，然后您可以使用构建文件夹的相对路径。