NodeJS (E JS) добавление таблицы стилей - не найдено - PullRequest
Новая
       4

NodeJS (E JS) добавление таблицы стилей - не найдено

0 голосов
/ 11 января 2020

Я пытаюсь добавить файл CSS в мой проект node js на основе E JS Template Engine, он не работает, файл не найден.

GET http://localhost/css/bulma.css net :: ERR_ABORTED 404 (не найдено)

структура папки моего проекта 

./index.js
./views
    /partials
        /header.ejs
./public
    /css
        /bulma.css

Я включил app.use (express stati c) следующим образом 

app.use(express.static(__dirname + '/public'));

в моем header.e js Я включаю CSS файл, подобный этому: 

<link href="/css/bulma.css" rel="stylesheet" type="text/css">

Я попробовал все, это не работает.

Это тоже не работает: 

app.use('public', function(req,res,next){
   console.log(req.url); // Never output
   next();
});

Я также попробовал следующее: 

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

Кто-нибудь здесь имеет какое-либо представление, в чем может быть проблема?

РЕДАКТИРОВАТЬ

Полный код сервера (индекс. js) 

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

app.use(express.static(__dirname + '/public'));
// set the view engine to ejs
app.set('view engine', 'ejs');

// index page 
app.get('/', function(req, res) {
    res.render('pages/index', {
        template: '../pages/home'
    });
});

app.listen(port, (err) => {
  if (err) {
    return console.log('something bad happened', err)
  }

  console.log(`server is listening on ${port}`)
})

index.e js для динамической c системы шаблонов 

<header>
    <%- include('../partials/header') -%>
</header>

<%- include(template) -%>

<footer>
    <%- include('../partials/footer') -%>
</footer>

/ etc / nginx / sites-available / default 

server {
        listen 80 default_server;
        listen [::]:80 default_server;

    root /home/nodejsproject/;

        server_name _;

        location / {
                proxy_pass http://localhost:3000;
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
}

и 

console.log(__dirname + '/public');

- это правильный путь к node js пути проекта

РЕШЕНИЕ : проблема заключалась в NGINX config.

Я посмотрел на следующее:

https://geekflare.com/nginx-static-files-node-js/

Я изменил файл конфигурации следующим образом: 

upstream backend {
server localhost:3000;
}

server {
listen 80;
server_name nodeproject;

root /home/nodeproject/;

location / {
try_files $uri @backend;
}

location @backend {
proxy_pass http://backend;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}

Ответы [ 2 ]

1 голос
/ 11 января 2020

Вы только перешлите /, но нет подкаталога / путей. Поэтому nginx пытается найти /css/bulma.css в своем root /home/nodejsproject/ Попробуйте что-то вроде этого: 

location ~/(.*)$ {
  proxy_set_header X-Real-IP  $remote_addr;
  proxy_set_header X-Forwarded-For $remote_addr;
  proxy_set_header Host $host;
  proxy_pass http://127.0.0.1:3000$1;
}

НО: тогда ваш NGINX станет почти бесполезным, потому что вы пересылаете все trafi c в ваше node.js приложение

Вы должны подавать c файлы непосредственно с nginx

0 голосов
/ 11 января 2020

Здравствуйте, я сделал то же самое, используя класс hello, он работает.

структура папок моего проекта 

./index.js
./views
    /partials
        /header.ejs
    /pages
        /index.ejs
        /home.ejs
./public
    /css
        /bulma.css

bulma. css 

.hello {
  background-color: blue;
}

home.e js

<body>
  <h1 class="hello">Hello world!</h1>
</body>

index.e js

<!DOCTYPE html>
<html lang="en">
  <header>
    <%- include('../partials/header') -%>
  </header>
  <%- include(template) -%>
</html>

header.e js

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="/css/bulma.css" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>

index. js

const express = require("express");
const app = express();
const port = 3000;

app.use(express.static(__dirname + "/public"));
// set the view engine to ejs
app.set("view engine", "ejs");

// index page
app.get("/", function(req, res) {
  res.render("pages/index", {
    template: "../pages/home"
  });
});

app.listen(port, err => {
  if (err) {
    return console.log("something bad happened", err);
  }

  console.log(`server is listening on ${port}`);
});
...