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

Question

我正在尝试部署我的MEAN应用。在heroku或其他地方进行此操作之前，我正在测试生产模式。当我在两个不同的端口上分别启动Node和Angular时，一切都在“开发模式”下工作。在生产模式下，我无法访问后端API。

使用环境变量（见下文），我在/ dist中有Node.js / Express服务器的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链接。

在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(..中，但是也许这是我在Angular中使用的API的网址中的问题（我应该以某种方式尝试使用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')); 
  });
}