同时运行 Node 和 React答案

【问题标题】：Running Node and React concurrently同时运行 Node 和 React
【发布时间】：2021-07-01 07:04:52
【问题描述】：

我正在制作一个 MERN 应用程序，但在连接/运行节点和反应服务器时遇到了一些问题。

根包.json

{
  "name": "server",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon server/server",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm start\" \"npm run client\""
  },
  "dependencies": {
    "async": "^3.2.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "dotenv": "^10.0.0",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "mongoose": "^5.13.0",
    "morgan": "~1.9.1",
    "populatedb": "^1.0.0"
  },
  "devDependencies": {
    "concurrently": "^6.2.0",
    "nodemon": "^2.0.8"
  }
}

客户端代理：

"proxy": "http://127.0.0.1:5000",
"secure": false

主服务器文件：

require('dotenv').config();

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

const mongoose = require('mongoose');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// set up mongoose connection
const mongoDB = process.env.DB_STRING;
mongoose.connect(mongoDB, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:' ));
console.log('Connected');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

if(process.env.NODE_ENV !== 'development') {
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
  });
}

const PORT = process.env.PORT || 5000

//Express js listen method to run project on http://localhost:5000
app.listen(PORT, console.log(`App is running in ${process.env.NODE_ENV} mode on port ${PORT}`))

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

我正在使用“npm run dev”命令来启动服务器。我收到一条错误消息“代理错误：无法将请求/用户从 localhost:3000 代理到 http://127.0.0.1:5000"。我尝试将代理更改为 0.0.0，并将脚本文件更改为：

"start": "node ./bin/www",
"devstart": "nodemon ./bin/www",
"client": "npm start --prefix client",
"dev": "concurrently \"npm start\" \"npm run client\""

但它仍然不起作用。我已经尝试了一些我发现的其他解决方案，但无法正确解决。

这也是我的测试反应文件：

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState([]);
  const getData = async () => {
    const res = await axios.get("/users");
    setUsers(res.data);
  };

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

  return (
    <div>
      {users.map((u) => (
        <h4 key={u._id}>userName : {u.full_name}</h4>
      ))}
    </div>
  );
};

export default App;

这也是我的文件夹结构，如果它是相关的任何机会

【问题讨论】：

标签： javascript node.js reactjs concurrency mern

【解决方案1】：

在尝试了更多解决方案来解决问题后，有效的是：在一个终端选项卡中运行nodemon app.js 在第二个终端选项卡中运行 npm start --prefix client。

并发模块可能有问题，因为它正在工作。

【讨论】：