Question

我目前正在网站上使用React作为前端，使用nodejs作为后端。但是，我不知道如何上传到实时服务器。通过我自己的研究，我发现必须创建构建文件夹。在详细介绍我的观点之前，我想解释一下如何设置文件夹。因此，基本上我已经创建了包含所有反应代码的文件夹（该文件夹的名称），并且就在FOLDTEND FOLDER的外部，我已经创建了server.js以及json包等。我是否必须为前端和后端的单独构建文件夹？还是有办法为两者创建一个构建文件夹？我也同时运行react和nodemon与nodemon。如果有人可以给我一个主意，我将不胜感激。

谢谢

Answer 1

有很多方法可以执行此操作，但是对于处理API请求且ALSO提供前端文件的简单节点后端，您确实具有正确的设置。假设您正在提供SPA或简单站点，则只需将节点配置为提供FRONTEND文件夹中的静态文件，并且默认为FRONTEND / index.html（或任何应用程序页面）。

请参见以下简单设置示例：https://daveceddia.com/deploy-react-express-app-heroku/

如果您使用快递，您的代码可能看起来像这样：

// Serve static assets
// The if statement is not necessary, it just makes it simpler
// for you to continue using your nodemon setup in development
// by only serving the static files in production.
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('FRONTEND/build'));
  app.get('*', (req, res) =>
    res.sendFile(path.resolve(__dirname, 'FRONTEND', 'build', 'index.html'))
  );
}

请注意，通常'FRONTEND'的名称类似于'client'，但是没有理由说FRONTEND不会真正起作用。

因此，您的nodejs在起点处运行，并为ANY文件（即 app.get（''**部分）设置一个路由，以指向您的react文件夹的应用文件，该文件位于build文件夹中。

您的react应用程序的开发版本不会用完build文件夹，因此在上传所有内容之前，您将运行 npm run build 来生成网站的生产版本。当然，如果您使用的是诸如heroku之类的服务，则最好上传文件并让服务器运行react build，但是无论哪种方式都可以。

如何在React中创建生产构建文件夹？

1 个答案: