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

Question

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

这是文件

client 文件夹是前端（React）。 App.js 在 Node 中是

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;

App.js 在 React 中是

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 上部署？

Answer 1

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

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

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

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

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

第 5 步：彻底测试并发布

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

How to connect and deploy React app with Node js backend?

web-deployment

node.js

reactjs

mern