Question

我正在用React和Express做一些测试。最终目标是让Express连接到Mysql数据库并从中获取数据。

我了解React和Express的运作情况如何，经过几次尝试，我已经能够使用React应用从Express获取数据。通过遵循Room在端口3000上运行React，在端口8080上运行我的server.js来完成。

现在让我在本地工作使我感到困惑的是，我应该如何在构建我的应用程序后使其工作。

我构建了它并上传了它以检查它是否有效，但是当然没有。

this guide

如果您查看控制台，将会看到它无法联系/ ping。

仅在本地表达作品吗？我很难解决这个问题。

这是我的脚本，以防万一：

App.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  componentDidMount() {
    fetch('/ping')
      .then(response => response.json())
      .then(posts => console.log(posts))
  }

  render() {
    console.log(process.env.PORT)
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

server.js：

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/ping', function (req, res) {
 return res.send(JSON.stringify({ a: 1 }));
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

编辑：我写错了标题，现在改正了。

Answer 1

前端： 通常，在React或Angular中，您只能使用现有的环境变量，并且只能全局设置ur API，因此即使您更改了后端端口，更改一行代码也会使ur app再次工作

scripts: {
    "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js",
    "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js"
  }

后端：如果要在IIS服务器上部署应用程序，则将成为后端部分，您需要做很多工作；如果您使用一些Ubuntu，它将使部署变得容易，并且您无需更改上面粘贴的Express Code中的任何一行。如果是Ubuntu，则可以只运行node index.js并使用一些PM2软件包在后台运行该应用程序

https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/webapi/execute-batch-operations-using-web-api

希望您的疑虑得到解决，否则请在下面发表评论

构建Express和React

App.js：

server.js：

1 个答案: