⛴ 在生产环境中轻松部署 React 应用 😎

🍟 TL:DR：

如果我们直接通过开发环境（即直接提供应用程序，包括其源代码）来提供 React 应用程序服务非常简单，但如何将 React 应用程序作为捆绑的静态资产（在生产环境中）提供服务将是本文的重点。

如果有人大量使用像Create React App这样的工具（它就像魔法一样，在后台完成了所有繁重的工作），深入研究这些工具的使用可能会感觉相当繁琐。因此，我会尽量简化。

今天，我们将部署一个简单的 React 应用（使用 Node.js 后端）。最终的项目非常简单，可以作为你下一个生产环境应用的基础模板。

🏋 启动 Nodejs 项目

首先，我们将启动基本节点应用程序，它将作为我们的反应前端的后端。

npm init --y 

🍩 添加一些实用功能

现在，我们将安装一些软件包，例如 express、cors 和 dotenv。我使用 dotenv 来维护全局值，例如NODE_ENV或任何需要的值。

npm i express dotenv cors --save 

🚀 点燃服务器 🚀

现在，我们将创建一个简单的 index.js，它将作为客户端应用程序的 API。

//--------------------- imports ---------------------
const express = require("express");
require("dotenv").config();
const cors = require("cors");

//--------------------- Init App ---------------------
const app = express();
const PORT = process.env.PORT || 5000;

//--------------------- Serve Assets ---------------------
if (process.env.NODE_ENV === "production") {
  app.use(express.static("build"));
}

app.use(express.json());
app.use(cors());

app.get("/home", function (req, res) {
     res.status(200).json({
     status: true,
     data: "Backend Responded "
     })
})

app.listen(PORT, () => console.log(`Example app running on ${PORT}`));

这是一个非常简单的 Web 服务器，用于响应客户端。

现在，我们将在 package.json 中添加一个脚本，该脚本将在指定端口启动服务器。

我们稍后会根据客户构建的内容对其进行修改。

🎨创建前端应用程序

使用CRA （创建 React 应用）初始化 React 应用，或者你可以使用 Babel 和 Webpack 或任何你想用的工具（如果你愿意的话）自行配置。我更喜欢 CRA

在我们的后端项目目录中，初始化前端项目。

npx create-react-app frontend

过了一会儿，我们现在有了一个新的 React 应用程序，😱神奇的是😱它什么也不做（除了旋转一个巨大的蓝色 React 徽标）。

之后，修改前端项目的package.json内容，添加如下代码。

  "proxy": "http://localhost:5001"

这将使我们免于在 ajax 调用中多次输入 API URL，我们将在前端组件中编写这些 URL。

🛠 编写一个组件

在编写组件之前，我将安装axios（如果愿意或使用 fetch）用于后端通信。

cd front end
npm i axios

然后，创建一个用于测试和验证的基本组件。它将验证前端和后端之间的连接。

import axios from "axios";
import { useEffect } from "react";

function App() {
  const fetchData = async () => {
    try {
      let resonse = await axios("/home");
      if (resonse.status) {
        alert("hooray");
      } else {
        alert("OH ! Snap....");
      }
    } catch (err) {
      console.log("err ", err.message);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <p > Testing Deployment </p>
    </div>
  );
}

export default App;

此组件仅执行数据获取和警报抛出操作。这里，我们直接在 useEffect() 中执行 API 调用函数，以避免仅出于测试目的而编写额外的代码。

然后，在后端项目中添加脚本

    "client  " : "cd  frontend && npm run start"

该脚本将运行该项目，您将看到正常警报

🚚 部署内容

到目前为止，一切都很好。

现在，是时候使用静态资源服务来部署它了。目前有很多教程讲解如何在 Heroku 或 Varcel 等平台上发布这类项目。这些平台都相当不错。但是，这些平台在一定程度上比较友好。例如：

• Heroku 是免费的，但如果您的免费测功机在一段时间内未主动使用，它将被停用。与正常请求相比，重新启动处于休眠状态的测功机可能需要相当长的时间。*

为了避免这种情况，我们最终在付费服务器上为项目提供服务，我们应该以这种方式为应用程序提供服务。

为了进行部署，我们将生成静态文件包，这些文件将由 Nodejs 后端提供。我们已经在index.js中添加了相关的代码片段。

这样，无论何时我们在生产中使用它，它都会按预期工作

步骤 1 - 生成 Bundle

在后端项目的 package.json 中添加脚本，用于从 React 源代码构建静态资产

    "build" : "cd frontend && npm run build"

这将改变当前工作目录，之后，它将在前端项目中生成 /build 文件夹。

步骤 2 - 将 /build 目录放在根文件夹中

将构建目录移动到项目的根目录中。

mv ./build ../

步骤 3 - 将 NODE_ENV 设置为 production

之后，最后一步是将NODE_ENV （在 .env 文件中）的值更改/设置为“production”，表示我们处于生产模式并启用静态资产服务。

NODE_ENV = production

.env 文件的内容如下所示

PORT=5001
NODE_ENV=production

现在，访问网址

http://localhost:5001/home

您将收到警报响应，最终一切正常。

现在，如果我们在任何生产就绪的云环境中部署这个 Nodejs 项目，

• AWS EC2实例
• 数字海洋 Droplet
• 虚拟机

然后就可以正常工作了。最终的目录结构如下：

😎 最后的想法

这是使用 React 和 Nodejs 创建的全栈应用程序的其中一种服务方式。当我部署这类项目时，我找不到任何全面的指南，所以我决定自己写一个！

感谢阅读🙏