node.js - 如何使用节点/快递正确服务 Angular 6/7 应用程序？
问题描述
我正在开发一个 Angular 7 应用程序，现在是时候开始使用 node / express 为其提供服务了。我的 index.html 位于 src 目录中：
my_app/src/index.html
这是我的 server.js：
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
const request = require('request');
var mongoose = require('mongoose');
var mongoDB = 'mongodb://127.0.0.1/automon';
mongoose.connect(mongoDB);
mongoose.Promise = global.Promise;
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
var Schema = mongoose.Schema;
var MonitoringInfoSchema = new Schema({
monitoring_target: String,
monitoring_description: String,
resource_name: String,
monitoring_method: String,
monitoring_routine: String
});
var MonitoringResultsSchema = new Schema({
monitoring_target: String,
monitoring_method: String,
monitoring_description: String,
resource_name: String,
monitoring_routine: String,
monitoring_result: String,
result_acknowledged: Boolean,
date_recorded: Date
});
var LastMonitoringResultsSchema = new Schema({
monitoring_target: String,
monitoring_method: String,
monitoring_description: String,
resource_name: String,
monitoring_routine: String,
monitoring_result: String,
result_acknowledged: Boolean,
date_recorded: Date
});
var MonitoringInfo = mongoose.model('MonitoringInfo', MonitoringInfoSchema );
var MonitoringResult = mongoose.model('MonitoringResult', MonitoringResultsSchema );
var LastMonitoringResult = mongoose.model('LastMonitoringResult', LastMonitoringResultsSchema );
const app = express();
//Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//Point static path to dist
app.use(express.static(path.join(__dirname, '.')));
setInterval(function () {
MonitoringInfo.find({}, function(err, docs) {
if (!err){
docs.forEach(function(item){
var single_doc = item._doc;
var monitoring_target = single_doc.monitoring_target;
var monitoring_description = single_doc.monitoring_description;
var resource_name = single_doc.resource_name;
var monitoring_method = single_doc.monitoring_method;
var monitoring_routine = single_doc.monitoring_routine;
switch (monitoring_method) {
///////////////// DAG Status /////////////////////////////////
case 'DAG Status': console.log("DAG Status is our monitoring method");
var queryString = 'http://localhost:5000/get_status' + '?target=' + monitoring_target + '&routine=' + monitoring_routine
+ '&description=' + monitoring_description + '&resource_name=' + resource_name + '&monitoring_method=' + monitoring_method;
request(queryString, { json: true }, (err, res, body) => {
if (err) { return console.log(err); }
console.log(body.url);
// console.log(body.explanation);
// return body
body.forEach(function(monitoringRecord){
var dag_id = monitoringRecord['dag_id'];
var target = monitoring_target;
var description = monitoring_description;
var method = monitoring_method;
var monitoringRoutine = monitoring_routine;
var resourceName = dag_id;
var date = Date.now();
var result = JSON.stringify(monitoringRecord);
console.log("Monitoring record: " + monitoringRecord["dag_id"] + " " +
monitoringRecord["date"] + " " + monitoringRecord["status"]);
//Here, we save the monitoring results to MongoDB history collection
var monitoring_result_model_instance = new MonitoringResult(
{ monitoring_target: target,
monitoring_method: method,
monitoring_description: description,
resource_name: resourceName,
monitoring_routine: monitoringRoutine,
monitoring_result: result,
result_acknowledged: false,
date_recorded: date
});
monitoring_result_model_instance.save(function (err) {
if (err) console.log(err);
else {
s=""
}
});
var latest_monitoring_result = {
monitoring_target: target,
monitoring_method: method,
monitoring_description: description,
resource_name: resourceName,
monitoring_routine: monitoringRoutine,
monitoring_result: result,
result_acknowledged: false,
date_recorded: date
};
var query = { 'resource_name':resourceName};
LastMonitoringResult.findOneAndUpdate(query, latest_monitoring_result, {upsert:true},function (err, doc) {
if (err) console.log(err);
else {
s=""
}
});
});
});
break;
//////////// PROCESS VERIFICATION ///////////////////////////////////
case 'Process Verification': console.log("Process Verification is our monitoring method");
var processVerificationQueryString = 'http://localhost:5000/process_verification' + '?target=' + monitoring_target + '&routine=' + monitoring_routine
+ '&description=' + monitoring_description + '&resource_name=' + resource_name + '&monitoring_method=' + monitoring_method;
request(processVerificationQueryString, { json: true }, (err, res, body) => {
if (err) { return console.log(err); }
console.log(body.url);
body.forEach(function(monitoringRecord){
var target = monitoring_target;
var description = monitoring_description;
var method = monitoring_method;
var monitoringRoutine = monitoring_routine;
var resourceName = monitoringRecord["resource_name"];
var date = Date.now();
var result = JSON.stringify(monitoringRecord["status"]);
console.log("Monitoring record: " + monitoringRecord["status"] + " " +
monitoringRecord["date"]);
//Here, we save the monitoring results to MongoDB history collection
var monitoring_result_model_instance = new MonitoringResult(
{ monitoring_target: target,
monitoring_method: method,
monitoring_description: description,
resource_name: resourceName,
monitoring_routine: monitoringRoutine,
monitoring_result: JSON.stringify({status: JSON.parse(result)}),
result_acknowledged: false,
date_recorded: date
});
monitoring_result_model_instance.save(function (err) {
if (err) console.log(err);
else {
s=""
}
});
var latest_monitoring_result = {
monitoring_target: target,
monitoring_method: method,
monitoring_description: description,
resource_name: resourceName,
monitoring_routine: monitoringRoutine,
monitoring_result: JSON.stringify({status: JSON.parse(result)}),
result_acknowledged: false,
date_recorded: date
};
var query = { 'resource_name':resourceName};
LastMonitoringResult.findOneAndUpdate(query, latest_monitoring_result, {upsert:true},function (err, doc) {
if (err) console.log(err);
else {
s=""
}
});
});
});
break;
//////////////// REST RESPONSE ////////////////////////////////
case 'REST Response': console.log("REST Response is our monitoring method");
var restResponseQueryString = 'http://localhost:5000/rest_response' + '?target=' + monitoring_target + '&routine=' + monitoring_routine
+ '&description=' + monitoring_description + '&resource_name=' + resource_name + '&monitoring_method=' + monitoring_method;
request(restResponseQueryString, { json: true }, (err, res, body) => {
if (err) { return console.log(err); }
console.log(body.url);
body.forEach(function(monitoringRecord){
var target = monitoring_target;
var description = monitoring_description;
var method = monitoring_method;
var monitoringRoutine = monitoring_routine;
var resourceName = monitoringRecord["resource_name"];
var date = Date.now();
var result = JSON.stringify(monitoringRecord["status"]);
console.log("Monitoring record: " + monitoringRecord["status"] + " " +
monitoringRecord["date"]);
//Here, we save the monitoring results to MongoDB history collection
var monitoring_result_model_instance = new MonitoringResult(
{ monitoring_target: target,
monitoring_method: method,
monitoring_description: description,
resource_name: resourceName,
monitoring_routine: monitoringRoutine,
monitoring_result: JSON.stringify({status: JSON.parse(result)}),
result_acknowledged: false,
date_recorded: date
});
monitoring_result_model_instance.save(function (err) {
if (err) console.log(err);
else {
s=""
}
});
var latest_monitoring_result = {
monitoring_target: target,
monitoring_method: method,
monitoring_description: description,
resource_name: resourceName,
monitoring_routine: monitoringRoutine,
monitoring_result: JSON.stringify({status: JSON.parse(result)}),
result_acknowledged: false,
date_recorded: date
};
var query = { 'resource_name':resourceName};
LastMonitoringResult.findOneAndUpdate(query, latest_monitoring_result, {upsert:true},function (err, doc) {
if (err) console.log(err);
else {
s=""
}
});
});
});
break;
//////////////////////////////////////////////////////////////////
default: console.log("");
}
});
// process.exit();
} else {throw err;}
});
//THIS IS WHERE YOU CONTROL THE ACTUAL FREQUENCY OF MONITORING CALLS
}, 10000);
// Catch all other routes and return the index file
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.get('/status', (rq, rs) => {
request('http://localhost:5000/get_status', { json: true }, (err, res, body) => {
if (err) { return console.log(err); }
console.log(body.url);
// console.log(body.explanation);
// return body
rs.send(body);
});
});
app.get('/monitoringresults', (rq, rs) => {
var results = [];
LastMonitoringResult.find({}, function(err, docs) {
if (!err){
docs.forEach(function(item){
results.push(item._doc);
});
rs.send(results);
} else {throw err;}
});
});
app.get('/allmonitoringresults', (rq, rs) => {
var results = [];
MonitoringResult.find({}, function(err, docs) {
if (!err){
docs.forEach(function(item){
results.push(item._doc);
});
rs.send(results);
} else {throw err;}
});
});
app.post('/monitoring_info', function(req, res) {
var monitoring_target = req.body.target;
var monitoring_description = req.body.description;
var resource_name = req.body.resourceName;
var monitoring_method = req.body.monitoring_method;
var monitoring_routine = req.body.monitoring_routine;
var model_instance = new MonitoringInfo({ monitoring_target: monitoring_target, monitoring_method: monitoring_method,
monitoring_description: monitoring_description, resource_name: resource_name, monitoring_routine: monitoring_routine});
model_instance.save(function (err) {
if (err) return handleError(err);
else {
res.sendStatus(201);
}
});
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3000';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
此 server.js 文件位于同一 src 目录中：
my_app/src/server.js
当我运行 node server.js 时，导航到
localhost:3000/
在 Chrome 中，我得到一个空白页。当我选择检查它时，我得到了这个：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coda - Angular 7 Admin UI Kit</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
</head>
<body>
<app>
<div class="overlay"></div>
<div class="loader loader-4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</app>
</body>
</html>
我怀疑，在我的 Angular 代码可以正确提供/呈现之前，还需要发生其他事情
为了渲染 Angular 7 应用程序，我需要做什么？
解决方案
这是我必须做的，以便从 node / express 为我的 Angular 7 应用程序提供服务：
1) run ng build
2) reloacte server.js up one level - to the root dir
3) change the following lines on server.js:
app.use(express.static(path.join(__dirname, 'dist')));
...
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
推荐阅读
- puppeteer - Puppeteer：在 headful 模式下无法截取整页截图
- apache-kafka - 如何在 ConsumerGroup 中设置 Zookeeper IP 地址而不是 Kafka-Host IP 地址？
- mysql - 如何从 Arduino 连接到数据库？
- elasticsearch - ElasticSearch 聚合优于聚合
- php - php多维数组通过多个键和值搜索
- salesforce - 字段更改时将附件从父对象复制到子对象
- java - 将 curl 命令转换为 RestTemplate
- c# - 我应该假设发件人可以为空吗？
- java - Bazel：如何构建使用 JNI 的 C++ 应用程序？
- android - Gradle 在运行 Android 检测时忽略 testProguardFile