如何使用 React Hooks 将 React.js 与后端一起使用，以及如何使用 heroku 部署它？

Question

我想使用 React Hooks 将 React 前端框架与我的后端 express.js 和 EJS 连接起来。但是在 express 中，我们在向我们的服务器发出请求时使用 app.get()，而我们使用 npm start 和 React 在 localhost 上启动我们的服务器。如何将它们连接起来，正确和准确的方式是什么，我需要掌握哪些知识，然后如何使用 Heroku 部署它们？？

Answer 1

• 第 1 步：创建 Express 服务器

在项目的根目录中，创建一个名为“server”的新文件夹（例如），并在其中添加一个名为“server.js”的文件。

我用来创建服务器的工具叫做 Express，它是使用 Node.js 创建 Web 服务器的好工具。为了学习这个工具，你可以通过网络上的几十个教程，但在我们的例子中，你只需要编写几行代码来生成你自己的服务器。

让我们开始吧！

1. 安装最新版本的 Express。

npm install express --save

1. 导入 Express，并创建一个新的 Express 实例。

const express = require('express');
const app = express();

1. 告诉 Express 提供公用文件夹和其中的所有内容。

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');
app.use(express.static(publicPath));

基本上，我们传入路径的所有部分，然后 path.join 将它们放在一起。然后将结果传递给 app.use(express.static())，以便 Express 知道要提供哪些文件。

4. 通过告诉它使用哪个端口来启动服务器。我在本地环境中使用端口 3000；但是，Heroku 会在部署后为您的应用分配一个端口，因此应涵盖这两种情况。

const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const publicPath = path.join(__dirname, '..', 'public');
app.use(express.static(publicPath));
app.listen(port, () => {
   console.log(`Server is up on port ${port}!`);
});

5. 确保提供您的 index.html 文件，以防用户请求当前不在公用文件夹中的资源。

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get('*', (req, res) => {
   res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
   console.log('Server is up!');
});

此时，如果一切顺利，您应该能够在本地测试您的服务器，以确保一切设置正确。然后，您可以继续在 Heroku 上进行实际部署。

为此，您只需要通过运行 npm run build 来创建您的生产版本。然后转到您的终端并运行 node server/server.js，它应该会启动您的服务器，使您的应用程序可以在 http://localhost:3000 上使用。

• 第 2 步：在 Heroku 上部署

1. 如果您还没有 Heroku 帐户，请创建一个 here。
2. 同样，如果您还没有这个，请安装 heroku-cli。更多详情请点击此处。
3. 转到您的终端，通过运行 heroku login 并在出现提示时输入您的凭据来登录 Heroku。
4. 通过在终端中运行以下命令来创建您的 Heroku 应用程序（当然，将 my-app 替换为您自己的应用程序的名称）。

heroku create my-app

此时，您的应用程序应该有两个 Git 遥控器：一个是原始的，另一个是由 Heroku 创建的。为了检查这一点，只需运行git remote。

5. 当 Heroku 启动您的应用程序时，它将尝试在您的 package.json 中运行启动脚本。因此，该脚本应改为：

"start": "node server/server.js"

6. 将您的代码推送到 Heroku 远程存储库。

git push heroku master

就是这样！你的 React 应用现在应该部署到 Heroku！

您可以通过运行heroku open直接从终端打开它。