NodeJS (EJS) 添加样式表 - 未找到答案

【问题标题】：NodeJS (EJS) adding stylesheet - not foundNodeJS (EJS) 添加样式表 - 未找到
【发布时间】：2020-01-12 03:37:38
【问题描述】：

我尝试在我的基于EJS模板引擎的node js项目中添加一个CSS文件，它不起作用，找不到文件。

GET http://localhost/css/bulma.css net::ERR_ABORTED 404（未找到）

我的项目文件夹结构

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

我已经包含了 app.use (express static) 如下

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

在我的 header.ejs 中，我包含这样的 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'));

这里有人知道问题可能是什么吗？

编辑

完整的服务器代码（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}`)
})

用于动态模板系统的 index.ejs

<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 配置。

我看过以下内容：

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";
}
}

【问题讨论】：

app.use(express.static(__dirname + '/public')); 应该可以工作。尝试记录 __dirname + '/public' 以确保它具有正确的值。
您能发布您的完整服务器代码吗？也许其他一些中间件正在阻止express.static 完成其工作
@Quentin 是的节点JS项目的正确路径。
@pzaenger 当您访问他的链接时，会显示来自 NGINX 的 404，服务器头也回答：Server: nginx/1.14.0 (Ubuntu)，并且：他的代码 sn-p 监听端口 3000，但页面在端口上已发布 80 篇
@DavDeveloper 我不确定，但我认为问题出在 nginx 中

标签： css node.js express nginx ejs

【解决方案1】：

您只转发/，但没有子目录/路径。因此 nginx 尝试在他的root /home/nodejsproject/ 中找到/css/bulma.css 尝试这样的事情：

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 将变得几乎没用，因为您将所有流量转发到您的 node.js 应用程序

你应该直接从 nginx 提供静态文件

【讨论】：

非常感谢您的回答。我已经在上面添加了一个适合我的解决方案。

【解决方案2】：

您好，我使用 hello 类做了类似的事情。

我的项目文件夹结构

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

bulma.css

.hello {
  background-color: blue;
}

home.ejs

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

index.ejs

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

header.ejs

<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}`);
});

【讨论】：

那你在说什么？这是修复还是你说他的代码适合你？
注意：<meta> 和 <link> 标签不使用也不需要结束斜杠，并且在 HTML 中永远不会有。
我认为这里的问题是别的，代码 sn-p 看起来不错，但他的应用程序运行在反向代理 (nginx) 后面。我认为问题在这里，而不是节点应用程序本身