使用Node.js将CSS和图像链接到远程Express服务器上的EJS模板(Ubuntu 18.04)

问题描述 投票:1回答:1

我一直在这里广泛搜索,但我尝试的每个解决方案都失败了,所以这是我的问题:

我在本地开发了一个基本的Express服务器来显示静态页面,直到我完成完全集成。我的网站结构是:

/node_modules
/public/
    css/
        styles.css
    images/
        Logo-large.jpg
/views/
    partials/
        footer.ejs
        header.ejs
    contact.ejs
    home.ejs
    signup.ejs
.env
index.js
package-lock.json
package.json

结果如下:Locally on my Mac

当部署到我的Ubuntu服务器并启动节点时,这是远程结果:Remotely on the server

index.js

//jshint esversion:6

require('dotenv').config();
const http = require("http");
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const _ = require("lodash");
const mongoose = require("mongoose");

const app = express();

app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));

mongoose.connect("mongodb://localhost:27017/contactDB", {useNewUrlParser: true});

// <===== DECLARING DATABASE SCHEMA =====>

const contactSchema = new mongoose.Schema ({
  name: String,
  company: String,
  phone: String,
  email: String
});

// <===== DECLARING DATABASE MODEL =====>

const Contact = new mongoose.model("Contact", contactSchema);

// <===== ROUTES =====>

app.get("/", function(req, res) {
  res.render("home");
});

app.get("/contact", function(req, res) {
  res.render("contact");
});

app.get("/signup", function(req, res) {
  res.render("signup");
});

let port = process.env.PORT;
if (port == null || port == "") {
  port = 3000;
}

app.listen(port, function() {
  console.log("Server started on port " + port);
});

styles.css

body {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  margin: 50px auto 50px;
  text-align: center;
  color: grey;
}

h3 {
  margin: 50px auto 50px;
  color: grey;
  text-align: center;
}

#main-logo {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 20%;
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

header.ejs

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Lub + Glass Consulting by Thierry Di Lenarda</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/styles.css" type="text/css">
  </head>
  <body>

home.ejs

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

  <h1>Welcome to Lub + Glass Consulting!<br>We are under construction...</h1>

  <img id="main-logo" src="/images/Logo-large.jpg" alt="Logo TLGC">

  <h3>Come back soon to learn more about the services I can provide.<br><br><em>Thierry Di Lenarda</em></h3>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

footer.ejs

  </body>
  <footer>

  </footer>
</html>

contact.ejs和signup.ejs为空。在开始使用其他所有内容之前,我希望这个“home.ejs”页面能够正确呈现。

有人能看出我做错了吗?我在stackoverflow中找到的每个答案都失败了。无法从“公共”文件夹访问或显示任何内容。

谢谢您的帮助!

[编辑]我的图像有“GET 502(代理错误)”,css文件有“GET net :: ERR_ABORTED 502(代理错误)”。

通过here在Vhost中的ProxyPass末尾添加“/”解决了这个问题

ProxyPass http://127.0.0.1:3000/ ProxyPassReverse http://127.0.0.1:3000/

[/编辑]

css node.js express ejs bad-gateway
1个回答
0
投票
  • 1此问题与您的链接有关,请查看链接。
  • 2您的服务器没有响应这些链接访问这些链接时出现一些错误,因为您的文件不可用。请检查一下。
© www.soinside.com 2019 - 2024. All rights reserved.