React 前端连接到我计算机上的开发服务器,而不是 Azure VM 上的节点服务器,为什么使用 localhost

时间:2021-05-27 16:46:30

标签: node.js reactjs azure express

我有一个 React 前端和带有 Express 服务器的 Node。当我在我的计算机上构建并运行它时,一切正常。当我在我的 Azure Ubuntu VM 上构建和运行它时,服务器成功启动并且它托管 React 前端,我可以毫无问题地访问它。但是当它尝试访问节点服务器时,我在控制台中得到一个“net::ERR_CONNECTION_REFUSED”。然后我注意到,如果我的服务器在我的计算机上运行,​​则托管在 Azure VM 上的 React 应用程序将访问我本地计算机上的服务器,而不是 Azure VM 上的服务器。

那么,如何让托管在虚拟机上的 React 应用正确指向托管它的服务器/虚拟机?

应用程序的文件结构为:

>App Root
  >client
     >build
     >public
     >src
        >components
        >reducer, assets, middleware, services
         App.js
         http-common.js
         index.js
      package.json
  >server
     >config, controllers, models, routes
   package.json
   server.js

server.js

const bodyParser = require("body-parser");
const cors = require("cors");
const morgan = require('morgan');
const path = require('path');


const app = express();
app.use(cors());

app.use(bodyParser.json());
app.use(express.static(__dirname + '/client/build'));
app.use(morgan('dev'));

app.use(bodyParser.urlencoded({ extended: true }));

const db = require("./server/models");
db.sequelize.sync();

require("./server/routes/h.routes")(app);
require("./server/routes/p.routes")(app);
require("./server/routes/user.routes")(app);

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, '/client/build/index.html'), function(err) {
    console.log('In sendFile of get /*')
    if (err) {
      console.log('error: ', err)
      res.status(500).send(err)
    }
  })
})

const port = 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));

服务器包.json

  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "start:dev": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "morgan": "^1.10.0",
    "mysql": "^2.18.1",
    "mysql2": "^2.2.5",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "sequelize": "^6.6.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
  "proxy": "http://localhost:5000"
}

http-common.js

export default axios.create({
  baseURL: "http://localhost:5000/api",
  headers: {
    "Content-type": "application/json",
  },
});

客户端 package.json

  "name": "tissue-screener",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dotenv": "^8.2.0",
    "msal": "^1.4.10",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "../server.js",
  "proxy": "http://localhost:5000"
}

1 个答案:

答案 0 :(得分:0)

我想出了答案,并决定在这里分享,以防其他人犯和我一样的愚蠢错误。

http-common.js

 AttributeError: 'Bot' object has no attribute 'run_daily'

就是这样。只需要从 axios.create 中删除“http://localhost:5000”,让 package.json 中的代理设置完成它的工作。