如何使用 Node js 后端连接和部署 React 应用程序？答案

【问题标题】：How to connect and deploy React app with Node js backend?如何使用 Node js 后端连接和部署 React 应用程序？
【发布时间】：2021-11-15 04:50:27
【问题描述】：

我已经在 MERN 堆栈中完成了我的第一个项目，但现在我正在努力将它部署到 hiroku。到目前为止，我在不同的端口上同时运行 react 和 node 代码。

这是文件

客户端文件夹是前端（React）。 Node 中的 App.js 是

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

const userRouter = require("./routes/userRoutes");
const cookieParser = require("cookie-parser");
const cors = require("cors");
const compression = require("compression");

app.use(cors());

app.use(cookieParser());

app.use(express.urlencoded({ extended: true, limit: "10kb" }));
app.use(compression());

app.use("/api/v1/users", userRouter);
module.exports = app;

React 中的 App.js 是

import React from "react";
import "./App.css";
import Home from "./mainPages/home";
import Register from "./components/authentication/register";

import { Route, Switch } from "react-router-dom";

function App() {
  return (
    <div className="app">
      
      <Switch>
        <Route
          exact
          path="/"
          component={() => (<Home/>)} />
        <Route
          exact
          path="/register"
          component={() => (<Register/>)} />
        
      </Switch>
    </div>
  );
}

export default App;

来自客户端的注册数据是这样发送的

axios({ method: "POST", url: "http://localhost:3000/api/v1/user/register", data: data, headers: header });

如何连接客户端和服务器以部署到 hiroku？

【问题讨论】：

标签： node.js reactjs web-deployment mern

【解决方案1】：

最好将客户端文件夹放在服务器文件夹之外。

第 1 步：构建您的 React 应用并取出输出文件夹（dist 文件夹）中的内容

第 2 步：在任何静态托管服务中部署您的前端，例如（AWS S3 或任何托管服务提供商）

第 3 步：在 Heroku 或任何节点托管服务提供商中部署您的后端 API

第 4 步：更新前端的 AJAX 端点。

第 5 步：彻底测试和发布

【讨论】：