Question

我有 3 个脚本

index.html style.css 和 script.js

$(document).mousemove(function (event) {
  $('.torch').css({
    'top': event.pageY,
    'left': event.pageX
  });
});

html {
  height: 100%;
}

body {  
  height: 100%;
  background: url("https://wallpapercave.com/wp/6SLzBEY.jpg") no-repeat left top;
  background-size: cover;  
  overflow: hidden;
    
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.text h1{
  color: #011718;
    margin-top: -200px;
  font-size: 15em;
    text-align: center;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7), -10px 10px 0px rgba(0,0,0,0.4), -15px 15px 0px rgba(0,0,0,0.2);
    font-family: monospace;
  font-weight: bold;
}

.text h2{
  color: black;
  font-size: 5em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    text-align: center;
    margin-top: -150px;
    font-family: monospace;
  font-weight: bold;
}
.text h3{
  color: white;
    margin-left: 30px;
  font-size: 2em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    margin-top: -40px;
    font-family: monospace;
  font-weight: bold;
}
.torch {
  margin: -150px 0 0 -150px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 9999em #000000f7;
    opacity: 1;
  border-radius: 50%;
  position: fixed;
    background: rgba(0,0,0,0.3);
  
  &:after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    box-shadow: inset 0 0 40px 2px #000,
            0 0 20px 4px rgba(13,13,10,0.2);  
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
<link rel="stylesheet" href="style.css">
  <h1>404</h1>
    <h2>Hello Foo</h2>
  <h3>Sorry you're lost.. Come back later</h3>
</div>
<div class="torch"></div>

全部在 src 目录中。

我正在尝试将其捆绑到 docker 映像中以创建 404 错误页面。我能够构建图像并呈现 index.html 页面，但 CSS 未加载并且是新手，我不确定我做错了什么。

这是我的 dockerfile。

FROM nginx:stable
COPY src/ /usr/share/nginx/html

Answer 1

问题不在于 docker 而在于 html。您还没有包含您的 script.js，您发布的 html 只是页面的一个片段，不是完整的 html5 页面

假设你有这个目录结构，一旦你包含你的js，它就会工作

Vacancy.objects.filter(Q(job_title__icontains=q)).distinct()

就跑

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer</title>
</head>
<body>
    <button>Increment delay by 5 seconds</button>
    <script>
        var timer = 5000;
        function showAlert(){
            alert("Hello world");
        }
        setTimeout(showAlert, timer);
    </script>
</body>
</html>

Answer 2

在 docker 中将 /usr/share/nginx/html 目录设置为 **VOLUME: ** VOLUME ["/usr/share/nginx/html"] 并使用 -v ./src:/usr/share/nginx/html 选项运行容器

如何将 CSS 和 JS 添加到 Docker 镜像

2 个答案: