Связывание CSS и изображений с моими шаблонами EJS на удаленном сервере Express с помощью Node.js (Ubuntu 18.04) - PullRequest
Новая
       35

Связывание CSS и изображений с моими шаблонами EJS на удаленном сервере Express с помощью Node.js (Ubuntu 18.04)

0 голосов
/ 28 февраля 2019

Я интенсивно искал здесь, но каждое решение, которое я пытался, продолжало терпеть неудачу, поэтому вот моя проблема:

Я разработал локально базовый сервер 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

Вот результат: Локально на моем Mac

При развертывании на моем сервере Ubuntu и запущенном узле, вот результат удаленно: Удаленно на сервере

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, до сих пор не удался.Невозможно получить доступ или отобразить что-либо из папки public.

Спасибо за помощь!

[EDIT] У меня есть «GET 502 (Ошибка прокси-сервера)» для изображения и «GETnet :: ERR_ABORTED 502 (ошибка прокси-сервера) "для файла css.

Решено добавлением« / »в конце ProxyPass в Vhost благодаря здесь

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

[/ EDIT]

1 Ответ

0 голосов
/ 03 марта 2019
  • 1 Эта проблема связана с вашими ссылками, проверьте ссылки.
  • 2 Ваш сервер не отвечает на эти ссылки, возникла ошибкав доступе к этим ссылкам, из-за которых ваши файлы не могут быть использованы.пожалуйста, проверьте их.
...