Angular CLI 添加快速服务器

Question

我正在使用 Angular CLI，另外我添加了一个包含 server.js 文件的服务器文件夹。

1) 我在 src 文件夹中创建了文件夹服务器

2) npm install express --save 添加了 express 依赖项

3) 在服务器文件夹中创建 server.js 文件

const express = require('express');

var app = express();  
var staticRoot = __dirname;  

app.set('port', (process.env.PORT || 3000));  

app.use(express.static(staticRoot));

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

app.listen(app.get('port'), function() {  
    console.log('app running on port', app.get('port'));
});

4) 我的 index.html 文件与 Angular CLI 创建的路径相同

->src->index.html

那么我的问题是，在服务器 express 服务器上运行我的应用程序的下一步是什么？

我还可以将节点 server/server.js 添加为脚本以同时运行服务器和客户端吗？在 ng build 之后，我没有在 dist 文件夹中获得 server.js 文件？

Answer 1

您应该将静态文件放在公共目录中，并使用来自 NodeJS 路径模块的path.join()。您将能够在那里正确处理路径。

查看以下链接：

res.sendFile absolute path

https://scotch.io/tutorials/use-expressjs-to-deliver-html-files

Answer 2

您引用的 index.html 在构建过程中使用，而不是在本地使用。作为一个独立的 Angular 应用程序，ng serve 默认会在 localhost:4200 上运行 Angular。要使其指向您的后端服务器，您可以 use a proxy 将 Angular 请求转到 /api 重定向到您在 localhost:3000 上的服务器。在本地，您只需分别运行服务器和 Angular 应用程序。

在生产环境中，您需要从/dist 目录提供静态文件。您的服务器必须检查它是否在生产中运行，并使用 path.resolve 提供文件：

const path = require("path");
const express = require('express');
const app = express();  

app.set('port', (process.env.PORT || 3000));
app.set('env', (process.env.NODE_ENV || "local"));

if (app.get('env') === 'production') {

    // the relative path from src/server/server.js
    const staticRoot = path.resolve(__dirname, '../../dist');

    app.use(express.static(staticRoot));
    app.get('/', function(req, res) {
       res.sendFile('index.html', { root: staticRoot });
    });
}

app.listen(app.get('port'), function() {  
    console.log('app running on port', app.get('port'));
});