運行 docker 和 express.js 時，引導程序在客戶端不起作用

Question

我目前在使用 docker 與 node.js 和引導庫運行服務器時遇到一些問題。

這是區別：

在 VS 代碼中使用實時服務器

與 Docker 和 node.js

一些 styles 工作，而其他不工作，我無法弄清楚。 我會看到消息“來自“http://localhost:8000/signin.css”的資源由於 MIME 類型 (“text/html”) 不匹配 (X-Content-Type-Options: nosniff) 而被阻止。” 在控制台中，但只要我刪除紅色或添加類型（“text/html”），它就會從頁面中刪除所有 css。 有誰知道為什么？

這是登錄的代碼。html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta
      name="author"
      content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
    />
    <meta name="generator" content="Hugo 0.88.1" />
    <title>CBO</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <link href="/css/signin.css" rel="stylesheet" type="text/css"/>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    async></script>

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    <link href="signin.css" rel="stylesheet" />
  </head>
  <body class="text-center">
    <main class="form-signin">
      <form>
        <img
          class="mb-4"
          src="/img/globe.png"
          alt=""
          width="102"
          height="87"
        />
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

        <div class="form-floating">
          <input
            type="email"
            class="form-control"
            id="floatingInput"
            placeholder="name@example.com"
          />
          <label for="floatingInput">Email address</label>
        </div>
        <div class="form-floating">
          <input
            type="password"
            class="form-control"
            id="floatingPassword"
            placeholder="Password"
          />
          <label for="floatingPassword">Password</label>
        </div>

        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me" /> Remember me
          </label>
        </div>
        <a href="/server/pages/index.html">
        <button class="w-100 btn btn-lg btn-primary" type="button">
          Sign in
        </button>
        
        <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
        <div class="attribution">Icons made by <a href="https://www.flaticon.com/authors/nadiinko" title="Nadiinko">Nadiinko</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
      </form>
    </main>
  </body>
</html>

Dockerfile

FROM node:latest

WORKDIR /app

EXPOSE 8080

RUN npm init -y

RUN npm install express body-parser mysql nodemon cors bootstrap

服務器.js

'use strict'

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = 8000;
const HOST = "0.0.0.0";
const path = require('path'); 

app.use(bodyParser.urlencoded({ extended: true })); 
app.use(express.json());

app.use(express.static(__dirname + "/css", {
  index: false,
  immutable: true,
  cacheControl: true,
  maxAge: "30d" 
}));

app.use(express.static(__dirname + "/img", {
  index: false,
  immutable: true,
  cacheControl: true,
  maxAge: "30d"
}));

app.get('/', (req,res) => {
  res.sendFile(path.join(__dirname, "pages/login.html"));
});
app.listen(PORT,HOST);
console.log("up and running");

我還沒有設置我的路線。 如果重要的話，這是文件夾的層次結構：

我還沒有嘗試將引導源代碼復制到我的 css 文件中，因為我希望首先以這種方式解決它。

Answer 1

將帶有 css 路徑的“音量”添加到 docker-compose.yml。

例子：

volumes:
    - /usr/src/app/web/project/static:/www/static

運行 docker 和 express.js 時，引導程序在客戶端不起作用

問題描述

1 個解決方案

解決方案1
0 2021-12-31 04:40:37

運行 docker 和 express.js 時，引導程序在客戶端不起作用

問題描述

1 個解決方案

解決方案1 0 2021-12-31 04:40:37

解決方案1
0 2021-12-31 04:40:37