React 项目的最终部署

Question

我是 NodeJS 的新手，来自 Java 世界，但在过去的 3 个月里，我做了相当不错的开发。 我在我的第一个项目中使用 ExpressJS 和 ReactJS，现在在开发过程中，我们使用 2 个 http 服务器 1 用于 ExpressJS 后端应用程序，另一个用于 ReactJS 前端应用程序。

现在这是我们必须在生产环境中部署的方式，或者我们可以将其组合为 1 个应用程序并部署在 1 个监听端口 80 的 http 服务器上。

问候

Answer 1

将生产 React 应用部署到 Heroku

1.创建一个 React 应用

npm create-react-app heroku-deploy-test
cd heroku-deploy-test

2.创建一个 Express JS 服务器来为您的生产构建提供服务

//server.js
const express = require('express');
const path = require('path');

const app = express();

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

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.PORT || 8080;

app.listen(port);

在您的 package.json 文件中，将启动脚本更改为以下内容：start:
"node server.js"

3.部署到 Heroku

如果您还没有 Heroku 帐户，请在此处创建一个：https://signup.heroku.com/ 在您的命令行中，运行以下命令：heroku login

您需要在终端中输入您的 heroku 凭据。成功输入 heroku 凭据后，在终端中运行以下命令以创建一个新的已部署应用：

heroku create heroku-deploy-test

（将 heroku-deploy-test 替换为您自己的应用名称。）

然后在终端中使用以下 git 将您的应用构建推送到 heroku：

git init 
git add . 
git commit -m "initial commit"
heroku git:remote -a heroku-deploy-test
git push heroku master

这些命令安装您的依赖项，初始化 git，并将您的存储库连接到 Heroku 托管的远程存储库。

注意： 如果你在运行heroku create [app-name]之前已经初始化了你的git，那么你就不需要运行heroku git:remote -a [app-name].

运行heroku open，您的开发应用程序将在您的默认浏览器中打开。如果你想要一个生产版本，我想你已经知道该怎么做了。 - > 为您的 React 应用创建生产版本。创建一个适当的.gitignore 文件，以便只部署相关文件。

重要提示：如果您已经有一个.gitignore 文件，请确保该行不在其中/build :)

我还建议阅读此blog！祝你好运！