как отображать веб-страницы из нескольких разных каталогов с помощью express

ProgramBox

как отображать веб-страницы из нескольких разных каталогов с помощью express

Post author:admin
Запись опубликована:8 ноября, 2022
Post category:Вопросы по программированию

#javascript #node.js #express #networking

#javascript #node.js #экспресс #сеть

Вопрос:

Я пытаюсь запустить несколько разных сайтов на сервере ubuntu, к которому я подключен через общедоступное соединение. Там должен быть основной сайт и 2 подсайта. В настоящее время важная часть каталога представлена следующим образом:

 .
|---index.js
|--_node_modules
   └---(all the node modules)
|---package-lock.json
|--_Public
   |---index.html
   └---(required folders amp; files for index.html)
|--_A
   └--_folder
      |---index.html
      └---(required folders amp; files for index.html)
|--_B
   └--_folder
      |---index.html
      └---(required folders amp; files for index.html)

Мой index.js имеет следующий код:

 const express = require('express')
const path = require('path')
const app = express()
const port = 3000

app.get('/', (req, res) => {
        app.use(express.static(path.resolve('/public')))
        res.sendFile('index.html')
})

app.get('/a', (req, res) => {
        app.use(express.static(path.resovle('/A/folder')))
        res.sendFile('index.html')
})

app.get('/b', (req, res) => {
        app.use(express.static(path.resolve('/B/folder')))
        res.sendFile('index.html')
})

app.listen(port, () => {
        console.log('Running server on port '   port)
})

С помощью этого способа реализации index.js , ни один из сайтов не работает вообще.

Когда я набираю «(public_ip): 3000», «(public_ip): 3000 / a» или «(public_ip): 3000 / b», это дает мне:

Ошибка: ENOENT: нет такого файла или каталога, stat ‘/index.html ‘

Я также попробовал мой index.js в качестве следующего:

 const express = require('express')
const path = require('path')
const app = express()
const port = 3000

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

app.get('/', (req, res) => {
        res.sendFile('/index.html')
})

app.get('/a', (req, res) => {
        res.sendFile('/index.html', {root: 'A/folder'})
})

app.get('/b', (req, res) => {
        res.sendFile('/index.html', {root: 'B/folder'})
})

app.listen(port, () => {
        console.log('Running server on port '   port)
})

Это приведет к тому, что «(public_ip): 3000» будет работать отлично.
Единственная проблема здесь заключается в том, что теперь «(public_ip): 3000 / a» и «(public_ip): 3000 / b» отображают только html и не могут найти ни один из других файлов со следующими ошибками в консоли:

 Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet 
MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/animate.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/icomoon.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/bootstrap.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/flexslider.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/owl.carousel.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/owl.theme.default.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/A/folder/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/vendor/bootstrap/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/vendor/fontawesome-free/css/all.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/css/resume.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/css/font-mfizz.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/vendor/bootstrap/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/css/resume.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/css/font-mfizz.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:1 Refused to apply style from 'http://(public ip):3000/vendor/fontawesome-free/css/all.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
a:46 GET http://(public ip):3000/js/modernizr-2.6.2.min.js net::ERR_ABORTED 404 (Not Found)
a:864 GET http://(public ip):3000/js/jquery.flexslider-min.js net::ERR_ABORTED 404 (Not Found)
a:868 GET http://(public ip):3000/js/jquery.countTo.js net::ERR_ABORTED 404 (Not Found)
a:871 GET http://(public ip):3000/js/portfolio.js net::ERR_ABORTED 404 (Not Found)
2a:1 GET http://(public ip):3000/images/aboutme.jpg 404 (Not Found)
DevTools failed to load SourceMap: Could not load content for http://(public ip):3000/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
a:864 GET http://(public ip):3000/js/jquery.flexslider-min.js net::ERR_ABORTED 404 (Not Found)
a:868 GET http://(public ip):3000/js/jquery.countTo.js net::ERR_ABORTED 404 (Not Found)
main.js:6 Uncaught TypeError: $(...).stellar is not a function
    at main.js:6
    at main.js:245
(anonymous) @ main.js:6
(anonymous) @ main.js:245
a:871 GET http://(public ip):3000/js/portfolio.js net::ERR_ABORTED 404 (Not Found)

Как вы можете видеть в ошибке, я установил для некоторых своих html-ссылок и скриптов путь из index.js файл (например: A/folder/css/animate.css) и остальные из index.html файл (например: js/modernizr-2.6.2.min.js ).

Кажется, ни один из них не сработал, поэтому я не знаю, что еще попробовать. Надеюсь, это вся информация, чтобы кто-то знал, в чем проблема. Если нет, я уверен, что вы дадите мне знать. Спасибо.

Ответ №1:

Вы должны использовать несколько каталогов статических ресурсов, вызывать функцию express.static промежуточного программного обеспечения несколько раз. Кроме того, мы можем создать префикс виртуального пути (где путь фактически не существует в файловой системе) для файлов, которые обслуживаются express.static функцией, укажите путь монтирования для статического каталога. Мы используем префикс виртуального пути для различения разных папок (A, B,public).

 const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static(path.resolve(__dirname, './public')));
app.use('/a', express.static(path.resolve(__dirname, './A/folder')));
app.use('/b', express.static(path.resolve(__dirname, './B/folder')));

app.get('/', (req, res) => {
  res.sendFile('index.html', { root: path.resolve(__dirname, 'public') });
});

app.get('/a', (req, res) => {
  res.sendFile('index.html', { root: path.resolve(__dirname, 'A/folder') });
});

app.get('/b', (req, res) => {
  res.sendFile('index.html', { root: path.resolve(__dirname, 'B/folder') });
});

app.listen(port, () => {
  console.log('Running server on port '   port);
});

A/folder/index.html :

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/a/css/style.css">
  <title>A</title>
</head>
<body>
  A
</body>
</html>

A/folder/css/style.css :

 body {
  background: red;
}

Файлы в каталоге B такие же, как и в каталоге A.

public/index.html :

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/resume.css">
  <title>Document</title>
</head>
<body>
  From public
</body>
</html>

public/css/resume.css :

 body {
  background-color: yellow;
}

исходный код: https://github.com/mrdulin/expressjs-research/tree/master/src/stackoverflow/65398400

Вопрос:

Ответ №1:

Вам также может понравиться

Есть ли способ отображать только выбранное свойство в объекте json на основе массива

Spring MVC с конфигурацией oauth2 и JWT xml

Попытка смонтировать хост-том в контейнере Docker в Windows. Относительно чего находится исходная папка?