我尝试基于EJS Template Engine在我的node js项目中添加CSS文件，它不起作用，找不到该文件。
获取http://localhost/css/bulma.css net :: ERR_ABORTED 404（未找到）
我的项目文件夹结构
./index.js
./views
/partials
/header.ejs
./public
/css
/bulma.css
我已按如下方式包含app.use（表示静态）
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项目路径的正确路径]
SOLUTION：这里的问题是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";
}
}
您仅转发/，但没有子目录/路径。因此，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几乎变得无用，因为您将all交通转发到您的node.js应用
您应该直接从nginx提供静态文件
您好，我使用类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}`);
});