生产中的 MEAN 应用程序：无法调用后端 API

Question

我正在尝试部署我的 MEAN 应用程序。在 heroku 或其他地方这样做之前，我正在测试生产模式。当我在两个不同的端口上分别启动 Node 和 Angular 时，一切都在 "development mode" 中工作。在生产模式下，我无法到达后端 API。

使用环境变量（见下文）我有 Node.js/Express 服务器 /dist 中的 Angular 编译代码。这些是 Node.js 代码的一些相关摘录：

const express = require("express");
const path = require('path')
const cors = require('cors');
const  mongoose = require('mongoose');

const app = express();
... //some non-relevant stuff eg passport, body-parser ...

//Load configurations
const config = require('./config/config.js');
// Load routes
const storeroutes = require('./routes/stores.routes.js');
//Use mongoose to connect to the stores DB in mongoDB

mongoose.connect(config.mongoDB, { useNewUrlParser: true });
mongoose.connection.once('open', () => {
    console.log('Connection to the MongoDB database established successfully!');
});
// CORS Middleware
app.use(cors());
...
// Static Folders (used by Node)
app.use(express.static(path.join(__dirname, 'views')));
app.use(express.static(path.join(__dirname, 'public')));

// Serve Angular
if (process.env.NODE_ENV == 'production') {
  app.use(express.static("../dist/"));
  app.use((req, res) => {
    res.sendFile(path.join(__dirname, '../dist/index.html')); 
  });
}

// Use routes
app.use('/', storeroutes)

app.listen(config.port);

config/config.js 只是导出环境变量.. 所以请相信我 NODE_ENV='production'、config.port=4000 和其他我不知道的不显示。

stores.routes.js 中的路由基本上是一个快速路由器，正如我所说，一切都在开发模式下工作。例如，在开发模式下，http://localhost:4000/stores 处的 API 显示在 mongoDB 数据库

上

当我启动 NODE_ENV=production node server.js 时，前端页面显示正确，但在后台调用服务器 API 失败，请参见屏幕截图。事实上，我无法导航到上面的 API link。

在我的 Angular 服务中，我按如下方式调用 API：

export class StoreService {
  uri:string = environment.node_url; //this is 'http://localhost:4000'
  // Fetches all documents.
  getAllStores() {
    return this.http.get(`${this.uri}/stores`);
  }
  ...
}

我怀疑问题出在 Node/Express 代码 app.use((req, res) => { res.sendFile(.. 中，但如果问题出在 url 到 API 中，我在 Angular（我应该尝试以某种方式使用 baseUrl 吗？）。

Answer 1

下面的代码强制所有路由到前端的 index.html:

app.use((req, res) => {
  res.sendFile(path.join(__dirname, '../dist/index.html')); 
});

我首先通过删除这些行使其工作。但是，更好的解决方案是将后端 API 置于之上，如下所示：

// Use routes for backend API
app.use('/', storeroutes)

// Serve Angular
if (process.env.NODE_ENV == 'production') {
  app.use(express.static("../dist/"));
  // Any request that is not the storeroutes above goes to Angular client
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../dist','index.html')); 
  });
}

生产中的 MEAN 应用程序：无法调用后端 API

MEAN app in production: cannot call backend API

routing

node.js

mean-stack

angular