Node.js 通过 A2 托管上传的网络应用程序 - CSS 的路径问题

Question

我目前正在学习 node.js 并且还很新，所以对于第一个问题可能效率低下或格式错误，我提前表示歉意。我正在上传一个单页测试来了解如何使用 A2 的 node.js 服务。

到目前为止，我已经按照 A2 教程“如何使用 Node.js 选择器使用 cPanel 创建 Node.js 应用程序”(https://www.a2hosting.com/kb/cpanel/cpanel-software/create-application-with-nodejs-selector) and this tutorial on syncing git repositories (https://medium.com/@pampas93/host-your-node-js-app-on-shared-hosting-go-beyond-localhost-73ab923e6691) 进行操作，并且我已经能够使一切正常工作除了主页

（位于dirname/repositories/test/views/home-visitor.ejs）

不会读取我上传的CSS文件

（位于：dirname/repositories/test/public/main.css）

部分图片无法加载。没有文件名拼写错误或正斜杠“/”语法不一致，所有图像共享相同的文件夹路径。

（位于：dirname/repositories/test/public/images）

因此 node.js 应用仅显示为纯 HTML。我已经将完全相同的 app/git 存储库上传到 Heroku 并且读取了 CSS 并且显示了所有图像，所以我试图弄清楚在专门上传到 A2 的托管服务时我遇到了哪些路径问题。

当我在浏览器上检查 'inspect' 以查找非工作应用程序页面时，我收到以下控制台消息：

"Refused to apply style from 'http://domainname.com/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

Failed to load resource: the server responded with a staus of 404 () nonWorkingImageExample.png:1

Failed to load resource: the server responded with a staus of 404 () anotherNonWorkingImageExample.png:1

http://domainname.com/test/main.css 发送到 404 页面

app.js:

const express = require("express")
const app = express()

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

app.use(express.static("/public/"))
app.set("views", "views")
app.set("view engine", "ejs")

app.get("/test", function (req, res) {
  res.render("home-visitor")
})

app.listen(3000)

我正在测试的页面：home-visitor.ejs:

<!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
            
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
    <header>          
        <div class="forMobile mobileHeader">
            <div class="mobileLogo">
                <a href="#"><img src="images/workingImageExample.png" alt="Image Description"> 
                </a>
            </div>
        </div>  
    </header>
            
   <div class="forDesktop centerContent tempMssg">"Lorem flexitarian salvia offal umami. Sartorial swag drinking portland cray. Godard jianbing retro thundercats hella tilde. "
            
        <br><br> 
        <a href="#" target="_blank" rel="noopener noreferrer">
            <img src="images/nonWorkingImageExample.png" alt="Twitter Logo Link" width="35px" height="35">
        </a>
    </div>                  
    <div class="forMobile mobileUpperBG">
        <img src="images/anotherNonWorkingImageExample.png" alt="upper left bg image">
    </div>
</html>

我希望熟悉在 A2 上托管 node.js 应用程序的人可以提供帮助，感谢您花时间阅读这个问题。

Answer 1

此解决方案的全部功劳归功于 VictoryFlame 的视频 https://www.youtube.com/watch?v=BAD5JyOymRg.

我最终编辑了 app.js 路径我的 public 文件夹的方式，并更新了我 link 在我的 .ejs 文件中编辑 CSS 和图像文件的方式：

app.js:

const express = require("express")
const app = express()
const path = require("path")

app.set("views", path.join(__dirname, "views"))
app.set("view engine", "ejs")

app.use("/test1/static", express.static("public/"))

app.get("/test1", function (req, res) {
  res.render("home-visitor")
})

app.listen()

我将样式 link 重新格式化为 CSS 页面并对图像使用此路径语法：

首页-visitor.ejs:

<link rel="stylesheet" href="https://domainname.com/test1/static/home.css">

<a href="#" target="_blank" rel="noopener noreferrer">
<img src="/test1/static/images/imageWorksNow.png" alt="Twitter Logo Link" width="35px" height="35"></a>

现在一切正常 served/linked 并出现。我希望有一天这对其他人有所帮助！

Node.js 通过 A2 托管上传的网络应用程序 - CSS 的路径问题

Node.js web app uploaded through A2 Hosting - pathing issue with CSS

web-hosting

web-applications

ejs

node.js

express