Как включить JS, CSS и другие серверные утилиты в HTML-страницу в NodeJ, используя expressJ? - PullRequest
Новая
       12

Как включить JS, CSS и другие серверные утилиты в HTML-страницу в NodeJ, используя expressJ?

0 голосов
/ 24 августа 2018

Я не смог найти ни одного решения, которое бы сработало для меня.

Я пытаюсь создать простую архитектуру микросервисов с экземплярами Node.js.Я не использую Dockerfile.Домашняя страница микросервисов корректно отображает HTML с CSS, JS.Микросервис шлюза не загружает CSS, JS (страница выглядит неработающей).

html домашней страницы здесь

html ответа шлюзаздесь

На данный момент у меня есть 2 микросервиса:

  1. Экспресс-сервер, который отправляет файл 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!'))

Структура проекта с сервером 2файлы здесь

Любое решение действительно приветствуется.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

Когда вы запрашиваете домашнюю страницу из микросервиса домашней страницы и передаете ее html в микросервис шлюза, все ресурсы (то есть стили, сценарии и изображения) загружаются неправильно.Это потому, что в вашем index.html используются относительные пути к ресурсам, например, 

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

так:

  • В микросервисе домашней страницы assets/styles.css разрешается в //localhost:3001/assets/styles.css, тогда сервер экспресс-обслуживания обслуживает assets/styles.css из каталога public, так как экспресс настроен на обслуживание статических файлов из каталога 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!'));
0 голосов
/ 25 августа 2018

Вы должны сделать свой 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>
...