node.js - 在生产环境中部署 ReactJS 应用程序(使用 NodeJS 后端)

Question

我们的项目现已结束，我们只有两周的时间将项目归还给我们大学最后一年的学习。我们的老师告诉我们，现在开发阶段已经结束，我们必须将其部署到生产阶段。

我们使用 ReactJS 作为前端(托管在 localhost://3000)，使用 NodeJS 进行服务器/数据库管理(托管在 localhost://3004)。

到目前为止，我已经做了一些关于如何部署它的研究(老师说，理想情况下，它是一个我们可以插入到网页中的 zip，就像 html 一样，而且它会工作)。

到目前为止我还没有做到这一点。很多人建议使用“webpack”来管理它，但我们一开始就没有配置它，因为我们对reactJS一无所知，而且我不知道我们现在是否可以做到这一点。我已经阅读了教程等，并尝试了 NODE_ENV 的一些操作，但到目前为止我仍然遇到错误。

有人可以帮助我和我的队友吗？

提前致谢!

Answer 1

我假设您使用 create-react-app 来生成您的 react 项目。我的文件夹结构是这样的:

• 客户端(这是我的 react 应用程序)
• 配置
• Controller
• 路线
• 型号
• index.js(express 应用程序位于index.js 中)
• package.json

我使用以下步骤将应用程序部署到 Heroku:

1. 在 package.json 中，将此行添加到脚本 “heroku-postbuild”: “NPM_CONFIG_Production=false npm install --prefix 客户端 && npm run 构建--前缀客户端”。

2. 然后在脚本后添加此 "engines": { "node": "[your Node version]"}。

3. 在index.js中，在路由设置后添加以下代码

   if (process.env.NODE_ENV === "production") {
     app.use(express.static("client/build"));
     const path = require("path");
     app.get("*", (req, res) => {
       res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
     });
   }
   

4. 我假设您使用 git 进行版本控制并且已经安装了 heroku。打开你的终端，然后heroku登录->heroku 创建 -> git push heroku master。如果您没有收到任何错误， 您已成功部署您的应用程序。

这是我的 GitHub https://github.com/dnp1204/instagrom我将我的应用程序部署到了 Heroku。我希望它能给您一些如何做到这一点的想法

希望你能成功!