【问题标题】:How to create production build folder in react?如何在反应中创建生产构建文件夹?
【发布时间】:2020-10-16 15:55:33
【问题描述】:
我目前正在使用 react 作为前端和 node js 作为后端的网站。但是,我不知道如何将其上传到实时服务器。根据我自己的研究,我发现我必须创建一个构建文件夹。在详细讨论我的观点之前,我想解释一下我是如何设置文件夹的。所以基本上我已经创建了一个文件夹(文件夹的 FRONTEND 名称),其中包含所有反应代码并且就在 FRONTEND FOLDER 之外,我已经创建了 server.js 以及包 JSON 等。我是否必须为前端创建一个构建文件夹和一个单独的后端构建文件夹?或者有没有办法为两者创建一个构建文件夹?另外,我同时使用 nodemon 运行 react 和 node js。如果有人能给我一个想法,我将不胜感激。
谢谢
【问题讨论】:
标签:
html
css
node.js
sql-server
reactjs
【解决方案1】:
有很多方法可以做到这一点,但对于处理 API 请求并且还提供前端文件的简单节点后端,您确实有正确的设置。假设您正在提供 SPA 或简单站点,您只需将节点配置为从 FRONTEND 文件夹提供静态文件,并默认为 FRONTEND/index.html(或任何您的应用页面)。
查看这个简单设置的绝佳示例:https://daveceddia.com/deploy-react-express-app-heroku/
如果您使用的是 express,您的代码可能如下所示:
// 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 在起点运行,并为任何文件(即 app.get(''* 部分)设置路由以指向您的 react 文件夹的应用程序文件,位于 build 文件夹中。
您的 react 应用程序的开发版本不会用完构建文件夹,因此在您上传所有内容之前,您将运行 npm run build 以生成您网站的生产版本。当然,如果您使用的是 heroku 之类的服务,最好上传文件并让服务器运行 react 构建,但它应该可以工作。