node.js - 两个独立的 Heroku(Node 后端和 React 前端)之间的通信？

Question

我正在创建的应用程序使用 MERN 堆栈(MySql、Express、React、Node)。前端和后端分别存储在 2 个独立的 Githubs 存储库中，并托管在 2 个独立的 Heroku 实例上。前端和后端都成功部署到 Heroku。

问题是如何让前端和后端相互通信？用户应该从调用后端的前端 Heroku 开始，还是应该从后端开始？

我尝试将前端代理地址设置为后端的heroku链接，但显然这个代理地址仅在开发环境中使用。我尝试将服务器文件添加到前端，这消除了“无效的主机 header ”错误，但没有解决通信问题。

这是前端package.json:

{
  "name": "healthy-front-end",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "express": "^4.17.1",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.24.0",
    "react": "^16.8.6",
    "react-datepicker": "^2.8.0",
    "react-dom": "^16.8.6",
    "react-modal": "^3.9.1",
    "react-moment": "^0.9.2",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },
  "proxy": "http://localhost:3001",
  "eslintConfig": {
    "extends": "react-app"
  }
}

这是后端server.js:

require('dotenv').config();

const express = require('express');
const app = express();
const path = require('path');
const env = process.env.NODE_ENV || 'development';
const reactConfig = require(path.join(__dirname, '/config/config.static.json'))[env];
const PORT = process.env.PORT || 3001;

// Define middleware here
app.use(express.static(path.join(__dirname, reactConfig))); // serving react files
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());

// Serve up static assets
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}

// Routes
require('./controllers/routes')(app);

// Start the API server
app.listen(PORT, () =>
  console.log(`🌎  ==> API Server now listening on PORT ${PORT}!`)
);

这是带有前端 url 的 config.static.json 文件:

{
  "development": "client/public",
  "production": "https://healthy-people-front-end.herokuapp.com/"
}

这是添加了产品 url 的 config.js 文件:

let config = {
    local: {
        mysql:{
            url: process.env.DB_URL,
        },
        apiKeys:{}
    },
    prod: {
        mysql:{
            url: process.env.JAWSDB_URL,
        },
        url: 'https://healthy-people-front-end.herokuapp.com/',
        apiKeys:{}
    }
};

module.exports = config[process.env.APP_ENV || 'local'];

这是后端package.json:

{
  "name": "healthy-back-end",
  "version": "1.0.0",
  "description": "API for HealthMate App",
  "main": "server.js",
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:prod": "node server.js",
    "start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
    "dev": "concurrently \"npm start\" \"npm run client\"",
    "client": "cd ../HealthMate-frontend && npm run start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^4.1.2",
    "cors": "^2.8.5",
    "dotenv": "^8.1.0",
    "express": "^4.17.1",
    "hashpass": "0.0.0",
    "mysql": "^2.17.1",
    "nodemon": "^1.19.1",
    "uuid": "^3.3.2"
  }
}

如何让两端相互通信？非常感谢任何帮助。

Answer 1

我不喜欢 heroku，但我知道，您需要的是一个反向代理(如 nginx)，它将您的静态流量重定向到您的前端 为 dist 文件夹提供服务，而您的 后端 为您的 API 端点提供服务。

或者，您还可以使用 express.static 在 express 应用内提供 dist 文件夹。然而，您需要想出一种方法来使前端构建在您的后端中可用。如果您将前端发布到 npm，您只需将其添加为依赖项即可。