在生产中部署 ReactJS 应用程序（使用 nodeJS 后端）

Question

我们的项目现在结束了，我们只有两周的时间来回馈我们大学最后一年的学习项目。我们的老师告诉我们，现在开发阶段已经结束，我们必须在生产阶段部署它。

我们使用 ReactJS 作为前端（托管在 localhost://3000），使用 NodeJS 进行 server/database 管理（托管在 localhost://3004）。

到目前为止，我已经对如何部署它做了一些研究（老师说理想情况下它是一个我们可以插入网页的 zip，就像 html 一个，它会起作用）。

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

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

提前致谢！

Answer 1

要使用 cli create-react-app 部署 React 应用程序构建，首先需要在 package.json 中设置主机，因此在 package.json 中添加了这一行

"homepage":"http://localhost/" ,assuming you will host your app on the root directory of your webserver

你的 package.json 看起来像这样

{
  "name": "nameofyourapp",
  "version": "0.1.0",
  "private": true,
  "homepage":"http://localhost/",
  "dependencies": {
    .....
  },
  "scripts": {
  ......
  }
}

然后在你的应用程序文件夹中运行这个命令

npm run build

然后复制你的build文件夹里面的东西，然后粘贴到你服务器的根目录你最终会得到这样的文件

httdocs //root directory of your webserver
  |
  |-static
  |
  |-index.html
  |-serviceworker.js

之后你就不能从你的浏览器访问你的网络服务器了：http://localhost/

Answer 2

我假设你使用 create-react-app 来生成你的 React 项目。我的文件夹结构如下：

客户端（这是我的 React 应用程序）
配置
控制器
路线
型号
index.js（快递应用在index.js）
package.json

按照我用来将我的应用程序部署到 Heroku 的步骤：

在 package.json 中，将此行添加到脚本 "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client".
然后在脚本后添加这个"engines": { "node" : "[your node version]" }。

在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"));
  });
}

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

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

希望你能成功！

Answer 3

在 2019 年，这对我有用：

在 node.js 服务器中：

app.use('/react',   express.static(path.join(__dirname, '../client/build')));

在package.json反应中

http://localhost:server-port/client

然后在浏览器中输入

http://localhost:server-port/client .

你现在应该可以看到 React 主页了。希望对某人有所帮助。

在生产中部署 ReactJS 应用程序（使用 nodeJS 后端）

Deploying ReactJS application in production (with nodeJS backend)

deployment

node.js

web

reactjs

webpack