Question

我找不到适合我的解决方案。

我正在尝试使用Node.js实例创建一个简单的微服务架构。我不使用Dockerfile。主页微服务可以正确显示带有CSS，JS的html。网关微服务不会不加载CSS，JS（页面看上去很破损）。

目前我有2个微服务：

快速服务器，将index.html作为文件发送。它将正确加载包含资产（css，图像，javascript）的页面。我用过app.use(express.static('public'))。

主页：

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

app.use(express.static('public'))

app.get('/', (req, res) => {

    res.sendFile(path.join(__dirname+'/public/index.html'));
})

app.listen(3001, () => console.log('Homepage listening on port 3001!'))

快递服务器，它接收请求并希望将内容传递给用户。我正在尝试创建一个API网关来过滤流量（例如，通过身份验证）并编写日志。

网关：

const express = require('express')
const request = require('request-promise-native')
const app = express()

app.get('/', async (req, res) => {
    // Write logs in database
    const uri = "http://localhost:3001/"
    const result = await request(uri)
    res.send(result)
 })

 app.listen(3000, () => console.log('Public API Gateway listening on port 3000!'))

Project structure with the 2 server files here

任何解决方案都值得赞赏。

谢谢！

Answer 1

由于我们的所有文件都从客户端隐藏，因此您需要使JavaScript，CSS和图像可公开使用。

那该怎么办？只需将所有客户端JavaScript，CSS和图像保留在公用文件夹中，并使该公用文件夹可用于客户端，例如：

//Using expressJs
//All your HTML will be in this folder.
app.set('views', __dirname + '/views');
//This is your HTML template to know more [what is ejs][1] and what's different between html and ejs or jade please do little research.
app.set('view engine', 'ejs');

//This is what makes your image, JS and CSS available to HTML page.
app.use(express.static(path.join(__dirname, 'public')));

如何从公用文件夹导入文件？ 使用以下方式：

// location of all these files is in public folder like:
// public/min/css/bootstrap.min.css
// public/min/js/app.min.js
// public/images/image1.jpg
<link rel="stylesheet" type="text/css" href="/min/css/bootstrap.min.css" />
<script type="text/javascript" src="/min/js/app.min.js"></script>

Answer 2

当您从首页微服务请求首页并将其html提供给网关微服务时，所有资源（即样式，脚本和图像）均未正确加载。这是因为在您的index.html中使用了相对资源的路径，例如

<link href="assets/styles.css"/>

如此：

在首页微服务中，assets/styles.css被解析为 //localhost:3001/assets/styles.css，然后快递服务器服务 assets/styles.css目录中的public，因为express被配置为 public目录中的静态文件：

app.use(express.static('public'))
在网关微服务中，assets/styles.css被解析为 //localhost:3000/assets/styles.css，然后快递服务器尝试投放 assets/styles.css但返回错误，因为网关中的快递服务器未将微服务配置为从任何目录提供静态资产。

此问题的一种简单解决方案是将对网关微服务中的/assets的所有调用重定向到//localhost:3001/assets，因此网关中的server.js看起来像这样

const express = require('express');
const request = require('request-promise-native');
const app = express();

// redirect /assets to localhost:3001/assets
app.get('/assets/**', (req, res) => {
    const uri = 'http://localhost:3001' + req.path;
    res.redirect(uri);
});

app.get('/', async (req, res) => {
    // Write logs in database
    const uri = "http://localhost:3001/";
    const result = await request(uri);
    res.send(result);
});

app.listen(3000, () => console.log('Public API Gateway listening on port 3000!'));

如何使用expressJ将JS，CSS和其他服务器端实用程序包含到NodeJ中的HTML页面中？

2 个答案: